Tweet、はてブ、Google+1ボタンを設置
ふと思い立って、Tweetボタン、はてブボタン、Google+1ボタンを設置しました。
それぞれ、下記のサイトを参考にしています。ありがとうございます。
ツイートするボタン（tweet）を設置しよう｜Webマスターのお仕事
はてなブックマークボタンをWordPress（ワードプレス）に｜WordPress FREAKS
Google +1 ボタンをWordPressに簡単に設置する方法｜Web活メモ帳
下記に、最終的な設定内容などを。
JAVASCRIPTの情報を、まとめてテーマのヘッダー（header.php）に追加します。
<!--Google+1ボタンのJAVASCRIPT-->
<script type="text/javascript"
src="http://apis.google.com/js/plusone.js">//
<![CDATA[{lang: 'ja'}// ]]>
</script>
<!--はてブボタンのJAVASCRIPT-->
<script charset="utf-8" type="text/javascript"
src="http://b.st-hatena.com/js/bookmark_button.js">
</script>
<!--TweetボタンのJAVASCRIPT-->
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js">
</script>
続いて、ボタンを表示するページに対して、タイトルと日付などのすぐ次の行に追記します。
<!--Tweetボタン--> <a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="sorakuma_now" data-lang="ja">ツイート</a> <!--はてブボタン--> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?> | <?php bloginfo( 'name' ); ?>" 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> <!--Google+1ボタン--> <g:plusone size="medium" href="<?php the_permalink() ?>"> </g:plusone>
single.php、index.php、search.php、archives.phpの各ファイルに追記し、WP Super Cacheのキャッシュを削除すれば設定は完了です。
ただ、ちょっと画面表示に時間がかかるようになってしまったのが気になります。もしかしたら削除するか、もっといい別の方法を考えるかもしれません。
ちなみに、今回コードを表示するにあたり、綺麗にコードを表示するプラグイン、SyntaxHighlighter Evolved を導入しています。HTMLのタグでくくるだけでコードを決まったルールで色分けしてくれるので、かなり見やすくなりました。
