表題の通りですが、いつもググるのが面倒なのでいい加減メモ。
はてブ、facebook、LINE、twitter、google+のボタンたち。
わかると思うが、◆URL◆←にURL、◆ページタイトル◆←にページタイトルを挿入。
【html】[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/82×20.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>
[/html]
【css】[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;
}
[/css]
こう書くわけですね。
これで首尾よく横イチで表示されるはずです。