ソーシャルボタンを横一列で奇麗に揃える

ソーシャルボタン（Twitter/Facebook/Google+）を横一列に揃えるメモ。

HTML

<?php print(“http://” . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?> でページのURLを取得していますので、Wordpressの一覧ページ（アーカイブや検索）で使う際にはパーマネントリンク（<?php the_permalink(); ?>）に変更する必要があります。
また「○○○○」の箇所はタイトル等をいれます。

<div id="header">
<div class="social_button">
	<!-- FaceBook Button --> 
	<div class="fb">
	<iframe src="http://www.facebook.com/plugins/like.php?href=<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
	</div>
	<!-- /FaceBook Button -->

	<!-- はてなブックマーク Button -->
	<div class="hb">
	<a href="http://b.hatena.ne.jp/entry/<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" class="hatena-bookmark-button" 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_wo_al.js" charset="utf-8" async="async"></script>
	</div>
	<!-- /はてなブックマーク Button -->
	
	<!-- Twitter -->
	<div class="tw">
	<?php /*
		【パラメータ一覧】
			<a href="https://twitter.com/share" class="twitter-share-button"
			data-url="共有されるURL"
			data-text="ツイート本文"
			data-via="ユーザー名"
			data-lang="言語"
			data-size="ボタンの大きさ"
			data-related="関連アカウント"
			data-count="ツイート数のカウントの有無"
			data-hashtags="ハッシュタグ">
			Scriptが読み込まれなかった場合に表示される文字</a>
	*/ ?>
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>"data-text="○○○○"  data-via="○○○○"  data-lang="ja" data-related="○○○○">ツイート</a>
	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	</div>
	<!-- /Twitter -->
</div><!-- /social_button --> 
</div><!-- /header --> 

CSSは

参考です。.social_buttonは#headerの中で配置場所を絶対指定していたので、position:absolute;やtop:30px;/left:590px;が入っていますが、必要に応じて削除してください。

/* -------------------------------------------------------------- 
header
-------------------------------------------------------------- */
#header {
	position:relative;
	width:1046px;
	height:225px;
	overflow:hidden;
	}
/* -------------------------------------------------------------- 
social_button
-------------------------------------------------------------- */
.social_button{
	position:absolute;
	top:30px;
	left:590px;
	width:428px;
	height:25px;
	}
	.social_button .tw{
		position:relative;
		width:105px;
		height:25px;
		float:right;
		white-space: nowrap;
		}
	.social_button .fb{
		position:relative;
		width:120px;;
		height:25px;
		float:right;
		white-space: nowrap;
		}
	.social_button .gg{
		position:relative;
		width:80px;;
		height:25px;
		float:right;
		white-space: nowrap;
		margin-top:-2px;
		}
	.social_button .hb{
		position:relative;
		width:70px;;
		height:25px;
		float:right;
		white-space: nowrap;
		margin-bottom:-2px;
		}
	.social_button .mx{
		position:relative;
		width:70px;;
		height:25px;
		float:right;
		white-space: nowrap;
		}
	.social_button .day{
		position:relative;
		width:140px;;
		height:25px;
		float:right;
		white-space: nowrap;
		text-align:right;
		}