201109-23
WordPressでFacebookのいいね！ボタンを不具合無く設置する際のポイント
Facebookのいいね！ボタンはすでに当たり前のように設置されているけど、これって登場からまだ1年半ちょっとだった（よね？）たぶん。
こないだ仕事で、とあるWordPressで構築したサイトにいいね！ボタンを設置した所、謎のバグに遭遇した。
紆余曲折の末、解決はしたんだけど、ちょっと気をつけておいたほうが良い点なども踏まえ、WordPress内でソースに書いて挿入する設置方法のまとめをしてみようと思った。
Facebook開発者アカウントを認証しよう
まず、Facebookはスパム対策のため、アカウントを認証する必要があります。
もちろん前提としてFacebookアカウントを持っていることが必要ですが、その上でこのページから携帯メールアドレスを確認しておきます。
余談ですが、Facebookって解り辛いんですよね。。個人的に日本語ライクじゃないというより、根本的な構造の問題もある気がしますけども。。
いいね！ボタンの設置方法
いいね！ボタンの設定
いいね！ボタンはFacebookコネクトのページからコードの発行ができます。
※クリックで拡大表示。
通常のサイトであれば上記画像のように順番に入れていけば良いのですが、WordPressなどのblogシステムの単体記事ごとにいいね！ボタンを設置したい場合、テーマファイル内のsingle.phpに記述する必要があります。
そうなるとスタティックなURLではなく、動的に変わる記事ごとのURLに対応したコードである必要があります。
ただ、それはこの時点では飛ばしてしまいましょう。正確なコードを出力するためにWordPressに適した形には後で修正します。
この段階ではURLの所に自サイトのURLを適当に入れて進みましょう。
コードの種類と取得
入力が済んで、「GET CODE」をクリックするとプラグインコードが出てきます。
■html5版
■xfbml版
■iframe版
3種類のコードが選択できます。
違いはというと、クリック時に同時にコメントを求めることが出来るのがhtml5版とxfbml版。iframe版はそれが利用できないみたいです。
いいね！と共にコメントを加える窓は、こんな風に出ます。
いいね！ボタン的には3種類の内どれでも良いのですが、html5の場合はhtml5版、コメントも同時に欲しい場合にはxfbml版、無難にいいね！のみの場合にはiframe版でしょうか。おそらく機能的に登場時からあってシンプルなのはiframe版でしょう。
ちなみに当サイトはいいね！ボタンhtml5版を入れてみたんだけど、若干重いみたい＾＾；
WordPressのコードに改める
ここまででコードは取得できましたが、WordPressのテーマに記述する際には、単体記事を動的に取得する必要があります。
パーマリンクを都度取得する必要がありますよね。
となると出番は<?php the_permalink(); ?>です。書き換えましょう。
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false" data-font="verdana"></div>
6行目のen_USの箇所はこのままだとLikeボタンになるので、日本語のいいね！にしたい場合はja_JPに変えてやると良いです。また、アプリIDはご自身のIDに変更してください。
<script type="text/javascript"><!--mce:1--></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="<?php the_permalink(); ?>" send="false" layout="button_count" width="110" show_faces="false" font="verdana"></fb:like>
html5と同様です。
そしてxfbml版の場合のみ、<html>タグを下記のように変更してください。
<html xmlns:fb="https://www.facebook.com/2008/fbml">
この独自な記述が嫌な人は、無難にiframe版を使いましょう。僕も普段組み込む時はほとんどiframe版です。
<iframe src="//www.facebook.com/plugins/like.php?app_id=xxxxxxxxxxxxxxx&href=<?php the_permalink(); ?>&send=false&layout=button_count&width=110&show_faces=false&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
iframe版は文字列が所々実体参照変換されているので気をつけて変更しましょう。
これら3種のうちどれかをいいね！ボタンを設置したい場所に記述します。
いいね！された時のFacebookで表示される情報の設定をしよう
OGP（Open Graph Protocol）を取得する
OGPとはなんだろう？これについては下記サイトに詳しく記載されてましたのでご参照ください。
これを設定しておくと、いいね！ボタンを押した際に予め設定したOGPの情報が掲載されるようにできます。
Facebookコネクトページの下にあるので、いいね！ボタンの設定をした流れでそのまま取得してしまいましょう。
WordPressで動的な個別記事に対応するようにコードを書き換えるので、アプリID以外、空の状態で良いです。
これらのコードはmetaなので、head内に記述します。
ちなみにこれで取得したコードは、それぞれFacebookのウォール投稿に対応してます。
いいね！ボタンを押すと自分のウォールにこんな風に投稿されるのです。
このFacebookのウォールに表示されるサムネイル画像ですが、これを「記事内にある最初の投稿画像を自動的に取得」出来るようにすると、非常に便利です。
特にお客様にWordPressの管理を提供する場合にはすごく便利です。
もし記事内に画像が無い場合には、予め代わりの画像を取得出来る様に分岐させておきます。（その場合はロゴマークなどを使用すると自然ですかね。）
それらを踏まえたWordPressでの記述は以下になります。
meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:type" content="blog">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="xxxxxxxxxxxxxxx">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if ( preg_match( $searchPattern, $str, $imgurl ) ) {
echo '<meta property="og:image" content="'.$imgurl[2].'">';
} else {
echo '<meta property="og:image" content="※記事内に投稿画像が無い場合に表示される画像の絶対パス※">';
};
?>
となります。
（※便宜IDや画像パスは変えてください。）
これらをWordPressテーマ内で使用すると、いいね！ボタンの設置は完了です。
バグることがあるので注意
さて、今回わざわざコード取得からOGPまでまとめたのは、冒頭で触れたように僕が「謎のバグ」に遭遇したからです。
この時、長時間原因追求した挙句に解ったことがあります。
Facebookクローラーが取得するもの
Facebookには実はクローラーがあります。
これはいいね！ボタンがクリックされた際に該当サイトにクロールしに来ます。
その際に、サイトからウォールに投稿する必要な情報を取得していくのですが、これが思わぬ落とし穴を招くことがあります。
- 取得時間
- サイトの種類
- サイト名
- ページの説明
- アプリID
- ページの画像
- ページのURL
これらはOGPを記述していれば問題ないのですが、OGPを記述してない場合には自動的に別の所から情報を引っ張ってくるみたいなのです。
画像なんかは酷く、自動的に選ぶ（たぶんページの最初に来るimgタグ？）ので、間違った情報をウォールに提供しかねないのです。
でももっと気をつけないといけないのは、「ページのURL」。
FacebookクローラーはページURLは
<link rel=’canonical’ href=’http://www.xxxxxxxxxx’ />
を見ているようなのです。
WordPressの場合、ver2.9x以降の投稿記事・固定ページにcanonicalが自動的に出力されるようになりました。
しかし、WordPressのver2.8x以前ではそのままでは出力されないのです。
こないだ僕がWordPress案件でハマったのは、サーバが少々古く、MySQLの関係からWordPressが2.8xじゃないと使えなかったので、
OGPも利用しておらず、canonicalのことに気付きませんでした。
（ver2.8xは2009年8月位のバージョン。まだ、いいね！ボタン、無かったんじゃない？）
そしてサーバのレスポンスの遅さも相まったのか、Facebookクローラーが情報の取得が正常にできなくて、どの記事のいいね！ボタンを押しても、
URLが「WordPressをインストールしたディレクトリ」で取得されるようになっていて、
結果、blog自体のいいね！カウントが延々とされていたというバグに遭遇しました。
（※パーマリンクのカスタム構造でURLを変えてたことも影響してる気がしなくもない）
これだけならまだしも、一度いいね！が押されてクローラーに取得された場合、ソースを変更してもすぐには反映されず、クローラーのキャッシュに最初に取得した間違った情報が残ってるという状態にもなってました。
この2重の落とし穴により、原因追求に時間がかかったというわけです。
そしてそれを全て解決したのがOGPでした。OGPを設定してキャッシュをクリア。これで解決。
キャッシュが残ってる場合は、もう一度改めてクローラーに来させればキャッシュクリア出来るので、URLリンターを利用します。
このページより、URLを入力してデバッグをクリックすると、クローラーがチェック＆キャッシュクリアしてくれます。
もちろんデバッガなので、注意事項が出てきますし、ここでページの情報が正確に取得されるかどうかを確認できます。
OGPを記述しているとその情報が最優先されます。
Facebookクローラーは、OGPを記述していない場合はcanonicalを探しに行く。
canonicalが無ければ単にURLを取得しようとするが、動的生成の場合上手く取得出来ない場合がある。
なのでOGPは是非とも指定しておきたいのです。
OGPは正確な情報をウォールに提供するだけでなく、OGPという性質上、これからのSNS全般が利用出来るものなので、Google+でも同様な取得をします。
これは今後、もっと重要で必須なタグになっていくでしょうね。
いやはや、地味ながら今回学んだことは大きいです。
ハマってました。助かりました！！
田中
2012-01-11 / 10:23 AM