ブログの集客をアップするために、facebookページを開設した。
そのfacebookページのブログパーツを埋め込んでみたよ。
facebookページ
開設したfacebookページはこちら。
ブログの更新をしたら、こっちにも投稿。
更新情報の通知先として利用する予定。
ブログパーツのありか
パーツは、developer向けのfacebookサイト「https://developers.facebook.com/」にある。
画面上部のグローバルメニュー「ドキュメント」をクリック。
そして画面左「製品に関するドキュメント」セクションにある「ソーシャルプラグイン」を選択。
遷移先の左サイドメニューに「ページプラグイン」をクリック。
これで到着。
ブログパーツのコードを取得する
ページプラグイン画面を下に降りると、以下の設定エリアを見つけることができる。
「FacebookページのURL」だけ指定すれば、基本的にはOK。
パーツのカスタマイズしたいのであれば、以下の項目で設定が可能だ。
- タブ
表示するタブです(timeline、events、messagesなど)。複数のタブを追加する場合は、コンマで区切って指定します(例: timeline, events)。
デフォルトは「timeline」で、以下のようにfacebookページのタイムラインを表示することが出来る。
- 幅（デフォルト：340）
プラグインの幅です(ピクセル数)。最小値は180、最大値は500です。
- 高さ（デフォルト：500）
プラグインの高さです(ピクセル数)。最小値は70です。
- スモールヘッダーを使用
サイズの小さなヘッダーを使用します。
- カバー写真を非表示にする
ヘッダーのカバー写真を非表示にします。
- plugin containerの幅に合わせる
表示枠の幅に収まるようサイズを合わせます。
- 友達の顔を表示する
友達がいいね！している場合にプロフィール写真を表示します。
設定が完了したら「コード取得」ボタンを押す。
そうすると、以下のようにコードが表示される。
コードは2種類あって、上の方はブログの<body>タグ内に記述する。
パーツを複数設置したい場合でも、このコードは1つだけ置けばOK。
下の方は実際に表示したい箇所にそれぞれ貼り付ける。
あっしは記事下のみに表示することにしたので、コードを表示箇所にかためて置いている。
すると、こんな感じに表示される。（スマホの場合）
この記事が役にたったら、ぜひ「いいね！」してやってください。
facebookページの方もよろしくです。
