facebookの「いいね!」ボタンの設置

Webサイト作成 TIPS

おおざっぱな流れですが、
1、「いいね」ボタンのコードの取得
2、 Open Graph Protocol(OGP)コードの設置
という風になります。1でいいねボタン自体の設定を行い、2でいいねボタンを押したときのサイトの情報を設定といった形です。


1、「いいね」ボタンのコードの取得

まずhttp://developers.facebook.com/docs/reference/plugins/like/のサイトで「いいね!」ボタンのコードの取得を行います。


URL to Like:ボタンを設置するページのURLを入力。
Send Button (XFBML Only):特定の相手に対してメッセージを送信することができるボタンです。
Layout Style:いいね!ボタンのスタイル
Width:いいね!ボタンの横幅。単位はピクセル(px)ですが数値のみ記入。
Show Faces:ONにするとFacebookにログインしている場合は、そのページを「いいね!」したフレンドのプロフィール画像が表示される。
Verb to display:ボタンの表示を「いいね!(like)」と「おすすめ(recommend)」から選択する。
Color Scheme:いいね!ボタンの背景。
font:フォントの選択。


これらの項目を入力してGet Codeのボタンを押し、でてきたwindowからHTML5、XFBML、IFRAMEから選び各指示にしたがいます。上記でsend butttonを選択するとIFRAMEを選択できないようです。


2、Open Graph Protocol(OGP)コードの設置

まずタグにxmlnsを追加します。


 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"
 dir="ltr" xmlns:og="http://ogp.me/ns#"  
 xmlns:fb="http://www.facebook.com/2008/fbml">

その次に~内にOGPタグを追加します。


 <meta property="og:title" content="記事のタイトル" />
 <meta property="og:type" content="article" />
 <meta property="og:description" content="記事の説明" />
 <meta property="og:url" content="記事のURL" />
 <meta property="og:image" content="画像のURL" />
 <meta property="og:site_name" content="サイトのタイトル" />
 <meta property="og:locale" content="言語" />
 <meta property="fb:app_id" content="facebookのアプリID" />

画像のサイズは、現在(2014年6月9日)
1200×630px
が推奨だそうです。

ちなみに、のOGPタグは、すぐには反映されません。
「あれー、書いたのに、いいねクリックしても反映されないな?」
という方は、しばらく待ってみてください。
Facebookのクローラーがやってきて、Facebookが情報を収集すると反映されるようになります。

 <meta property="fb:app_id" content="facebookのアプリID" />

ですが
http://developers.facebook.com/setup/
ブログ名とURLを記入して、アプリIDを取得してください。
アプリケーションIDはいいね!ボタンから得られる情報をクリックした人のニュースフィードに掲載するために必要な情報(facebookアカウント等)を関連付けます。


以上で終了なのですが
http://developers.facebook.com/tools/debugで設置後にURLを入れてデバッグを実行するとエラーがないか確認できます。
なにかしらの設定を行っていないと関連のエラーは出ますが、Object Propertiesを見てURLや、ページで記述したタイトルや説明文が取得できていれば問題はありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です