非同期スクリプトを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=&quot;text/javascript&quot;>
    (function (w, d) {
        //        w._gaq = [[&quot;_setAccount&quot;, &quot;UA-XXXXXXXX-X&quot;], [&quot;_trackPageview&quot;]];
        //        w.___gcfg = { lang: &quot;ja&quot; };
        var c, e = d.createDocumentFragment(), f = d.getElementsByTagName(&quot;script&quot;)[0],
    a = function (a, b) {
        if (!d.getElementById(b)) {
            c = d.createElement(&quot;script&quot;);
            c.src = a; c.id = b || null; c.async = true; e.appendChild(c);
        }
    };
        // a((&quot;https:&quot; == location.protocol ? &quot;//ssl&quot; : &quot;//www&quot;) + &quot;.google-analytics.com/ga.js&quot;);
        a(&quot;https://apis.google.com/js/plusone.js&quot;);
        a(&quot;//b.st-hatena.com/js/bookmark_button_wo_al.js&quot;);
        a(&quot;//platform.twitter.com/widgets.js&quot;);
        a(&quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&quot;, &quot;facebook-jssdk&quot;);
        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=&quot;entry-meta&quot;>
						<?php twentyten_posted_on(); ?>
					</div><!-- .entry-meta -->

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

					<div class=&quot;entry-content&quot;>

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

■loop.php に埋め込み

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

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

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

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

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