アプリをタイムラインに追加しよう

Facebookと連携しているアプリにはたくさんの種類があり、アプリ内でのアクティビティを、タイムラインに追加することができます。

例えば、今回の記事で紹介する『TripAdviser』は、旅行に関するアプリですが、アプリ内で追加した地図情報がそのままフェイスブックのスポットに追加されたり、アクティビティをタイムラインに追加したりすることができます。

【補足】
『アプリをタイムラインに追加』という文句で、Facebookでも解説されているため勘違いしやすい（私は勘違いしてましたorz）と思うのですが、この意味は、アプリの機能をタイムラインに追加するものではありません。むしろ、『アプリ上でのアクティビティをタイムラインに表示』と言い換えた方がしっくりくるかもしれません。決してタイムラインに新しい機能（アプリの機能）が加わるわけではありません。

まずは下記のリンク先に移動して、アプリを利用しましょう。
https://www.facebook.com/about/timeline/apps

下記の画像が表示され、その下にお薦めのアプリ一覧が表示されます。

今回は『旅行』の項目から、『TripAdviser』を利用します。

アプリの利用開始前の確認事項です。アプリがアクセスするアカウント情報を確認しておきましょう。



良ければ『ＯＫ』をクリックします。

アプリへ移動しました。
【アプリについて】
『TripAdviser』は、あなたが今までに旅行したことがある国や都市などを、アプリの地図上に記録していくことができます。他にもそれぞれの場所を評価したり、友達とシェアしたりすることができるようです。フェイスブックアカウントでログインすることで、アプリとフェイスブックの連携ができます。



さっそく今までに訪れた国や町などをアプリに追加してみます。
今回は、入力枠（赤枠）にニュージーランドの町を追加しました。



私もあまり利用経験のないアプリですが、何かバッジのようなものを獲得できました。

はい。大事なのはここですが、バッジを獲得した表示の下に『タイムラインに追加する』とありますので、こちらをクリックします。

》　タイムライン上に表示される

では、フェイスブックのタイムラインへ移動します。
タイムライン上に、先ほどの『TripAdviser』で獲得したバッジの情報が表示されていました。

》　スポットとの連携

今度はタイムラインのスポットを確認してみます。
スポット上に、先ほどアプリ上で追加した情報が追加されています。
完全にアプリとフェイスブックが連携しているのが分かりますね。

詳細を確認すると、（TripAdviserより）と表示されています。

アクティビティログにも、アプリ上の活動が表示されるようです。

今回の『TripAdviser』のように、投稿記事だけでなくスポットなどの機能においても、見事に連携できるアプリは他にもあると思います。

私の知るかぎりでは、音楽アプリ（Spotify）やフィットネスアプリなど、スマートフォンとの連携もできそうなアプリはたくさんあります。

アプリの利用で一番のポイントは、友達との情報のシェアです。
友達が利用しているアプリはつい利用してみたくなりますよね。

なお、アプリがシェアする情報の共有範囲を変更するには、
アカウント設定→アプリ→変更したいアプリ→共有範囲の変更ができます。

いいね！ボタンをブログ（Blogger）に追加する方法

先日の記事で『Like Box』（いいね！ボックス）を作成してブログに貼る方法をご紹介しましたが、今回は同じソーシャルプラグインである『Like Button』（いいね！ボタン）についてです。

どちらも名前は似てますが、いいね！の対象が異なります。
『いいね！ボックス』→お持ちのFacebookページへのいいね！
『いいね！ボタン』→ボタンを設置したサイトや記事へのいいね！

Webサイトをお持ちの方ならぜひ利用したいソーシャルボタンの一つです。
今回は、Facebookのソーシャルプラグインで最も利用者が多いと思われる『いいね！ボタン』の作成方法をご紹介します。

まずは下記のリンク先へ移動します。
https://developers.facebook.com/docs/reference/plugins/like/


『Facebook developers』の『Like Button』作成ページに移動しました。
ページの中ほどに『Configurator』とありますので、そちらで『いいね！ボタン』の作成ができます。

ボタンのサイズなどの情報入力していくと、その下にあるプレビューに作成状況が表示され、最後に左下の『Get Code』をクリックするとコードが表示される仕組みです。



















作成するボタンの情報を入力していきます。

