ページプラグイン

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

FacebookページのURL
タブ
高さ

設定

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

設定 HTML5属性 説明 デフォルト

href

data-href

FacebookページのURL

なし

width

data-width

プラグインの幅(ピクセル数)。最小値は180、最大値は500です。

340

height

data-height

プラグインの高さ(ピクセル数)。最小値は70です。

500

tabs

data-tabs

表示するタブ(timelineeventsmessagesなど)。複数のタブを追加する場合は、コンマで区切って指定します(例: 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つのタブ

次のように、timelineeventsmessagesのいずれかのタブを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ファイルをご覧ください。使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細は、「ローカライズと翻訳」ページをご覧ください。