facebookのsocial plugin(ソーシャルプラグイン)一覧

facebookの機能をサイト上で使えるfacebook social plugin。
僕が知らないだけかも知れませんが、
今ではいろんな種類が出てるんですね。
今後も使用する機会があると思うので、
調べるついでに一覧にしてみました。

1. Activity Feed
2. Comments
3. Facepile
4. Like Box
5. Like Button
6. Live Stream
7. Login Button
8. Page title
9. Recommendations
10. Registration
11. Send Button
12. Subscribe Button

はじめに

“Registration”以外のsocial pluginはSocial Plugins – Facebook開発者よりコンフィギュレータを使用することで簡単に設置コードを取得できます。
設置コードはHTML5版、XFBML版、IFRAME版の3種類あり、
プラグインによって使用できる種類が違います。
コードの貼り付け方は、「Get Code」ボタンで表示される各プラグインコードの説明に従ってください。

プラグインによっては、アプリIDが必要なものがあります。
アプリIDの取得方法は過去記事 Facebook・Twitterなどソーシャルボタン設定項目まとめ のfacebookの項をご覧ください。

「いいね」ボタンなどの表記が英語になる場合があります。
その場合はソースコード内のen_USの部分をja_JPに書き換えると日本語で表示されます。

Activity Feed

Activity Feedプラグインは、そのサイト上でのアクティビティを表示します。
facebookユーザーがログインしている場合、友人がサイトで「いいね」ボタンクリックや、
facebookでシェア、コメントボックスでコメントしたコンテンツが表示されます。
ログアウトしている場合はActivity Feedはおすすめを表示してログインボタンを表示します。

フィードを埋めるのに十分な友達のアクティビティがない場合は、おすすめで埋められます。
Recommendationsにチェックを入れると、下半分はおすすめで埋められます。
上半分を埋めるのに十分なアクティビティがない場合は、おすすめの量が増えます。

DEMO

設定項目

Activity Feed – Facebook開発者

トラフィックがサイト上のどのプラグインからか知りたい場合は
<fb:activity ref="homepage"></fb:activity>
<iframe src="...&ref=homepage"></iframe>
のように記述します。

ユーザーがクリックすると、リファリURLにfb_refパラメータが含まれます。
http://www.facebook.com/l.php?u=<your_url>&fb_ref=homepage

Comments

facebookのコメント機能をサイト上に設置できます。
またモデレーションツールを使用して、コメントの管理もできます。

DEMO

設定項目

Comments – Facebook開発者

Moderation tools

管理者はコメントをデフォルトの"すべてのユーザーに表示"か、
コメント投稿者とその友人だけに公開する"限られた公開"のいずれかを選択できます。
またブラックリストで禁止ワードの設定もできます。

Facepile

そのページを「いいね」している友人の写真を表示します。
該当するユーザーがいなければ何も表示されません。

DEMO

設定項目

Facepile – Facebook開発者

Like Box

facebookページを「いいね」してる人の写真表示の他に、
いいねボタン、ストリームの表示と比較的使い勝手のいいプラグイン。

DEMO

設定項目

Like Box – Facebook開発者

Like Button

ユーザーがそのページのコンテンツをユーザーとシェアするためのボタンです。
ユーザーが「いいね」ボタンをクリックすると、そのページの情報はウォールに表示されます.。
より活用したい場合はOGPタグの設置もお勧めします。

DEMO

設定項目

「いいね」ボタンの設置については過去に記事にしてますのでそちらをご覧ください。
Facebook・Twitterなどソーシャルボタン設定項目まとめ

Live Stream

ページにいるユーザーの活動やコメントがリアルタイムにシェアできます。
リアルタイムなイベントや、コンサート、スピーチ、ウェブチャット、マルチプレイヤーゲームなどに最適です。

DEMO

設定項目

Live Stream – Facebook開発者

Login Button

アプリケーション登録したサイトにログインさせるためのボタンを表示します。
サインインしてる場合はユーザーの写真を表示します。

設定項目

Page title

時間かけて調べてみたのですが、どんな機能かいまいち分かりません…
ご存知の方いたら教えて頂けるとありがたいです。

設定項目

Page title – Facebook開発者

Recommendations

ユーザーにパーソナライズされた記事を表示します。
ユーザーがfacebookにログインしてない場合は一般的なお勧め記事を、
ログインしてる場合は友人などの情報を元にしてお勧めを表示します。
精度がどのくらいかは検証してません。

DEMO

設定項目

Recommendations – Facebook開発者

Registration

ユーザは自分のFacebookアカウントを使ってサイトにサインアップできるようになります。
ユーザがFacebookにログインしていれば、ユーザーの情報が登録用フォームにあらかじめ入力されます。
Facebook APIでは取得できない情報（例えば好きな映画）の入力にも柔軟に対応します。
Facebookアカウントを持っていないユーザや、Facebookアカウントを使いたくないと言うユーザに対応することも可能です。

DEMO

設置方法

Registration – Facebook開発者

設置コードを取得するコンフィギュレータは用意されてないので、
解説を読んでサイトにあった適切なコードを入力してください。

Send Button

そのページの情報をfacebookの友人やグループ、特定のEmailアドレスへ送ることができます。
「いいね」ボタンが全員にシェアされるのに対し、
送信ボタンはプライベートなメッセージとして指定した友人のみにシェアされます。

DEMO

設定項目

Send Button – Facebook開発者

Subscribe Button

facebookユーザーのフィード購読ボタンを設置することができます。
自分がフィード購読されたい場合は設定をしておく必要があります。
詳細は以下の記事をご覧ください。
「フィード購読」を個人ブランド作りに活用しよう

DEMO

サンプルとしてMark Zuckerbergのフィード購読ボタンを設置してます。

設定項目

Subscribe Button – Facebook開発者

最後に

プラグインによって機能が違うので、
その特徴を理解することでいろいろなサイトの運用に役立ちそうです。
個人的にはアプリ関連のプラグインを理解するのに時間がかかったので、
開発よりの知識も深めいたと思います。