ソーシャルボタンをバルーンタイプじゃなくてボックスタイプにしたいと思っていろいろ試行錯誤してるんですけど、どうもうまくいきません。
おすすめとして以下の記事が挙がっていますが・・・
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS - hostingjedi
それでもうまくいかないのです。
とりあえず、はてなブログでどんなCSSが使われているのかしらべてみました。
.social-buttons {
margin: 10px 0;
display: block; *;
zoom: 1;
}
.social-buttons > div, .social-buttons > a, .social-buttons > iframe {
float: left !important;
margin-right: .3em !important;
}
これを使ってみましょうか。
っていうか、現在のURLを取得するには、location.hrefでいいですよね。
function facebook_like(){
var url = location.href;
document.write('<div class="fb-like" data-href="' + url + '" data-send="false" data-layout="box_count" data-show-faces="false"></div>');
}
function google_plus(){
var url = location.href;
document.write('<div class="g-plusone" data-size="tall" data-href="' + url + '"></div>');
}
上記のJavascriptは外部JSファイルに格納して呼び出しておいて・・・
で、HTMLはこんな感じで…
<div class="social-buttons">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="wanichan" data-lang="en-us">Tweet</a>
<script>facebook_like();google_plus();</script>
</div>
これでうまくいくんでしょうか？
・・・と思ったらうまくいかないです（涙
