WordPressに『いいね』ボタンを設置 / Facebook基礎

『いいね』ボタンについて

前回のFacebookコメント欄の導入に引き続き、今回はFacebookの『いいね』ボタンの導入方法の紹介です。

『いいね』ボタンを設置する場合、『OGP(Open Graph Protocol)』の設定が重要になってきます。なぜなら『OGP』を設定しないで『いいね』ボタンをクリックすると、友人のニュースフィールドにその情報が表示されないからです。これではせっかく『いいね』ボタンをクリックされても他の人が見ることがないので広がりも少なくなってしまいます。
そこで友人のニュースフィールドにも『いいね』情報を表示させるために『OGP』の設定方法もこの記事の後半に載せています。こちらも確認してみてください。それではまずはアプリIDから取得していきます。

アプリIDを取得

『OGP』の設定時にアプリIDが必要になるので、『いいね』ボタンを設置する前に取得しておきます。

Step1

アプリIDを取得するためにCreate an Appページに移動します。
http://developers.facebook.com/setup/

『いいね』ボタンを設置したいサイト情報を登録します。

Step2

『Create app』ボタンをクリック後にセキュリティチェックが表示されます。セキュリティチェックの文字を入力して『送信』ボタンをクリックしてください。その後、下の画像のようなアプリIDが記されたページが表示されるのでこのIDをメモしておきます。

『いいね』ボタンの設置

Step1

『いいね』ボタン設置用のソースコードを取得するためにLike Buttonページへ移動します。
http://developers.facebook.com/docs/reference/plugins/like/

Like Buttonページでは下の画像のような入力欄が表示されているので、画像の解説を参考に各入力欄の項目を埋めます。

※1:ボタンを設置するURL
ボタンを設置するURLは記事ごとに変わるので、WordpressやMTでは記事ごとのリンクを取得するタグに最終的には変更します。今はトップページなどの仮のURLを入れます。

※2:Sendボタン設置の有無
Sendボタンは『いいね』ボタンのように友人全員に情報を送るのとは異なり、友人を限定してコンテンツ情報を送ることができるボタンです。

※3:ボタンデザインを選択
『いいね』ボタンのデザインは『standard ・ button_count ・ box_count 』の3タイプから選択します。

※4:『いいね』ボタンをクリックした友人の写真表示の有無
友人の写真が表示されるのは、デザインが『standard』の場合のみになります。

Step2

『Get code』ボタンをクリックすると、画面中央に『いいね』ボタン設置用のソースコードが表示されます。ソースコードはiframe版とXFBML版の2種類が表示されます。大きな違いはXFBML版はJavaScriptの動く環境でないと機能しないけれど、iframe版と比べて多くのオプションがあり高機能ということのようです。※HTML5版が新たに追加されて3種類になりました(2011年12月 現在)今回は、純粋に『いいね』ボタンを設置することが目的なのでiframe版で試したいと思います。今後、機会がありましたらXFBML版やHTML5版も試してみたいと思います。

上の画像のようにソースコードが表示されたら、iframeの方をコピーして『いいね』ボタンを表示させたい場所にペーストしてください。

Step3

ソースコードをペーストしたら、記事ごとにリンクを取得できるWordpress・MT用のタグにhref属性を変更します。

<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.html5-memo.com%2F&send=false&l・・・

上記はiframe用のソースを1部抜粋していますが、赤文字のボタン設置先のURLを変更します。

【Wordpressの場合】

<?php the_permalink(); ?>

【MTの場合】

<$mt:EntryPermalink$>

以上で、『いいね』ボタンの設置は完了です。続いて『OGP』の設定になります。

OGPの設定

『いいね』ボタンの設置が完了しましたら、ソースコードを発行した公式サイトに戻り、そのまま下にスクロールすると『Get Open Graph Tags』と書かれた項目が画面上に表示されます。

Step01

Type・Site name・Adminの設定だけを行い、その他の設定は後で行います。また、下の画像に各項目の概要を示しましたので参考にしてみてください。

最後に『Get Tags』ボタンを押してください。

Step02

