2014/11/19
Facebookタイムライン埋め込み方法2014年版☆
【2015.05.12追記】
本記事で紹介している方法は、Facebookの仕様変更のため、2015年6月23日より使用できなくなり、代わりに「Page Plugin」を設置するよう勧告されています。
Page Pluginの設置方法につきましては、以下の記事を参照して下さい。
本サイトのFacebookのタイムライン埋め込み方法についてご紹介した記事が、思いのほかご好評頂いているようですね。
とてもありがたいことなのですが、実はその記事が書かれたのは2012年のちょうど今ごろ（11月）…。古いんです（汗）。
というわけで、今回はFacebookタイムライン埋め込み方法2014年版をお送りしたいと思います。
目次
2012年と変わった点について
ちなみに、前回の記事はこちらです。
Facebookのタイムラインをサイトへ表示（2012/11/12）
1.見た目が変わった
基本的なやり方は大きく変わってはいません。
まず、手持ちのFacebookページと、タイムラインを埋め込みたいサイトとを繋げるためのアプリを作り、専用のサイトで得たコードをソースに書き込む、という流れは前と同じです。その手の作業に慣れている方なら、前の記事をご覧いただいただけでもできそうな気がします。
ただ、画面の見た目が少し変わっています。
慣れない方にとって「このボタンを押すとこんな画面が出てくるので、ここを押したら完成！」という文章に沿って開いた画面が“こんな画面”ではなかった時というのは脅威ですよね（笑）なので、新しい画面を見ながら説明していきたいと思います。
2.より簡単な方法ができた
よくある、Facebookらしいタイムラインを埋め込むものだけでなく、1つの記事だけ表示させる、ということもできるようになりました。
それでは、順番にご紹介していきましょう。
新しい画面についての説明
まずは前回と同じように、アプリ作成画面へ行きましょう。
アプリ作成画面
ログインしていない場合はログインしてください。すると、こんな画面が表れます。
アプリを1つも作ったことがない方は少し画面が違うかもしれませんが、おそらく右上の黄緑のボタン「＋Add a New App」が出ていれば大丈夫です。このボタンをクリックしましょう。
あるいは、一番上のメニュー部分からでもいけます。「Apps」を押すと「Add a New App」と書かれた部分があるので、それをクリックします。
すると、こんな画面が出てきます。
英語なので分かりにくいですが、要は、タイムラインを埋め込みたいのはどんなサービスですか？というようなことを聞いています。Webサイトに埋め込みたいのであれば、一番右の「ウェブサイト」をクリックすればOKです。
そうしたら、「Quick Start for Website」というページになったと思います。中央に「Choose an existing app～」と書かれたバーがありますが、要は「すでに作成したアプリから編集したいものを選ぶか、新しく作りたいアプリの名前を入れてね」というようなことを言っています。今回は新しくアプリを作る想定なので、適当に名前を入力しましょう（適当、と言ってもあとで見て分かる名前にしましょうね）。
名前を入れると下にまた英語のボタンが出ますので、クリックしてください。
そうすると今度は小さい窓が開き、「このアプリはテストですか？（Is this a test version of another app？）」と聞いてきますので、「いいえ」で良いです。続いて、カテゴリを選択します。こちらは後で変えられるようなので、あまり深く考えず、それらしいものを選んでおきましょう。
いろいろ選んだら、「Setup the Facebook SDK for JavaScript」というものが出てきます。ここに書かれているコードは、タイムラインを埋め込みたいページの<body>タグのすぐ後に入れ込むものです。
その下の「Tell us about your website」というところに、タイムラインを埋め込みたいページのURLを書き込み、「次へ」ボタンを押します。
すると、「Test your Facebook Integration」と出て、またまたコードが出てきます。このコードは、タイムラインを埋め込みたい場所に書くものです。
さぁ、2つのコードを出力できましたら、それぞれを実際にページに書き込んでみましょう。そして、前にも書きましたがこのページをどこかのサーバーにアップしないと表示されませんので、アップしましょう。
「Like」ボタンと「Shere」ボタンが出ましたか？それなら成功です！とりあえず、今、Webページとfacebookアプリが繋がりました。なお、ボタンの英語を日本語にしたい場合は先ほど<body>タグのすぐ後に入れたコードの中の「en_US」を「ja_JP」に変えてください。「いいね！」と「シェア」に変わります。
タイムライン埋め込みコードを作成する
アプリ作成、お疲れ様でした。
少し面倒な作業だったと思いますが、次の作業はラクラクです。なぜなら、1つの画面で完結してしまうからです。
タイムライン埋め込みコードは、専用のページで生成されます。埋め込みコード作成ページへまいりましょう。
前回と多少レイアウトが変わってはいるものの、やることは同じです。これまた英語なので、上記を参考に入力していってください。
あとの手順は以前の記事と同じなので、割愛します。
過去記事はこちら
「タイムライン埋め込みのコードを作る」をご参照ください。
1つの記事だけサクッと載せたい！そんな時
タイムラインはリアルタイムに更新情報を載せていけますが、そうではなくて、とりあえず最新の投稿記事だけどこかに載せたい、という方へ。ブロガーの方なら使うことがあるかもしれませんね。
こちらはグッと簡単な方法があります。
Facebookの、埋め込みたい記事の右上の「く」を反時計回りにした記号をクリックすると「外部へ埋め込む」というのがあるので、クリックします。すると、開いた画面にコードが現れます。これをサイトへ貼り付けるだけです。簡単ですよね☆
先ほどご紹介したような設定や余分なコードは必要なく、本当にここで出てきたコードを1つ貼り付けるだけなので、この手の作業が苦手な方はとりあえず入門編と考えて使ってみると良いかも？
なお、横幅を自由に変えられるのですが、350px～750pxの範囲に限られていますので、ご注意ください。また、幅指定についてはFacebookの画面ではうまく動かないようなので、直接ソースを触ったほうが楽です。「data-width=”xxx”」この“xxx”にお好きな幅の数値を入れてみてください。
長くなりましたが
一時期より落ち着いてはきたものの、未だにFacebookは人気があり、タイムラインやいいね！ボタンを取り入れているサイトもたくさんあります。仕様変更が多くて大変ですが、ぜひまた皆さんも挑戦してみてくださいね！
【2015.05.12追記】
本記事で紹介している方法は、Facebookの仕様変更のため、2015年6月23日より使用できなくなり、代わりに「Page Plugin」を設置するよう勧告されています。
Page Pluginの設置方法につきましては、以下の記事を参照して下さい。
翔泳社
売り上げランキング: 10,155
コーディング業務のご依頼、ご相談の詳細についてはこちらから
最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。
| 次の記事へ | 前の記事へ |
WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
