非同期スクリプトをWordPressに埋め込む

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…
http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/asynchronous-loading-of-major-social-buttons/

はてな数がアレなので、いまいち躊躇していたのですが、上記のスクリプトを本ブログに埋めてみました。

本当は、適当なプラグインを作って埋め込むとバージョンアップが楽なんですが…まぁ、直接埋め込みということで。埋め込まれているのが、「ツイッター」「はてな」「facebook」で、google+ が外れているのは、google+ を配置すると、何故か改行してしまうからなんですね。後で、並べられるようになったら追記します。

■footer.phpにスクリプトを埋め込む

<script type="text/javascript">
    (function (w, d) {
        //        w._gaq = [["_setAccount", "UA-XXXXXXXX-X"], ["_trackPageview"]];
        //        w.___gcfg = { lang: "ja" };
        var c, e = d.createDocumentFragment(), f = d.getElementsByTagName("script")[0],
    a = function (a, b) {
        if (!d.getElementById(b)) {
            c = d.createElement("script");
            c.src = a; c.id = b || null; c.async = true; e.appendChild(c);
        }
    };
        // a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js");
        a("https://apis.google.com/js/plusone.js");
        a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
        a("//platform.twitter.com/widgets.js");
        a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
        f.parentNode.insertBefore(e, f);
    })(this, document);
</script>

</body>
</html>

google analytics は使わないのでコメントアウトして（使う場合は、「UA-XXXXXXXX-X」のところを修正）、body の終了タグの直前に入れます。はてな等のタグを読み込んだ後にスクリプトを動作させるため、読み込み時の一番最後に埋め込む、という具合

■loop-single.php と loop-page.php に埋め込む

何処に埋め込んでもいいのですが、entry-content の直前に入れてあります。

					<div class="entry-meta">
						<?php twentyten_posted_on(); ?>
					</div><!-- .entry-meta -->

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moonmile" data-lang="en">tweet</a>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial" style="display:inline;top:-6px" ></div>

					<div class="entry-content">

facebook のいいねボタンは、そのまま使うと div タグで改行してしまうので、「style=”display:inline;top:-6px”」を指定してあります。top で位置をずらしてあるのは、はてなボタンとツイートボタンと同じ位置に合わせるためです。はてなとツイートボタンは iframe なんですが、facebook ボタンは div タグなのが違いかと。多分、テンプレートによって異なると思うので、この値は随時調節。

■loop.php に埋め込み

トップページを開いたときは、loop.php が呼び出されるので、これにも埋め込みます。

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->
</p>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="moonmile" data-lang="en" data-url="<?php the_permalink(); ?>"　data-text="<?php the_title(); ?>" >tweet</a>
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial" style="display:inline;top:-6px" ></div>
</p>
<p>
	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
	<?php else : ?>
			<div class="entry-content">
</p>
<p>

記事が複数表示されるので、<?php the_permalink(); ?> を入れて記事のURL(パーマリンク)を指定させます。これをしてしないと、表示されているURLが指定されてしまうのでURLを指定します。

非同期読み込みなので、先に記事が表示されて後からツイートボタン等が表示されます。表示が早くなるのはいいかなと。

でも、ツイートボタンのツイート数って、なんか合わないんですよね…まあ、これはツイッター本家の問題なので、仕方がないかと。