WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： マークアップ >Facebook

※この記事は2012年時点の情報なので、若干古くなっています。
2014年現在の情報はこちらからどうぞ。
「Facebookタイムライン埋め込み方法2014年版☆」

今回はfacebookのタイムラインをサイトに埋め込む方法をご紹介します。
最近は取り入れているサイトも結構あるんじゃないかと思います。
下の、こんなようなのです。

機能がたくさんあるfacebookですが、
説明が英語だったり仕様がコロコロ変わったりして、難しいですよね。。
タイムライン埋め込みも、いろいろなサイトで紹介されてはいますが、
所々ひっかかってしまうことが多いです。

なので、ちょっとまとめてみました。

アプリを作成する

まず、この方法を検索すると、タイムラインを埋め込むためのタグの作り方が見つかると思います。
https://developers.facebook.com/docs/reference/plugins/like-box/
↑のサイトで設定していけば、簡単に作れます★
と書いてあるのですが、、、

実は、これをやる前に、準備しておかなければいけないものがあるのです。
サイトとfacebookページをつなげるための「アプリ」です。

https://developers.facebook.com/apps/?action=create
facebookにログインした状態で↑のサイトへ行くと、新しいアプリ作成が始まります(’ω’)

ポップが出てきますが、入力するのは、一番上だけです。
「続行」を押すと、ものすごく分かりにくいセキュリティチェックがありますので、頑張って乗り越えてください。

次に、図のように必要事項を入力していきます（ほとんどすでに入っていますが）。

以上で、アプリ作成は完了です。
それほど難しい作業ではないのですが、私はこのやり方を見つけるのに苦労しました。。。

ここまでできたら、最初にご紹介したURLへ行きましょう。
https://developers.facebook.com/docs/reference/plugins/like-box/

タイムライン埋め込みのコードを作る

図のように、設定していきます。右にプレビューが出てくるので、
実際に触っていってデザインを決めていくといいと思います。

「Get Code」を押すと、コードをゲットできます。
（私はここで初めて「アプリ」が必要なことを知りました…。）

「このスクリプトは次のアプリのアプリIDを使用します」の右には、
先程作ったアプリの名前が出ていればOKです。
そして、上のコードをコピーし、サイトのソース中のタグのすぐ後に貼り付けます。
（貼っても何も表示されません。）
下のコードは、facebookページのタイムラインを表示させたい場所に貼り付けます。

以上で、タイムラインの埋め込み完了です！
なお、サイトをどこかのサーバーにアップしてからでないと、この機能は使えませんので、ご注意ください。

参考サイトは、以下です。
http://c-through.blogto.jp/archives/16107563.html
http://c-brains.jp/blog/wsg/11/08/17-094659.php

一度設定してしまえば、あとはfacebookを更新するだけでサイトにも情報が反映されて、とっても便利です。
ぜひ、お試し下さい。