自分のページにソーシャルボタンを設置したい② 〜FacebookのいいねボタンとOGPの設定
前回の続きで，今回は，Facebookのいいねボタンを設置したい．
普通にやろうと思うと，これも簡単で，公式ページからコードを取得して，それを貼り付けるだけ．
ただ，それだけだと微妙なものが出来上がってしまう．
普通にやった結果，いいねボタンを押すと，こうなる．
これはひどい（笑）
タイトルとURLはちゃんと出来ているが，画像はなぜかはてブだし，下に説明文のようなものもない．
で，これをちゃんとするためには，OGP (Open Graph Protocol)の設定が必要だそうだ．
OGPとはなんぞやということは，他の素晴らしいサイト様にお任せするとして，一言で言うと，『OGPを設定すると友達のニュースフィードに「いいね！」が飛ぶ。』らしい．
というわけで，OGPの設定から，いいねボタンの設置まで．
OGPの設定
Developer登録
まず，このページからアプリIDを取得する必要がある．
Facebook Developers
で，過去にDeveloper登録をしている場合には，必要ないが，していない場合には，Developer登録をする必要がある．
上記のページにアクセスすると，こんなページで，「Register as a Developer」というボタンがあるので，クリック．
そして，特に考えることもなく，こんな感じで進めていく．
これで終わり．
アプリの作成
Developer登録が完了したら，「Register as a Developer」というボタンは無くなり，「新しいアプリを作成」というボタンが出来ているので，それをクリック．
で，アプリの名前とかネームスペースとかを入力する．
ネームスペースは好きなのを．
このとき，「続行」を選択したら，アカウントの認証をする必要があると言われる場合がある．
携帯電話から認証しようとしたけど，無理だった．
Facebookの自分のページのモバイル設定から設定したら出来た．
で，アカウントの認証とかの問題が解決したら，セキュリティチェックをする．
そしたら，アプリが作成され，設定ページに飛ばされる．
そのうち，Sandbox Modeを無効にして*1，「Facebookでログインするウェブサイト」を選択してURLを入力し，変更を保存する．
これで設定が完了．
ちなみに，ここで表示されてるApp IDをメモなりコピーなりしておくといいかもしれない．
それにしても，「変更が反映されるまでにseveral minutesかかる場合があります」ってのは面白いね．
いいねボタンの設置
コードの取得
まず，公式ページでコードを取得する．
いいねボタンのコードは1スクロールくらいした辺りのConfiguratorの章にある．
> Documentation - Facebook Developers
右側のプレビューを確認しながら，左側の設定をしていく．
設定が終われば，Get Code．
 |
さっき作成したアプリが選択されていることを確認して，2つともコピーする．*2
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
ここで確認すればいいと思う．