『Get Tags』ボタンを押すと、画面中央にソースコードが表示されます。これをコピーしてheadタグ内にペーストしてください。

ペーストしたら、各タグの内容を整えます。

※1:ページや記事のタイトル
記事のタイトルを表示するWordpress・MT用のタグを入れます。
<meta property=”og:title” content=”タイトル表示するタグを記述” />

【Wordpressの場合】

<?php the_title(); ?>

【MTの場合】

<$mt:EntryTitle$>

※2:ページタイプを選択
今回ページタイプをblogに選択しましたが、その他にも複数のページタイプがあります。制作するサイトに合わせて選んでください。

※3:ページや記事のURL
ページや記事へのリンクを取得するWordpress・MT用のタグを入れます。
<meta property=”og:url” content=”記事へのリンクを取得するタグを記述” />

【Wordpressの場合】

<?php the_permalink(); ?>

【MTの場合】

<$mt:EntryPermalink$>

※4:ページ画像
『いいね』ボタンが押された場合にニュースフィールドに表示されるサムネイルを指定します。

※5:アプリID
一番最初に取得しておいたアプリIDを記入します。
※ページを管理するFacebookユーザIDでも大丈夫です
(”fb:admins” content=”ID” )

Step03

『OGP』のタグには、descriptionもあるのですが公式サイトでは生成してくれないので自分で付け足します。
<meta property=”og:description” content=”記事概要を表示するタグを記述“/>
※記事の抜粋を使用した場合です。これ以外でも記事ごとの概要を表示できるタグなら問題ありません。

【Wordpressの場合】

<?php the_excerpt() ; ?>

【MTの場合】

<$MTEntryExcerpt$>

※追加: localeプロパティ
新たにOGPを設定する際に『locale』プロパティを設定しないと警告が表示されてしまうようです。下記のソースも追記してください。(2011年12月 現在)
詳しくはこちらの記事載せています。
facebook いいねボタンの仕様変更?!OGPの設定についてまとめました( localeプロパティについて)

<meta property="og:locale" content="ja_JP" />

Step04

最後にhtml要素に下記2つのxmlns属性を追加します。

  • xmlns:og=”http://ogp.me/ns#”
  • xmlns:fb=”http://www.facebook.com/2008/fbml”

以上で『OGP』の設定は完了になります。いままでの設定をWordpressとMTでそれぞれ下記にまとめました。よろしければ参考にしてみてください。

【Wordpressの場合】

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
・
・
<title>記事タイトル</title>
・
・
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php the_excerpt(); ?>※カスタムフィールドなどでも大丈夫です。"/>
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:image" content="イメージ画像へのパス" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="fb:app_id" content="アプリID" />
<meta property="og:locale" content="ja_JP" />

【MTの場合】

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
・
・
<title>記事タイトル</title>
・
・
<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:description" content="<$MTEntryExcerpt$>※記事ごとの概要を表示するタグを使ってください。"/>
<meta property="og:type" content="blog" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="イメージ画像へのパス" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="fb:app_id" content="アプリID" />
<meta property="og:locale" content="ja_JP" />

URLリンターで確認

URLリンターは、OGPの設定などを確認することができるサービスです。実際に設定が合っているかをURLリンターを使って一度確認すると良いかもしれません。

Step1

URLリンターのページへ移動します。
http://developers.facebook.com/tools/lint

確認したい記事のURLを入力欄に入れて『Lint』ボタンをクリックします。

Step2

『Lint』ボタンをクリックすると、エラーが無い場合は下の画像のように各項目の情報を表示してくれます。(※もしエラーが有る場合はエラー箇所が表示されるので、それに従って修正してください。)

以上で、『いいね』ボタンと『OGP』の設定が完了です。これで『いいね』ボタンを誰かがクリックした場合に友人のニュースフィールドにも情報が表示されるようになりました。ただ、たまにニュースフィールドに反映されない場合がある気がします。これは現状仕方ないことなのでしょうか?もし詳しい方いましたら教えてくださいよろしくお願いします。

次回は、『+1』ボタンの設置方法を紹介する予定です。

参考サイト:

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事