ページプラグインを使って、Facebookの公開ページをウェブサイトに簡単に埋め込んで宣伝することができます。サイトの訪問者は、サイトを離れることなく、Facebookでの操作と同様にFacebookページに「いいね!」したりページをシェアしたりできます。ページプラグインは、国や年齢などで制限されないどのページにも使用できます。
関連トピック:ソーシャルプラグインのよくある質問 | その他のソーシャルプラグイン
上記の設定の他にも、次の設定を変更できます。
| 設定 | HTML5属性 | 説明 | デフォルト |
|---|---|---|---|
|
| FacebookページのURL | なし |
|
| プラグインの幅(ピクセル数)。最小値は |
|
|
| プラグインの高さ(ピクセル数)。最小値は |
|
|
| 表示するタブ( |
|
|
| ヘッダーのカバー写真を非表示にします。 |
|
|
| 友達が「いいね!」した場合にプロフィール写真を表示します。 |
|
|
| カスタムのコールトゥアクションボタンを非表示にします(ボタンがある場合)。 |
|
|
| サイズの小さなヘッダーを使用します。 |
|
|
| 表示枠の幅に収まるようサイズを合わせます。 |
|
|
|
|
|
data-show-postsは使用されなくなりました。属性tabs/data-tabsを使用してください。Facebookページのタイムラインから投稿を表示するには、値timelineを使用します。ページプラグインの標準構成には、ヘッダーとカバー写真のみが含まれます。これは、サイドバーの上部など、小さなスペースでFacebookページを紹介する際に最適なサイズです。
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="380" data-hide-cover="false" data-show-facepile="false"></div>
ページにカスタムのコールトゥアクションボタンがある場合は、デフォルトのコールトゥアクションボタンである[シェア]ボタンの代わりに、そのボタンが表示されます。
プラグインの幅が280ピクセル未満の場合は、デザインのバランスを考慮してデフォルトの[シェア]ボタンが表示されます。
プラグインで[タイムライン]、[イベント]、[メッセージ]のタブを使用できるようになりました。
Facebookページのメッセージ機能をオンにするには、Facebookページの[Settings]に移動します。[Messages]行で、[ページにメッセージボタンを配置して、閲覧者からの非公開メッセージを受け付ける] (直接リンク:https://www.facebook.com/{your-page-name}/settings/?tab=settings§ion=messages&view)をオンにします。
複数のタブを追加するには、次のように、data-tabs属性内にコンマで区切って指定します。
<div class="fb-page" data-tabs="timeline,events,messages" data-href="https://www.facebook.com/YoloBookStore" data-width="380" data-hide-cover="false"></div>
次のように、timeline、events、messagesのいずれかのタブを1つだけ追加することもできます。
<div class="fb-page" data-tabs="events" data-href="https://www.facebook.com/YoloBookStore" data-width="380"></div>
デフォルトでは、ページの読み込み時に、親コンテナーのwidth(最小180px/最大500px)に合わせてプラグインの幅が設定されます。これは、レイアウトを変更する場合に便利です。
<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>親エレメントのwidthがページプラグインのwidthよりも大きい場合は、data-widthで定義した値が保持されます。
<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>プラグインの幅の最小値は180pxです。
<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>[plugin containerの幅に合わせる]の選択を解除すると、可変幅をオフにできます。その場合、親コンテナーの幅に関係なく、プラグインは指定した幅で表示されます。
ページプラグインには、レスポンシブレイアウト、可変レイアウト、固定レイアウトを使用できます。親エレメントのwidthの設定にはメディアクエリやその他の方法を使用できますが、次の点に注意してください。
widthはページの読み込み時に決定されます。ウィンドウのサイズ変更に合わせてプラグインのwidthを調整する場合は、プラグインを手動で再表示する必要があります。
Facebookページに「いいね!」した利用者の数だけではなく、その利用者のプロフィール写真を表示します。Facebookページの訪問者には、そのページに「いいね!」した友達の数だけでなく、友達のプロフィールも表示されます。
このオプションを有効にするには、設定ツールで[Show Friend's Faces]を選択します。
<div class="fb-page" data-href="https://www.facebook.com/imdb" data-width="340" data-hide-cover="false" data-show-facepile="true"></div>
プライバシー制限されたFacebookページを埋め込むことはできません。
Facebook JavaScript SDKのローカライズバージョンを読み込むことで、ページプラグインの言語を変更できます。SDKを読み込むときに、適切なロケールが使用されるようにjs.srcの値を変更します。en_USをロケール(例えば、ロシア語(ロシア)の場合はru_RU)に置き換えます。
js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.5";
サポートされるロケールについては、FacebookロケールXMLファイルをご覧ください。使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細は、「ローカライズと翻訳」ページをご覧ください。