Twitter(ツイッター)タイムラインをブログに表示させる方法」をご紹介しましたが
今回はFacebook投稿をブログに表示させる方法について紹介します

ブログとSNSをリンク→いいね!やフォロー数を増やすことでブログアクセスアップを狙いましょう!

Facebook Likeboxを使おう

自分で苦労してHTML・CSSを書く必要はありません!
Facebookが開発者向けに用意しているツール Likebox を使います。
FacebookLikebox:https://developers.facebook.com/docs/plugins/like-box-for-pages/

ありがたいです。非常にありがたいです。Facebookさまさまですね!

さっそく使ってみよう!

Likeboxにアクセスするとこのような画面が表示されます。
Facebook_likebox01

まずは・・・

■ Facebook Page URL : 表示させたいFacebookページのURL
■ Width,Height    : 縦・横幅
■ Color Scheme    : テーマカラー(Light/Dark)

を設定します。

Likebox内に何を出そうかな・・・?

とにかくシンプルに! 友達リストも入れたい! などなど出したい項目は人それぞれ。
Likeboxでは4項目について選択可能です。

Facebook_likebox02

1. Show Friends’ Faces
 友達リスト表示選択

2.Show Header
 「Facebookもチェック」表示選択

3.Show Posts
 投稿内容を表示選択

4.Show Border
 外枠表示について選択。

左画像の赤枠で囲った部分は表示/非表示を選択できます。


Facebookアイコン・タイトルや「Facebookソーシャルプラグイン」は必須表示のようです。

Likeboxをページに表示させる

[Get Code]ボタンをクリックするとこのような画面が表示されます。
Facebook_likebox03

【HTML5】 【XFBML】 【IFRAME】 【URL】のコードが選択できます。
選択後、コードをコピーして表示させたい部分に貼り付けるだけ!
[html]
<div class="facebook_likebox">
<iframe src="//www.facebook.com/plugins/likebox.php…【省略】…"></iframe>
</div>
[/html]

Facebook_likebox04

まちいろホームページではフッタに配置しています。
Show Friends’ Faces に表示チェック、それ以外はチェックを外しています。


カスタマイズ・・・?

Likeboxのスタイルを変更したい! もっとかわいく、もっとおしゃれに!
制作者なら絶対に思うこのフレーズ。
実際に「Likebox カスタマイズ」で検索するとかなりのページがヒットします。

残念なことに、Facebook側での仕様変更などが行われている様子。
今可能なことが仕様変更でNGになる・・・なんてことも今後考えられそうです。