WordPressにプラグイン使わずソーシャルボタン設置

今まではプラグインとしてWP Social Bookmarking Light(導入例)を使ってきましたが、そのままでは細かく設定できないので手動に切り替えました。

参考にさせていただいたのはこちらの記事です。
WordPressにプラグインを利用しないでソーシャルボタンを設置する方法(moonblack.net)

ただ、当ブログは3カラムですし、記事上部に設置したかったのでCSSとソースをいじってます。
テンプレートはwp.vicunaですので、参考にされる方はそれぞれに合わせた修正をしてください。

■ヘッダ(header.php)に以下を追加

<?php if ( is_single() ) : ?>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<?php endif; ?>

■単一記事(single.php)の設置したい場所に以下を追加

			<div class="textBody">
				<!-- ソーシャルボックス -->
				<ul id="social_box">
					<!-- はてなブックマーク -->
					<li><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="standard" 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></li>
					<!-- Twitter -->
					<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="[<?php bloginfo('name'); ?>] <?php the_title(); ?>" data-count="horizon">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
					<!-- Facebook -->
					<li><iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true"></iframe></li>
					<!-- Google+ -->
					<li><g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></li>
			</ul>
			<br class="clearit" />

■CSS(core.css)に以下を追加

/* ソーシャルボタン
---------------*/

#social_box{
    background:none;
    width:370px;
	margin-left:auto;
	margin-right:0;
	list-style:none;
}
 
#social_box li {
	float:left;
    padding:0px 5px;
    background:none;
}

.clearit {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}

これで表示されているはずです。
ちょっと悩んだのが右寄せなのですが、何故か右に隙間が空いて、float使ったりposition使ったりでも解決せず、結局単純にwidth幅を広く取りすぎていただけというオチでした。
エディタで手打ちしてるとこのへんが弱点ですね・・・

ちなみに、最初に紹介したプラグインもそれなりに設定できますし、何より国内のサービスはほとんど対応しているので、ソースごちゃごちゃさせたくないとか楽な方がいいという方はプラグイン使った方がいいかと思います。