ページプラグイン

ページプラグインを使って、Facebookの公開ページをウェブサイトに簡単に埋め込んで宣伝することができます。サイトの訪問者は、サイトを離れることなく、Facebookでの操作と同様にFacebookページに「いいね！」したりページをシェアしたりできます。ページプラグインは、国や年齢などで制限されないどのページにも使用できます。

FacebookページのURL

タブ

幅

高さ

スモールヘッダーを使用

plugin containerの幅に合わせる

カバー写真を非表示にする

友達の顔を表示する

コードを取得

設定

上記の設定の他にも、次の設定を変更できます。

設定	HTML5属性	説明	デフォルト
`href`	`data-href`	FacebookページのURL	なし
`width`	`data-width`	プラグインの幅(ピクセル数)。最小値は`180`、最大値は`500`です。	`340`
`height`	`data-height`	プラグインの高さ(ピクセル数)。最小値は`70`です。	`500`
`tabs`	`data-tabs`	表示するタブ(`timeline`、`events`、`messages`など)。複数のタブを追加する場合は、コンマで区切って指定します(例: `timeline, events`)。	`timeline`
`hide_cover`	`data-hide-cover`	ヘッダーのカバー写真を非表示にします。	`false`
`show_facepile`	`data-show-facepile`	友達が「いいね！」した場合にプロフィール写真を表示します。	`true`
`hide_cta`	`data-hide-cta`	カスタムのコールトゥアクションボタンを非表示にします(ボタンがある場合)。	`false`
`small_header`	`data-small-header`	サイズの小さなヘッダーを使用します。	`false`
`adapt_container_width`	`data-adapt-container-width`	表示枠の幅に収まるようサイズを合わせます。	`true`
`lazy`	`data-lazy`	`true` を指定すると、`loading="lazy"` iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。`true` または `false` (デフォルト)を指定できます。	`false`

使われなくなった属性

属性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ページにメッセージを直接送信できます。この機能を使用するには、ログインが必要です。

Facebookページのメッセージ機能の有効化

Facebookページのメッセージ機能をオンにするには、Facebookページの[Settings]に移動します。[Messages]行で、[ページにメッセージボタンを配置して、閲覧者からの非公開メッセージを受け付ける] (直接リンク:https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=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>

1つのタブ

次のように、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&amp;version=v2.5";

サポートされるロケールについては、FacebookロケールXMLファイルをご覧ください。使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細は、「ローカライズと翻訳」ページをご覧ください。