表題の通りですが、いつもググるのが面倒なのでいい加減メモ。
はてブ、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; }
こう書くわけですね。
これで首尾よく横イチで表示されるはずです。