私たちについて

ホームページ作成後のFacebook【コムログクラウド風】：第三回

前回、発言（ポスト）の仕方をひと通りお伝えしたところで

まだまだあるFacebookのいろいろなツールを使ってみましょう。

その名も、Facebook ソーシャルプラグインです。

Facebookの友達などがどんなページをおすすめしているのか？

いいね！を押しているのかで、自分がどんなページに興味をもちそうかと

教えてくれたりします。

たくさんあるのですが、3つほど設定していきましょう。

１．Activity Feed

２．Recommendations

３．Like Box

ソーシャルプラグインの設定はこの画面から入ります。

https://developers.facebook.com/docs/plugins/

また、設置するコードには、

HTML5版、XFBML版、IFRAME版の3種類ありますが、

コムログクラウドでは、IFRAME版を利用します。

Activity Feed

https://developers.facebook.com/docs/plugins/activity/

Facebookにログインしている場合、友達がホームページで
「いいね！」や、シェア、コメントしたコンテンツが表示されます。
ログアウトしている場合はおすすめを表示します。
友達のいいね！などが少ない場合は、おすすめが表示されます。

App ID(app_id) 前回取得したアプリID
Actions to Show(data-action)
Domain(site) ホームページのドメインを入力
Width(width) 横幅
Height(height) 高さ
Maximum Age(max_age) 投稿からの経過日数 1-180日まで 0は制限なし
Color Scheme(colorscheme) 色味の設定
Show Header(header) ヘッダの表示非表示

なぜか、現在IFrameでコードが取得できませんので、

上のデータを参考に下記のコードを書き換えてみてください。

例

<iframe src="http://www.facebook.com/plugins/activity.php?site=www.i-hive.co.jp&width=300&height=300&header=true&colorscheme=light&max_age=0&data-action=likes,recommends" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:300px">
</iframe>

</iframe>

～

Recommendations

https://developers.facebook.com/docs/plugins/recommendations/

App ID(app_id) 前回取得したアプリID
Actions to Show(data-action)
Domain(site) ホームページのドメインを入力
Width(width) 横幅
Height(height) 高さ
Maximum Age(max_age) 投稿からの経過日数 1-180日まで 0は制限なし
Color Scheme(colorscheme) 色味の設定
Show Header(header) ヘッダの表示非表示

Facebookの友達の情報を元におすすめの記事を表示します。

ログインしてない場合は一般的なお勧め記事を表示します。

<iframe src="http://www.facebook.com/plugins/recommendations.php?site=www.i-hive.co.jp&width=300&height=300&header=true&colorscheme=light&max_age=0&data-action=likes,recommends" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:300px">
</iframe>

お気づきになったと思いますが、Activity Feedは、人が軸になって、

おすすめしてくれます。Recommendationsは、ページが軸になっておすすめしてくれます。

しかし、ログアウトすると、どちらも同じような表示になりますので、

2つ並べると、同じ情報になるので注意が必要ですね。

Like Box

https://developers.facebook.com/docs/plugins/like-box-for-pages/

これは、プロフィールのFacebookページ専用のものです。

このようなものをホームページに掲載します。

Facebook Page URL　 FacebookページのURL
Width　横幅
Height　高さ
Color Scheme　色み
Show Friends' Faces 　顔写真を出すか出さないか
Show Header　ヘッダを表示するかしないか
Show Posts 　投稿を表示するかしないか
Show Border　枠線をつけるか付けないか