ページプラグイン

ページプラグインがあれば、Facebookページをウェブサイトに簡単に埋め込んで宣伝することができます。サイトの訪問者はFacebookでの操作と同様にFacebookページにいいね!したりシェアしたりできます。訪問中のサイトを離れる必要はありません。

設定

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

設定 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


使われなくなった属性

  • 属性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" 
  data-show-posts="false"></div>

コールトゥアクション

ページにカスタムのコールトゥアクションボタンがある場合は、デフォルトのコールトゥアクションボタンである[シェア]ボタンの代わりに、そのボタンが表示されます。

プラグインの幅が280ピクセル未満の場合は、デザインのバランスを考慮してデフォルトの[シェア]ボタンが表示されます。

ページタブ: タイムライン、イベント、メッセージ

プラグインでタイムラインイベントメッセージのタブを使用できるようになりました。

  • [タイムライン]タブ: Facebookページのタイムラインにある、最新の投稿が表示されます。
  • [Events]タブ: プラグインからページのイベントをフォローしたり、イベントのフィードを購読したりできます。
  • [メッセージ]タブ: ウェブサイトから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>

[プラグインコンテナの幅に合わせる]の選択を解除すると、可変幅をオフにできます。その場合、親コンテナの幅に関係なく、プラグインは指定した幅で表示されます。

動的なサイズ変更なし

ページプラグインには、レスポンシブレイアウト、可変レイアウト、固定レイアウトを使用できます。親要素のwidthの設定にはメディアクエリやその他の方法を使用できますが、次の点にご注意ください。

  • プラグインのwidthページの読み込み時に決定されます。
  • ページの読み込み後は、ボックスモデルを変更してもプラグインのサイズは変更されません

ウィンドウのサイズ変更に合わせてプラグインのwidthを調整する場合は、プラグインを手動で再表示する必要があります。

友達のプロフィール写真の表示

Facebookページにいいね!した利用者の数だけではなく、その利用者のプロフィール写真を表示します。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_USru_RUに置き換えます。

js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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