今回の記事では、プラグインなしでワードプレスサイトへのフェイスブックヴィジェットの埋め込み方法を紹介します。
- フェイスブックをサイドバー等に埋め込むことで、フェイスブックとの連携が高まるだけでなく、サイト自体が華やかにもなります
- フェイスブックヴィジェットの設置はプラグインなしでも簡単に設置可能です
WEBMAGAZINE「GOKUI」の運用を開始して約３か月が経過し、徐々にサイトの内容が充実してきましたので、この辺りでそろそろSNSとの連携を進めていこうと思います。
連携を考えているSNSは「Instagram（インスタグラム）」「Twitter（ツイッター）」「Facebook（フェイスブック）」の３つですが、前回と前々回で「Instagram （インスタグラム）」 と「Twitter（ツイッター）」 をサイドバーに埋め込んでみたので、今回は「Facebook（フェイスブック）」を埋め込んでみます。
Instagram （インスタグラム）は「Smash Balloon Social Photo Feed」というプラグインを使いましたが、 Facebook（フェイスブック）は Twitter（ツイッター） と同じくプラグインなしで設置が出来てしまいます。
では早速進めていきましょう。
１）まずは自分のFacebookサイトにログインしてURLをコピーしておきます
２）次にfacebook for developersのページ（https://developers.facebook.com/docs/plugins/page-plugin）に移動します。
３）中央にある入力枠に必要事項を入力し、「コードを取得」をクリックします。
①facebookページのURL
先ほどコピーしておいた自分のFacebookサイトのURLを貼り付けます。
②タブ
デフォルトのまま（timeline）でOKです。
③幅×高さ
好みの大きさに設定（ピクセル単位）します。
今回はサイドバーに設置するので、幅は300程度にしておきます。
幅と高さは設置した後でも変更可能です。
④スモールヘッダーを使用
Facebookヴィジェットを設置した際に、Facebookのヘッダー部分を余り強調したくない場合にチェックを入れます。
チェックを入れると、ヘッダー部分の表示が半分程度になります。
⑤カバー写真を非表示にする
Facebookヴィジェットを設置した際に、Facebookのカバー写真を表示したくない場合にチェックを入れるます。
チェックを入れると、ヘッダー部分が文字表示だけになります。
⑥ plugin containerの幅に合わせる
スマホで表示される場合に横幅を最適化してくれます。
ここはチェックを入れておくことをおすすめします。
⑦ 友達の顔を表示する
設置したFacebookヴィジェットにFacebookで繋がっている友達の顔写真を表示させたい場合にチェックを入れます。
４）するとコードが表示されます。
あとはSTEP1（赤枠の部分）とSTEP2（青枠の部分）をコピーしてワードプレスに貼り付けるだけです。
５）今回はサイドバーに設置したいので、ワードプレスの管理画面から外観＞ヴィジェットに進み、サイドバーヴィジェットにテキストで貼り付けました。
以上で設置完了です。
設置したサイトを開いて確認してみて下さい。