こんにちは、SMM Labの小川です。

自社サイトやブログに簡単にFacebookのいいね！ボタンやコメント欄を設置できる「Facebookソーシャルプラグイン」機能を徹底解説！前回に引き続き、全部で11種類あるソーシャルプラグインの後半をまとめて紹介します。

ぜひこれをきっかけに、自社で導入しているソーシャルプラグインを見直してみてください。

ソーシャルプラグイン全11種類　詳細解説（後半）

全11種類の内、前半記事で掲載していない、残りの6種類をご紹介します。ご自身のページのどこに何を使えそうか、イメージしながら読んでみてください。

ソーシャルプラグイン一覧ページ：https://developers.facebook.com/docs/plugins/

リコメンデーションズ ボックス（Recommendations Box）

https://developers.facebook.com/docs/reference/plugins/recommendations/

閲覧したユーザーにパーソナライズされたおすすめ記事を表示するボックス。Facebookにログインした状態であれば、友達の情報もあわせて表示される。

・Domain：

サイトのドメインを入力

・App ID：

サイトのApp IDを入力

・Action：

アクションタイプをコンマで区切って入力

・Width：

ボックスの横幅を指定（デフォルトは300px）

・Height：

ボックスの高さを指定（デフォルトは300px）

・Header：

Facebookのヘッダー（おすすめ）を表示するか選択

・Color Scheme：

light or darkを選択

・Link Target：

blank（新規ウインドウ）、top（同ウインドウ）、_parent（同ウインドウ親フレーム）から選択

・Border Color：

ボーダーの色を#FF0000など形式で入力

・Font：

6種類のフォントから選択

・Recommendations：

おすすめを表示するか選択。表示する選択をした場合、ボックスの下半分がおすすめで埋められる。

リコメンデーションズ バー（Recommendations Bar）

https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

ユーザーにパーソナライズされたおすすめ記事を表示するバーで、画面をある一定のところまでスクロールすると右下（あるいは左下）から表示される。Facebookにログインした状態であれば、友達の情報もあわせて表示される。

・URL of the article:

記事のURLを入力

・Trigger:

何をきっかけにしてバーを拡大させるか。onvisible（スクロールして、XFBMLタグが置かれた箇所を通過したら拡大）、x%（スクロールして、設定したパーセント分を通過したら拡大。100%以下で設定可）、manual（拡大するポイントをJava Scriptでマニュアル設定）から選択。

・Read Time:

リコメンデーションズバーが拡大するまでの秒数を入力。デフォルトは30秒、最低（minimum）は10秒。

・Verb to display：

Like「○○さんがいいね！と言っています」or Recommend「○○さんのおすすめです」のいずれかを選択

・Side：

right of leftを選択

・Domain：

リコメンデーションズバーを設置するドメイン名を入力

いいね！ボックス（Like Box）

https://developers.facebook.com/docs/reference/plugins/like-box/

Facebookページのいいね！ボタンと投稿のストリームを表示できるボックス。コーポレートサイトやキャンペーンページ、ランディングページなど多くのサイトでよく利用されている、大変使い勝手の良いプラグイン。

・Facebook Page URL：

いいね！先のFacebookページURLを入力

・Width：

ボックスの横幅を指定（デフォルトは300px）

・Height：

ボックスの高さを指定（友達のプロフィールアイコンとStreamを表示するか否かで変わってくる。Streamを表示し、友達のプロフィールアイコンが10個入った場合の高さは556px。いずれも表示しない場合の高さは63px）

・Color Scheme：

light or darkを選択

・Show Faces：

すでにいいね！している友達のプロフィールアイコンを表示するかどうか選択

・Border Color：

ボーダーの色を#FF0000など形式で入力

・Stream：

直近の投稿を表示するかどうか選択

・Header：

Facebookのヘッダー（Facebookもチェック）を表示するか選択

ログインボタン（Login Button）

https://developers.facebook.com/docs/reference/plugins/login/

ログインにFacebook IDを用いる場合に利用するもの。既にログインしている友達がいれば、その友達のプロフィールアイコンを表示することが可能。

・Show Faces：

すでにログインしている友達のプロフィールアイコンを表示するかどうか選択

・Width：

ボタンの横幅を指定（デフォルトは200px）

・Max Rows：

プロフィールアイコンを表示する行数を指定（デフォルトは1行）

レジストレーション（Registration）

https://developers.facebook.com/docs/plugins/registration/

Facebookアカウントの情報を利用して、ウェブサイトへのサインアップをさせることができるもの。ユーザがFacebookにログインしていれば、ユーザーの情報が登録用フォームにあらかじめ入力される。Facebook APIでは取得できない情報の入力にも対応が可能。このプラグインには、カスタマイズしたコードを自動生成する機能が備わっていないため、こちらのサイトからコードをコピーし、自身でカスタマイズした上で貼り付ける必要がある。

プロフィールアイコン表示（Facepile）

https://developers.facebook.com/docs/reference/plugins/facepile/

すでにページにいいね！といっている友達や、自社サイトに（Facebook IDで）サインアップしている友達のプロフィールアイコンを表示させることができるもの。

・URL：

対象となるページのURLを入力

・Action：

アクションタイプをコンマで区切って入力（like and/or recommend）

・Size：

表示サイズをmidium,small,largeから選択

・Num rows：

プロフィールアイコンを表示する行数を指定（デフォルトは1行）

・Width：

ボックスの横幅（デフォルトは300px）

・Color Scheme：

light or darkを選択

以上、今回はソーシャルプラグイン導入までに必要な基本ステップと、全部で11種類あるソーシャルプラグインを2回に分けてご紹介しました。あなたのサイトに導入できるイメージはわきましたか？また、既に導入している方も、現状を見直すきっかけにしていただければ幸いです。今回ご紹介した方法で「コード」を取得した後の実際の設置方法については、後日まとめてご紹介予定です。そちらもぜひ参考にしてください！

関連記事

【保存版】Facebookのソーシャルプラグイン！導入までの5つの基本ステップと全11種類をまとめてご紹介（1/2）

シェアはいいね！の8倍インプレッションが高い？！ 「ドメインインサイト」で自社サイトのソーシャルプラグインを解析

【保存版！】Facebookページの作り方まとめ　～初めてでも簡単！11の手順～