pjaxsns
備忘録です。

最近はやりのpJaxですが、とにかくグズグズな印象を受けます。
jsの組み方をうまくやらないと全然動かないということにもなりかねません。

今回はそんなpJaxでよくある「SNSボタンの再構築」のtipsです。

Facebookいいね!、Tweet、Google+

この3つだけです。
他は検証してないけどたぶん同じような感じ?だと思います。

まずボタンを設置します。

HTML


<ul>
	<li><div class="fb-like" data-layout="button_count"></div></li>
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="*****">Tweet</a></li>
	<li><div class="g-plusone" data-annotation="none" data-size="medium"></div></li>
</ul>

各項目にIDを振ります。が、Facebookだけwrapしている<li>にIDが振られてますね。FBのいいねボタンはIDを直接指定するのではなく、引数に指定したIDの子要素から見つけるという仕様になっているようです。詳しくは知らない。
今回は上記のように***BtnというIDをつけましたが、なんでもいいです。

そして次にJSですが、動的にHTMLを読み込んだあと、以下のように実行します。
動的に読み込んだ後なので、pjaxなら以下のようになりますね。

Javascript


$(document).on('pjax:complete', function() {
	FB.XFBML.parse(); //Facebook
	twttr.widgets.load(); //Twitter
	gapi.plusone.go(); //Google+
});

注意点としては、
Facebook ・・・ wrapする要素(親要素ならなんでもOK。ただし検索範囲が狭いほうが若干処理早い)にIDを振る。
Tweet ・・・ data-urlを指定。WordPressなら<?php the_permalink(); ?>、MovableTypeなら<$MTentryPermalink$>とかかな。
google+ ・・・ ボタンのサイズとかのオプションも明示的にjs側で指定すること。

てきとうにググって試した結果なので、情報の正確性は保障できかねます。

【追記】
あんなに頑張って検証したのに、実際3行でできることが判明。ソースを書き換えました。
はいまったく無駄なエントリーになりました。最近こういうことが多い。