最近はどこのサイトでもソーシャルボタンをつけてますね。今まで私も上部にはTweetボタンのみ、下部には小さめのはてなブックマークボタン、twitterボタン、facebookボタンなどをつけていましたがつけていると特に[いいネ]や[tweet]をしていただけることが多くて、記事を書いてる方としてはやっぱり励みになります。
そこで、もう少しボタンを目立つものにしよう、と思ったのと、もともと使っていたTweet Memeは本文の右上にあって若干邪魔だったので、タイトル下にアドセンスのレクタングルを配置し、真横にボタンを縦位置にレイアウトすることにしました。色々やり方はあると思うのですが、最も簡単にできるのが「忍者おまとめボタン」です。
まず忍者おまとめボタンのアカウントを取得しログインすると、上記のページになります。
なぜか私のChromeではボタンがうまく表示できなくて、あれ？と思ったのですがAd Blockのせいでした。Ad Blockプラグインを一旦停止にするとちゃんと表示されます。
人気のボタンはセットになっていますが、自分でカスタマイズしたい場合は[設置ボタンを1つずつ選択して作成]をクリック。
使っているブログサービスを選択。私は[wordpress]を選びます。そうすると、それぞれのサービスでパーマリンクやタイトル用のタグが自動的に選ばれるのですごく便利。
ちなみにwordpressの場合、パーマリンクと各記事のタイトルを取得するには
と記述する必要がありますが、こういうのを考えなくてもいいのは楽ちんですね。
ボタン選択画面です。有名なソーシャルボタン（twitter、facebook、mixi、google+など）をはじめとして、メールボタンやはてなブックマーク、evernote、RSSボタン、instapaperや最近流行りはじめてるPocketボタンまで揃っています。
各ボタンをクリックすると、下のプレビューに表示され、ドラッグ＆ドロップで順番も変更可能。
[プレビュー＆コードを取得する]をクリックすると、上記のような画面になるので、ここでならび方を[たて]にすることができます。
こちらが縦位置。なぜか一番上のはてなブックマークボタンがうまく表示されてませんが、設置した記事には表示されるので大丈夫。
ここではコードが表示されなかったので、一旦[ホーム]に戻ります。
今まで作成したボタンが表示されるので、[コード]をクリックすると下に出てくるのでこれをコピー。
ちなみに一度作った後、順番を変更したりする場合は[編集]を押していじることで、自動的に記事に貼りつけたボタンが変更されるのは非常に便利です。
ここで取得したコードを、自分が使用しているthemeのsingle.phpを開き、任意の場所に貼り付ければ完成。
<div class="post-header-ads">
{アドセンスコード}
</div>
<div class="socialcount">
<!--ninja omatome-->
{忍者おまとめボタンコード}
<!---hatena-->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>
</div>
私の場合はこんな感じですね。なぜかはてなブックマークだけうまく表示されなかったので、スクリプトを貼りつけたら表示されるようになりました。
.post-header-ads{margin-top:5px;float:left;}
.socialcount{margin-top:5px;float:right;}
themeのCSSで、アドセンスを左に、ソーシャルボタンを右側にフロートしています。
自分で一つずつ設置した方がコードは綺麗だと思うのですが、あんまり知識がない私がやろうとしてもうまく出来なかったので、こういうサービスがあって本当に良かったｗ