『URL to Like』→ボタンを取り付けたいWebサイトのURLを入力します。
『Layout Style』→『standard』、『button count』、『box count』の３つのタイプから選ぶことができます。実際にプレビューで確認しながらやるといいと思います。
『Color Scheme』→『Light』、『Black』から選べます。
『Width』→ボタンの幅を決めます。
『Font』→６種類のフォントから選べます。
『Verb to display』→ボタンの表示方法を『like』（いいね！）、『recommend』（おすすめ）の２種類から選択できます。表示が異なるだけです。お好みでどうぞ。
『Send Button』→サイトのリンクを最大20人まで送ることができます。メッセージ、グループ、またはメールアドレスへも送ることができます。
『Show faces』→いいね！をしてくれたユーザーのプロフィール画像が表示されます。

※色々変更が面倒だ、という方は、ボタンのスタイルだけ変更して、後はコード作成しても良いと思います。

最後に左下にある『Get Code』をクリックします。

あとはこのコードをお持ちのサイトに貼り付けれるだけです。

【ブログへの貼り付け補足１】
ここから先は、フェイスブックとは直接関係ありませんが、私のようにBloggerブログに貼り付ける場合は、ガジェットを使って簡単にブログに設置することができます。
以下の流れでボタンを表示させることができます。

（コードはIFRAMEを選択）
レイアウト→貼り付けたい場所の『ガジェットを追加』をクリック→HTML/JavaScriptを選択→コードを貼り付けて保存


【ブログへの貼り付け補足２】

いいね！ボタンだけでなく、Twitterなど他のボタンも利用したい方は、『忍者おまとめボタン』のように、他ソーシャルボタンを一度にまとめて設置できるサイトもあります。とっても便利ですよ。
『忍者おまとめボタン』

Facebookの投稿をサイトに埋め込む方法（埋め込み投稿）

つい先月末（7月2013年）から一般ユーザーにも公開された『Embedded Posts』（埋め込み投稿）が、8月も半ばを過ぎ、私もようやく使えるようになりました。（8月前半は使えませんでした）

そこで今回は、フェイスブックの投稿をWebサイトに''埋め込む''方法をご紹介します。

フェイスブック内で『公開』されている投稿を、自分のサイトに直接埋め込むことができる機能です。

各投稿右上の『▼』タブをクリックして表示される『埋め込み投稿』を選択、続いて表示されるコードをコピーして、あとは自分のサイトに貼り付けるだけで、簡単にフェイスブックの投稿をブログやホームページに表示させることができます。

投稿の持つ『いいね！』の数やシェア、コメントなどもそのまま表示させることができます。
また、ユーザーは『埋め込み投稿』に対して『いいね！』やコメントなどのアクションをそのまま行うことができます。

◆ポイント１．
自分の投稿だけではなく、友達、一般ユーザーの投稿であろうとも、『公開』されているものは埋め込むことができる。（ノートの投稿であっても、公開投稿されていれば利用可能）

◆ポイント２．
写真や動画にも対応しているということ。フェイスブック上では写真や動画を投稿するが、その機能をそのままサイトに持ち込むことができ、サイト上で動画を再生することができる。

◆ポイント３．
サイトに埋め込まれた投稿を見たユーザーが、埋め込み投稿に付いた『▼』タブからコードを取得し、さらに別の場所で埋め込むことができる。

◆ポイント４．
投稿を埋め込んだ後に、フェイスブック上で共有範囲が『公開』から変更されると、サイト上でも利用できなくなる。

埋め込みしたい投稿の右上にある『▼』タブをクリック。一覧の中にある『埋め込み投稿』をクリックします。

















次に表示されるコードをコピーします。

あとはご自分のサイトに、先ほどコピーしたコードを貼り付けると投稿が表示されます。
解説ではBloggerブログを利用しました。（レイアウト→ウィジェット→HTML/JavaScriptウィジェットに貼り付けで表示されました）

なお、サイトに埋め込み後に、フェイスブック上の投稿の共有範囲を『公開』以外にすると、下の画像のような表示があり、埋め込み投稿は表示されなくなります。
特に、他ユーザーの投稿を利用する場合、公開範囲が変更されたり、投稿が削除される場合もありますのでご注意を。

『埋め込み投稿』がまだ利用できない、という方もいるかもしれません。
その場合は、Facebook developersにあるソーシャルプラグインのページから、コードを作成することができます。

①まずは埋め込みをしたい投稿のＵＲＬを取得します。
投稿の上部にある『日付』をクリックします。

