Facebookの「フィード購読ボタン」をウェブサイトに設置する

Facebookの「フィード購読ボタン」をウェブサイトに設置する

Posted at December 13,2011 2:55 AM
Tag:[Facebook, Feed]

Facebookから新しいソーシャルプラグイン「フィード購読ボタン(Subscribe Button)」が2011年12月9日に公開されました。

Introducing the Subscribe Button for Websites
Introducing the Subscribe Button for Websites

本エントリーでは、フィード購読ボタンの機能と設定方法について説明します。

1.フィード購読について

まず、Facebookのフィード購読とは、Facebook上の友達でないユーザーの投稿(フィード)を読んだり、逆に自分の投稿を友達以外のユーザーに公開できる機能です。

例えば、友達でないユーザーのフィードを購読するには、購読したいユーザーのページに表示されている「フィードを購読」をクリックするだけです。なお、ユーザーが購読を許可していなければ、このボタンは表示されません。

フィードを購読

フィード購読の基本的な機能については以下の記事を参照してください。

Facebookフィード購読機能の徹底解説

2.フィード購読ボタンについて

フィード購読ボタンは前項のように、これまでFacebook上にしか表示されませんでしたが、ソーシャルプラグイン「フィード購読ボタン(Subscribe Button)」を利用することで、フィード購読ボタンをブログなど外部のウェブサイトに設置することができるようになりました。

なお、フィード購読対象にできるは個人ユーザーのみで、Facebookページは対象外です。Facebookページの購読者を増やすには「いいね!ボタン」を設置しましょう。

私のFacebookのフィード購読ボタンのサンプルは次のようになります。「フィードを購読」をクリックすれば、Facebook上で友達になっていなくても私の投稿が読めるようになります。ボタンの下に空白があるのはアイコンを表示するためのものです。



実際の動作は試していないので、不具合があったらすいません。次項より実際の設定方法について説明します。

3.アプリの作成

フィード購読ボタン作成にはアプリケーションIDが必要なので、そのためのアプリを作成します。

アプリのページで「Create New App」をクリック(初めて作る場合はその前に許可画面が表示されると思います)。

アプリのページ

適当なアプリ名とネームスペースを入力し、「I Agree~」をチェックして「続行」をクリック。ネームスペースに数字は使えません。

アプリ作成ダイアログ

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

これでアプリが作成できました。作成したアプリには他に色々な設定項目がありますが、多分作成のみで大丈夫だと思います(間違ってたらすいません)。

アプリケーションIDは次項のフィード購読ボタンを作成時、フィード購読ボタン表示コードに自動的に埋め込まれます。厳密には、複数のアプリから選択でき、そのアプリケーションIDが埋め込まれます。

4.フィード購読ボタンの作成

「Subscribe Button」のページにアクセス。

Subscribe Button
「Subscribe Button」のページ

フォームに各項目を設定します。「ProfileURL」には自分のFacebookのユニークURL(後述)を設定します。

フォーム

ユニークURLは、「ホーム」→「アカウント設定」に表示されています。

ユニークURL

設定が完了したら「Get Code」をクリック。

Get Code

コードが表示されます。コードは「HTML5」「XFBML」「IFRAME」の3種類から選べます。好きなコードを選択し、ウェブサイトの任意の位置にペーストしてください。一番設置しやすいのは「IFRAME」だと思います。

HTML5
HTML5

XFBML
XFBML

IFRAME
IFRAME

アプリケーションを複数作成している場合は、赤枠の部分から該当のアプリケーションを選択してください。

アプリケーションを選択

以上です。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)