簡単実装!サイトにFacebookタイムライン表示

2015年11月8日

おはようございます!!
10月も終わりで、朝はひえますねぇ〜。

今日は、サイトにFacebookの「いいね」・「シャア」・「タイムライン」等を表示する手順を書きます。

良くブログ・コーポレートサイトのSNS拡散用に使われてます。

↓完成系↓
facebook-timeline-img

表示じたいは、20分~もあればできちゃうと思います。
facebookにログインしてページを作成する方が、実際時間がかかった気がします。

スポンサーリンク

Facebokkでページ作成

2015年6月23日までは、Facebookの「Like Box」が使えましたが、
提供廃止となったため、別の方法で今回表示します。

Facebookへログイン

ログイン後にヘッダー右上の設定ボタンからページ作成をする。

facebook-page-make

ページのジャンルをビジネスやコミュニティー等を選択する。

ページ名を入れる。

簡単にページの紹介等を入れましょう。

ヘッダ画像やアイコン画像もビジュアルアップのため設定する。

ヘッダ画像は、横長なのでそれにマッチする画像があると良いかと思います。

Facebookタイムラインをサイトへ

Facebook開発者ページへ

Facebook Developers

My Appsを押して、Add a New Appを押下する。

facebook-developers-app-add

その後は、上図通りに利用するカテゴリ・サイト名等を登録します。

次に、開発者向けに「Page Plugin」というのがあるので、アクセスする。

Page Plugin

サイト貼り付けコード取得

page-plugin-facebook

先ほど作ったFacebookのページURL/サイト縦・横を入れると組み込み後のイメージが表示されます。

Facebookページのヘッダ画像設定、ツイートを表示設定、友達表示等もあるので、調整したいものにチェックします。

Get Code

Get Codeボタンを押すと2つのコードが表示されます。

copy-and-paste-facebook-timeline

先ほど作ったfacebookのAppIdを選択ください。

1. の上部コードをコピーして、bodyタグの中にコピペします。

2. の下部コードをコピーして、表示したい場所にコピペします。

※コード貼り付けするときに警告っぽいのが出た人は、おそらく「Setting」のContact Emailを設定して、「Status&Review」でYesに切り替えれば、警告表示も消えると思います。もしかしたら、消さなくてもいけるかも?!

ここまで、きたら一旦組み込んだページを見て確認。
必要に応じてcssでレイアウト調整ください。

まとめ

タイムライン表示でどれくらいサイトへの効果があるかは、わからないのですが、訪問された方のお友達が増えたらと思います。

twitterと違って、、、中々FaceBookはお友達ができないorz

どなたでも、もしよろしければ、お友達へ(切実)

どなたでも大歓迎です。