各種SNSボタンを速攻で横イチに並べるソース

表題の通りですが、いつもググるのが面倒なのでいい加減メモ。
はてブ、facebook、LINE、twitter、google+のボタンたち。

わかると思うが、◆URL◆←にURL、◆ページタイトル◆←にページタイトルを挿入。

【html】

 
<div id="fb-root"></div>
<script>
	(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
</script>
<ul class="socialbuttonList">
	<li><a href="http://b.hatena.ne.jp/entry/◆URL◆" class="hatena-bookmark-button" data-hatena-bookmark-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://cdn-ak.b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
	<li><div class="fb-like" data-href="◆URL◆" data-send="false" data-layout="button_count" data-width="130" data-show-faces="false"></div></li>
	<li><a href="http://line.naver.jp/R/msg/text/?◆URL◆"><img src="http://media.line.me/img/button/ja/82x20.png" width="82" alt="LINEで送る" /></a></li>
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="◆URL◆" data-text="◆ページタイトル◆" data-lang="jp" data-count="horizontal">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
	<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><div class="g-plusone" data-size="medium" data-href="◆URL◆"></div></li>
</ul>

【css】

.socialbuttonList {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.socialbuttonList li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}
.socialbuttonList li div {
	display: inline;
}
.socialbuttonList:before,
.socialbuttonList:after {
	content: " ";
	display: table;
}
.socialbuttonList:after {
	clear: both;
}
.socialbuttonList {
	*zoom: 1;
}
.socialbuttonList iframe.twitter-share-button {
    width: 90px !important;
}
#twitter-widget-0 {
    width: 61px !important;
}

こう書くわけですね。
これで首尾よく横イチで表示されるはずです。