簡単実装！サイトにFacebookタイムライン表示
おはようございます！！
10月も終わりで、朝はひえますねぇ〜。
今日は、サイトにFacebookの「いいね」・「シャア」・「タイムライン」等を表示する手順を書きます。
良くブログ・コーポレートサイトのSNS拡散用に使われてます。
↓完成系↓
表示じたいは、20分~もあればできちゃうと思います。
facebookにログインしてページを作成する方が、実際時間がかかった気がします。
スポンサーリンク
Facebokkでページ作成
2015年6月23日までは、Facebookの「Like Box」が使えましたが、
提供廃止となったため、別の方法で今回表示します。
Facebookへログイン
ログイン後にヘッダー右上の設定ボタンからページ作成をする。
ページのジャンルをビジネスやコミュニティー等を選択する。
ページ名を入れる。
簡単にページの紹介等を入れましょう。
ヘッダ画像やアイコン画像もビジュアルアップのため設定する。
ヘッダ画像は、横長なのでそれにマッチする画像があると良いかと思います。
Facebookタイムラインをサイトへ
Facebook開発者ページへ
My Appsを押して、Add a New Appを押下する。
その後は、上図通りに利用するカテゴリ・サイト名等を登録します。
次に、開発者向けに「Page Plugin」というのがあるので、アクセスする。
サイト貼り付けコード取得
先ほど作ったFacebookのページURL/サイト縦・横を入れると組み込み後のイメージが表示されます。
Facebookページのヘッダ画像設定、ツイートを表示設定、友達表示等もあるので、調整したいものにチェックします。
Get Code
Get Codeボタンを押すと２つのコードが表示されます。
先ほど作ったfacebookのAppIdを選択ください。
1. の上部コードをコピーして、bodyタグの中にコピペします。
2. の下部コードをコピーして、表示したい場所にコピペします。
※コード貼り付けするときに警告っぽいのが出た人は、おそらく「Setting」のContact Emailを設定して、「Status&Review」でYesに切り替えれば、警告表示も消えると思います。もしかしたら、消さなくてもいけるかも？！
ここまで、きたら一旦組み込んだページを見て確認。
必要に応じてcssでレイアウト調整ください。
まとめ
タイムライン表示でどれくらいサイトへの効果があるかは、わからないのですが、訪問された方のお友達が増えたらと思います。
twitterと違って、、、中々FaceBookはお友達ができないorz
どなたでも、もしよろしければ、お友達へ(切実)
どなたでも大歓迎です。