読者です 読者をやめる 読者になる 読者になる

[[ともっくす alloc] init]

ともっくすの雑多な日記と技術的なメモ

自分のページにソーシャルボタンを設置したい② 〜FacebookのいいねボタンとOGPの設定

前回の続きで,今回は,Facebookのいいねボタンを設置したい.

普通にやろうと思うと,これも簡単で,公式ページからコードを取得して,それを貼り付けるだけ.

ただ,それだけだと微妙なものが出来上がってしまう.

普通にやった結果,いいねボタンを押すと,こうなる.
f:id:o_tomox:20130730170542p:plain

これはひどい(笑)

タイトルとURLはちゃんと出来ているが,画像はなぜかはてブだし,下に説明文のようなものもない.

で,これをちゃんとするためには,OGP (Open Graph Protocol)の設定が必要だそうだ.

OGPとはなんぞやということは,他の素晴らしいサイト様にお任せするとして,一言で言うと,『OGPを設定すると友達のニュースフィードに「いいね!」が飛ぶ。』らしい.

というわけで,OGPの設定から,いいねボタンの設置まで.

OGPの設定

Developer登録

まず,このページからアプリIDを取得する必要がある.
Facebook Developers

で,過去にDeveloper登録をしている場合には,必要ないが,していない場合には,Developer登録をする必要がある.

上記のページにアクセスすると,こんなページで,「Register as a Developer」というボタンがあるので,クリック.
f:id:o_tomox:20130730171451p:plain

そして,特に考えることもなく,こんな感じで進めていく.
f:id:o_tomox:20130730171645p:plain
f:id:o_tomox:20130730171653p:plain
f:id:o_tomox:20130730171701p:plain

これで終わり.

アプリの作成

Developer登録が完了したら,「Register as a Developer」というボタンは無くなり,「新しいアプリを作成」というボタンが出来ているので,それをクリック.
f:id:o_tomox:20130730171758p:plain

で,アプリの名前とかネームスペースとかを入力する.
ネームスペースは好きなのを.
f:id:o_tomox:20130730171908p:plain

このとき,「続行」を選択したら,アカウントの認証をする必要があると言われる場合がある.
f:id:o_tomox:20130730172021p:plain
携帯電話から認証しようとしたけど,無理だった.
Facebookの自分のページのモバイル設定から設定したら出来た.

で,アカウントの認証とかの問題が解決したら,セキュリティチェックをする.
f:id:o_tomox:20130730172443p:plain

そしたら,アプリが作成され,設定ページに飛ばされる.
そのうち,Sandbox Modeを無効にして*1,「Facebookでログインするウェブサイト」を選択してURLを入力し,変更を保存する.
f:id:o_tomox:20130730172916p:plain

これで設定が完了.
ちなみに,ここで表示されてるApp IDをメモなりコピーなりしておくといいかもしれない.
f:id:o_tomox:20130730173039p:plain

それにしても,「変更が反映されるまでにseveral minutesかかる場合があります」ってのは面白いね.

いいねボタンの設置

コードの取得

まず,公式ページでコードを取得する.
いいねボタンのコードは1スクロールくらいした辺りのConfiguratorの章にある.
> Documentation - Facebook Developers

右側のプレビューを確認しながら,左側の設定をしていく.
設定が終われば,Get Code.

さっき作成したアプリが選択されていることを確認して,2つともコピーする.*2
f:id:o_tomox:20130730173543p:plain

HTMLに貼り付け

1つ目のコードはbodyタグの開始直後に貼り付けるのがいいらしい.

<body>
  <div id="fb-root"></div>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      (略)
    }(document, 'script', 'facebook-jssdk'));
  </script>
  (略)
</body>

2つ目のコードはいいねボタンを表示したい場所に記述する.

これでOK.

OGPの設定

HTML5でウェブサイトの場合,head要素を以下のように記述する.

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

ブログ記事の場合は,こう.

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">


そして,titleタグの下辺りに,metaタグで以下を記述する.

<meta property="og:title" content="<ウェブサイトのタイトル>" />
<meta property="og:type" content="<ウェブサイトのタイプ>" />
<meta property="og:url" content="<ウェブサイトのURL>" />
<meta property="og:image" content="<ウェブサイトの画像>" />
<meta property="og:description" content="<ウェブサイトの説明文>" />
<meta property="fb:app_id" content="<さっき作成したアプリのApp ID>" />

ウェブサイトのタイプは,ブログ記事ページとかならarticle,普通のウェブサイトならwebsiteを設定する.
画像は相対パスではなく,httpで始まる画像のURLに設定する必要がある.

ちゃんと設定されているか確認するために,デバッグサイトが用意されている.
> Facebook

ここで確認すればいいと思う.

完成したのを確認してみる

これで,全ての設定は完了.

いいねボタンを押してみると,最初は殺風景で,はてブの画像が使われていた微妙な感じだったものが,しっかりと出来ていることがわかる.*3
f:id:o_tomox:20130730175119p:plain


*1:ここを有効にしてたら,コードを取得するときに,「Sandbox Modeが有効になってるけど,いいの?」みたいな文章が出たから,無効にしてます.

*2:まあ,2回連続でコピーしても,普通は1回目の情報が失われるけど.

*3:普段はローカルでページのデザインとか見た目を確認するのだが,いいねボタンはローカルだと表示されないようで,当初はかなり困惑した.本番環境にアップロードしたら,ちゃんと表示できたが,こういう注意的なことがどのサイトにも載ってなくて一人悩んでた.はてブのときもこんな感じだったな.