(function (w, d) { var j, s = d.getElementsByTagName('script')[0], a = function (u, i) { if (!d.getElementById(i)) { j = d.createElement('script'); j.src = u; if (i) { j.id = i; } s.parentNode.insertBefore(j, s); } }; //Hatena Bookmark a('//b.st-hatena.com/js/bookmark_button.js', 'hatebu-js'); //Twitter a('//platform.twitter.com/widgets.js', 'twitter-wjs'); // Google+ w.___gcfg = { lang: 'ja' }; a('//apis.google.com/js/plusone.js', 'plusone-js'); // Facebook a('//connect.facebook.net/ja_JP/all.js#xfbml=1', 'facebook-jssdk'); // Tumblr a('//platform.tumblr.com/v1/share.js', 'tumblr-share-js'); // Pocket a('//widgets.getpocket.com/v1/j/btn.js?v=1', 'pocket-btn-js'); })(this, document);
<div class="sharing"> <ul> <li class="hatena"> <a href="http://b.hatena.ne.jp/entry/http://rcmdnk.github.io" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加"/></a> </li> <li class="twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://rcmdnk.github.io" data-via="rcmdnk" data-counturl="http://rcmdnk.github.io">Tweet</a> </li> <li class="googleplus"> <div class="g-plusone" data-size="medium" data-href="http://rcmdnk.github.io"></div> </li> <li class="facebook"> <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false" data-font="verdana" data-href="http://rcmdnk.github.io"></div> </li> <li class="facebook_share"> <div class="fb-share-button" data-type="button_count" data-font="verdana" data-href="http://rcmdnk.github.io"></div> </li> <li class="tumblr"><a href="http://www.tumblr.com/share/link?url=http%3A%2F%2Frcmdnk.github.io%2F" title="Share on Tumblr" class="tumblr_button" style="">Tumblr</a> </li> <li class="pocket"> <a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="http://rcmdnk.github.io" data-pocket-count="horizontal" data-pocket-align="left">Pockett</a> </li> <li class="bookmark"> <input class="link_btn add_bookmark" type="button" value="Favorite" data-page_title="rcmdnk's blog" data-page_url="http://rcmdnk.github.io" /> </li> </ul> </div>
.sharing { *zoom: 1; margin-bottom: 20px; } .sharing:after { content:""; display: table; clear: both; } .sharing ul li { display: block; float: left; margin-right: 5px; } li.hatebu { width: 60px; } li.twitter { width: 80px; } li.googleplus { width: 65px; } li.facebook { width: 100px; } li.facebook_share { width: 100px; //margin-top: -5px; // need sometime? } #fb-root { display: none; } li.tumblr { width: 60px; } .sharing a.tumblr_button { display: inline-block; text-indent: -9999px; overflow: hidden; height:20px; //background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent; withd: 81px; //background:url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent; width: 61px; background:url('http://platform.tumblr.com/v1/share_2T.png') top left no-repeat transparent; width: 61px; } li.pocket { width: 90px; } li.bookmark { width: 100px; margin-top: -2px; } .link_btn { background-color: #f2f2f2; padding: 2px 5px 0px; position: relative; text-decoration: none; border: solid 2px #cccccc; border-radius: 10px; } .link_btn:active { padding: 3px 5px 1px; top: 1px; } .link_btn::before { background-color: #f2f2f2; content:""; display: block; position: absolute; width: 100%; height: 100%; padding: 1px; left: -1px; top: -1px; z-index: -1; border-radius: 10px; }