Facebook Likeboxの設置方法が変更になりました。
詳しくはFacebook Page Pluginの設定方法をご覧ください。
Facebookのデベロッパーページから設定します
手順
- Facebookページを作る
- https://developers.facebook.com/docs/plugins/like-box-for-pagesここから設定
- サイトにコードを貼付ける
以上です。
簡単です。
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」（枠線を表示するか）
ヘッダーとはこの部分です。↓
以上が済みましたら、ウィジェットの下に表示される「Get Code」ボタンを押して、コードを取得します。そして、ホームページの任意の箇所に貼付ければ、完了です。
コードには複数の選択肢が表示されます。たとえば、「HTML5」「iframe」などです。
一番簡単に実装できるのが「iframe」なので、こちらを利用すればいいと思います。「iframe」は今後非推奨になる可能性もありますが、利用できるので問題はありません。
「番外編」レスポンシブウェブデザインに対応する方法
レスポンシブウェブデザインが普及したので、FacebookのLikeboxがはみ出して困る事ってあると思います。
注意：↓このコードを使ってもエラーになります。ご注意ください。
iframe版
↓width:100%;にする。overflow:hidden;の後です。
注意：↓このコードを使ってもエラーになります。ご注意ください。
