GNJYOブログ .

WordPressに、はてブ、Twitter、Evernote、Google+1、Facebook のボタンを付ける方法を紹介します。
WordPressにはプラグインも多く出ているのでプラグインを使う方法もありますが、自分としてはプラグインを使いたくないので手動で付けています。

はてブ

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" 
	class="hatena-bookmark-button" 
	data-hatena-bookmark-title="<?php the_title(); ?>" 
	data-hatena-bookmark-layout="simple" 
	title="このエントリーをはてなブックマークに追加">
	<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

リンクとタイトルをそれぞれ記事から取得するように変更します。

Twitter

<a href="http://twitter.com/share" 
	data-url="<?php the_permalink(); ?>" 
	data-text="<?php the_title(); ?>" 
	class="twitter-share-button" 
	data-count="none" 
	data-via="t_macki" 
	data-lang="ja">
Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

こんな感じにリンク先とタイトルを「data-url」と「data-text」を指定すると複数のボタンを設置しても対応する記事へのリンクになります。

Evernote

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({
		contentId:'main',
		title:'<?php the_title(); ?>',
		url:'<?php the_permalink(); ?>',
		providerName:'Beyond prep'}); return false;">
	<img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" />
</a>

Evernoteのクリップの場合でもタイトルとURLをパラメータとして指定すると対応するものに置き換わってくれます。

Google +1

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

<g:plusone count="false" size="medium" href="<?php the_permalink(); ?>">
</g:plusone>

Facebook

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>
	&amp;send=false
	&amp;layout=button_count
	&amp;width=450
	&amp;show_faces=false
	&amp;action=like
	&amp;colorscheme=light
	&amp;font
	&amp;height=21" scrolling="no" frameborder="0" 
	style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true">
</iframe>

Facebookも同じ感じです。ただ、「いいね」ボタンはOGPの設定等した方がよいとのことなのですが、自分がFacebookをほぼやってないのでもう少し理解したら紹介したいと想います。