Ajax+pushStateでページ遷移したときにFacebookプラグインを更新する方法

jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法という記事を書きましたが、じつはAjaxでページを切り替えると、いろんな不都合が生じることが多いです。

とくに外部サービスのプラグインに多くて、ページを全部更新すれば正常なのに、Ajaxで更新したときだけエラーになることがよくあります。本当によくあります(^_^;)

原因としては、外部サービスのプラグインはだいたい、ページ読み込み後に独自のJavaScriptを実行するのですが、Ajaxでページの一部を変えてもプラグインが気づかないため、独自のJavaScriptが実行されずにエラーとなってしまいます。

ただ、気の利いたサービスならAjaxで読み込まれたときの対応方法が用意されています。例えば、Facebook。

ここSensebahnでも実装しているFacebookの「いいねボタン」をAjax対応にする方法をまとめてみました。

まずFacebookの Like Button Code をここで取得しておいてください。

example.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/facebook.js"></script>
<script type="text/javascript" src="/js/example.js"></script>

<!-- bodyの下に次のブロック要素を置いておく -->
<div id="fb-root"></div>

<!-- いいねボタンを表示させたいところに次のブロック要素を置いておく -->
<div class="fb-like" data-href="ページの絶対パス" data-send="true" data-width="450" data-show-faces="true"></div>

facebook.js

(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#xfbml=1&appId=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//Facebookの Like Button Code の<script>と</script>の間のコードをそのままコピペ。

example.js

var changePage = function(){
	facebook = function(){
		$(".fb-like").attr("data-href","新しいページの絶対パス");
		//いいねボタンのURLを変更
		try{
			FB.XFBML.parse();
		}catch(ex){}
		//いいねボタンを更新
	}
	after =　function(){
		history.pushState("","","新しいページの相対パス");
		//アドレスバー変更
		facebook();
		//facebookを実行
	}
	$("読み込んだ内容を格納する要素").load("http://読み込みたいページのURL " + "読み込みたい要素",after);
	//Ajaxで一部更新
}
$(document).on("click","a",changePage);
//すべてのa要素をclickしたときにchangePageを実行

これで、Ajaxで読み込んだ（さらにpushStateでアドレスバーを変更した）ページにも正常に「いいねボタン」が付きます。つまり、ページ遷移完了後に次のコードを実行すれば良いということです。

$(".fb-like").attr("data-href","新しいページの絶対パス");
try{
	FB.XFBML.parse();
}catch(ex){}

いかがでしょう。参考になれば幸いです！