エラーがでてしまう方必見!Facebookのいいねボタンとシェアボタンの両方を設置する正しい方法

2012/07/19
代替案を公開しました。Facebookのシェアボタンが無効に!?とりあえずシェアボタンを復活させる方法
2012/07/18
シェアボタンの仕様変更?の影響で、下記の方法でもシェアボタンが表示されなくなったようです。

1年ほど前にFacebookのいいねボタンとシェアボタンは統合されました。それにより、いいねボタンを押した場合でも以前のシェアボタンを押したときと同じようにユーザーのウォールに情報が流れるようになりました。また、いいねボタンがシェアボタンと同様の機能を持ったことで、シェアボタンの配布も終了したようです。

しかし、気になる情報を発見。

いいねボタンよりシェアボタンのほうが拡散性が高いらしい。

管理しているサイトを、実際にFacebookのインサイトで確認してみると、確かにシェアのほうがクリック率が高いことが判明。早速上記の記事に従い、WordPressに下記のようなコードを設置。

設置コード(改良前)

<body>タグ直後

FacebookのJavascript SDKを非同期読み込み、シェアボタンのJSを読み込み。

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
	FB.init({
		appId	: 'xxxxxxxxxx', // App ID
		status	: true, // check login status
		cookie	: true, // enable cookies to allow the server to access the session
		xfbml	: true  // parse XFBML
	});
};
(function(d){
	var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/ja_JP/all.js";
	ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- ▼shareのjsを読み込み -->
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

ボタン表示部分

いいねボタンとシェアボタンを設置。

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-width="590" data-show-faces="true"></div>
<!-- ▼shareボタン -->
<a name="fb_share" type="box_count" share_url="<?php the_permalink(); ?> href="http://www.facebook.com/sharer.php?u=<?php echo urlencode( get_permalink() ); ?>&t=<?php echo urlencode( get_the_title() ); ?>">Share</a>

で、表示確認したところ…下記のようなエラーがでて、シェアボタンは表示されるものの、いいねボタンが表示されなくなりました…。

同じような方もいる模様。

エラーの内容から察するに、恐らくJavaScript SDK(all.js)が読み込まれた後にシェアボタンのJSが読み込まれないとエラーになるのではないかと。

設置コード(改良版)

シェアボタンのJSを非同期読み込みする関数を作り、all.jsが読み込まれた後に実行されるwindow.fbAsyncInit関数の中でその関数を実行する、という仕組みに変更(ちなみに、別に関数にせずにfbAsyncInitの中に直接書いてしまってもOKです。また、下記はjQueryを用いた場合です。)

<body>タグ直後

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
	FB.init({
		appId	: '156567454409752', // App ID
		status	: true, // check login status
		cookie	: true, // enable cookies to allow the server to access the session
		xfbml	: true  // parse XFBML
	});
	loadFacebookShare(); // シェアボタンのJSを読み込む関数
};
(function(d){
	var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/ja_JP/all.js";
	ref.parentNode.insertBefore(js, ref);
}(document));
function loadFacebookShare() {
	jQuery('<script />')
		.attr({
			'type' : 'text/javascript',
			'src' : 'http://static.ak.fbcdn.net/connect.php/js/FB.Share',
			'async' : true
		})
		.appendTo('div#fb-root');
}
</script>

これで無事表示されました。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく