最近海外で流行りの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にスクリプトを埋め込む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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 の直前に入れてあります。
1 2 3 4 5 6 7 8 9 | <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 が呼び出されるので、これにも埋め込みます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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を指定します。
非同期読み込みなので、先に記事が表示されて後からツイートボタン等が表示されます。表示が早くなるのはいいかなと。
でも、ツイートボタンのツイート数って、なんか合わないんですよね…まあ、これはツイッター本家の問題なので、仕方がないかと。
facebookのlikeボタンって、間違えて押したら、元に戻せないんですかね？自分で試しに押したら、元に戻せないし。自画自賛ってのが嫌だなぁ。
facebookのいいねを取り消す方法|OKGuide[OKガイド]
http://okguide.okwave.jp/guides/58515
に取り消し方法が書いてあったので、あわせて。当然「いいね」ボタンを押してきた私。