FacebookのLikeboxの設置方法(iframe版)

FacebookのLikeBox設定

Facebook Likeboxの設置方法が変更になりました。

詳しくはFacebook Page Pluginの設定方法をご覧ください。

Facebookのデベロッパーページから設定します

手順

  1. Facebookページを作る
  2. https://developers.facebook.com/docs/plugins/like-box-for-pagesここから設定
  3. サイトにコードを貼付ける

以上です。
簡単です。

Likeboxページの入力項目

Likeboxページ設定項目

①FacebookページのURL

前提として、Facebookページを持っているとして解説を進めます。Facebookページをお持ちでない方は事前に作成してください。
なお、個人のFacebookページのLikeboxは基本的に作成する事ができません。(記事公開日時点)しかし、裏技がある様です。いつ廃止になるか解りませんので、説明は致しません。
FacebookページのトップページのURLを①に入力します。

②・③widthとheightを入力

説明するまでもないですが、②のwidth部分に表示したいLikeboxの幅をピクセルで(px)入力します。同じように③heightの部分も設定します。
さらに、③heightの箇所で下記の選択をします。

  • 「Show Frends’face」(友達の顔を表示するかどうか)
  • 「Show Posts」(投稿を表示するかどうか)

④Color Scheme(カラーの設定)

カラースキーマの設定に移ります。

  • 「Show Header」(ヘッダーを表示するかどうか)
  • 「Show Border」(枠線を表示するか)

ヘッダーとはこの部分です。↓
FBヘッダー表示部分

以上が済みましたら、ウィジェットの下に表示される「Get Code」ボタンを押して、コードを取得します。そして、ホームページの任意の箇所に貼付ければ、完了です。

コードには複数の選択肢が表示されます。たとえば、「HTML5」「iframe」などです。

一番簡単に実装できるのが「iframe」なので、こちらを利用すればいいと思います。「iframe」は今後非推奨になる可能性もありますが、利用できるので問題はありません。

「番外編」レスポンシブウェブデザインに対応する方法

レスポンシブウェブデザインが普及したので、FacebookのLikeboxがはみ出して困る事ってあると思います。

注意:↓このコードを使ってもエラーになります。ご注意ください。

iframe版

↓width:100%;にする。overflow:hidden;の後です。

注意:↓このコードを使ってもエラーになります。ご注意ください。