【補足】
投稿には日付の横に公開範囲が表示されています。
公開範囲が地球のマークなら『公開』設定となっていますので埋め込み利用できます。それ以外ならマークをクリックして変更をしておきましょう。



日付をクリックすると、投稿が個別に表示されると思います。
画面上部のＵＲＬは、この投稿個別のＵＲＬです。これをコピーします。





②次に下記のリンクに移動してコードを取得します。
『Embedded Posts』（埋め込み投稿）

リンク先に移動したら、画面中ほどにある『Get your Embedded Post Code』（埋め込み投稿のコードを取得）とあります。

その下、『URL of story』にある入力枠に、先ほどコピーした投稿のURLを貼り付けします。
（URLを貼り付けた後、画面のどこかをクリックすると埋め込みしたい投稿が表示されます）

最後に左下にある『Get Code』をクリックします。

これでコードが生成されました。
あとはコードをコピーしてサイトに貼り付けてください。

『埋め込み投稿』は、個人アカウントやFacebookページの投稿を、Webサイトに取り込むことができる機能です。

フェイスブックの投稿を、そっくりそのままサイトに移動させてきたような感じです。

特にお薦めしたい投稿、フェイスブック外でも拡散したい情報（例えばキャンペーンのお知らせ）などがある場合、この機能が役に立つと思います。

『Like Box』（いいね！ボックス）を作成してブログ（Blogger）に貼ってみました

前回の記事では、フェイスブックの『ソーシャルプラグイン』について、いくつか簡単に紹介しました。

ソーシャルプラグインをブログやホームページに設置するとことで、ＳＮＳ（ソーシャルネットワーキングサービス）と外部サイトの連携ができ、WebサイトにＳＮＳとしての機能を加えたり、より多くのユーザーにサイトを見てもらえる可能性が広がります。

今回はフェイスブックのソーシャルプラグインの一つである『Like Box』（いいね！ボックス）について。

先日、『Like Box』（いいね！ボックス）をこのブログ（Bloggerブログ）にも設置しましたので、その方法を覚書きついでにご紹介しておこうかなと思います。

『Like Box』（いいね！ボックス）は、お持ちのFacebookページをブログやホームページに貼り付けて紹介することができるプラグインです。

まずは下記のリンクより『Facebook　developers』にアクセスします。
『Like Box』（いいね！ボックス）

こちらが『Like Box』（いいね！ボックス）の生成ページです。
下の画像、赤枠部分にある入力枠に、それぞれ情報を入力していくことで、簡単に『Like Box』（いいね！ボックス）を作ることができます。

情報の入力欄の下には、作成中の『Like Box』（いいね！ボックス）のプレビューが表示され、詳細の変更とともにプレビューも変更されます。
作成後のボックスをイメージしながら作業することができますね。

それぞれの入力項目の説明です。

『Facebook Page URL』→お持ちのFacebookページのＵＲＬを入力します。
『Height』→ボックスの高さ
『Width』→ボックスの幅
『Color Scheme』→ボックスの配色

チェックボックス
『Show header』→ヘッダー部分の表示のオン・オフ
『Show Faces』→いいね！をしているユーザーのプロフィール画像のオン・オフ
『Show Stream』→Facebookページ内投稿の表示のオン・オフ
『Show Border』→ボックスの外枠のオン・オフ

こちらはそれぞれのチェックボックスが対応している部分です。
チェックを外すことでそれぞれのパーツを外すことができます。



作成が終了したら、左下の『Get Code』をクリックします。

これで『Like Box』（いいね！ボックス）をサイトに貼り付けるためのコードが表示されました。
私はBloggerブログのサイドバーにボックスを表示したかったので、『IFRAME』を選択しました。

『IFRAME』に表示されているコードをコピーします。

あとはBloggerブログにログイン→レイアウト→ガジェットを追加→HTML/JavaScriptガジェットに貼り付けで、無事『Like Box』（いいね！ボックス）が表示されました。

今回のように、Webデザインの知識がまったくない私でも、ボックスをブログに表示させることができました。

『Like Box』（いいね！ボックス）の作成も、英語表記ですが感覚的な操作で作成することができると思います。
Facebookページをお持ちの方は、ぜひ一度お試しを。

もしブログが参考になりましたら、ぜひ『いいね！』をお願いいたします。