sorakuma

そらくま。

Skip to: Content | Sidebar | Footer

Tweet、はてブ、Google+1ボタンを設置

2011-08-06 | WordPress | By: sorakuma


ふと思い立って、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のタグでくくるだけでコードを決まったルールで色分けしてくれるので、かなり見やすくなりました。

Related Posts:

Write a comment





*