WordPressサイトに小さいタイプと大きいタイプのソーシャルボタンを横並びで設置する時用のメモ書きです。そのままコピペで設置できます。
小さいソーシャルボタンの設置
テーマファイル内(single.phpなど)で、小さいタイプのソーシャルボタンを設置したい場所に、以下のコードを追加します。
<div class="social">
<!-- Facebook -->
<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>
<div class="socialbutton facebook-button">
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>
<!-- Twitter -->
<div class="socialbutton twitter-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="horizontal">ツイート</a>
</div>
<!-- Hatena -->
<div class="socialbutton hatena-button">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title();?>" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>
<!-- Google+ -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div class="socialbutton gplus-button">
<div class="g-plusone" data-size="medium"></div>
</div>
<!-- Pocket -->
<div class="socialbutton pocket-button">
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</div>
</div>
<script>～</script>の部分は、フッターなどに移動してもOKです。
CSSは以下の通りです。
.socialbutton { float: left; margin: 0 0 15px 10px; }
.facebook-button{ min-width:70px; max-width:115px; }
.twitter-button{ min-width:87px; max-width:90px; }
.hatena-button{ min-width:80px; max-width:125px; }
.gplus-button{ min-width:50px; max-width:80px; }
.pocket-button{ min-width:60px; max-width:115px; margin: 0 0 0 -10px; }
こんな感じでそれっぽくボタンを並べることができます。
大きいソーシャルボタンの設置
小さいボタンと同様に、ソーシャルボタンを設置したい場所に以下のコードを追加します。
<div class="social">
<!-- Facebook -->
<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>
<div class="socialbutton facebook-button">
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>
<!-- Twitter -->
<div class="socialbutton twitter-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
</div>
<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>
<!-- Hatena -->
<div class="socialbutton hatena-button">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title();?>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>
<!-- Google+ -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div class="socialbutton gplus-button">
<div class="g-plusone" data-size="tall"></div>
</div>
<!-- Pocket -->
<div class="socialbutton pocket-button">
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</div>
</div>
CSSは以下のようにします。
.socialbutton { float: left; margin: 0 0 15px 10px; }
.facebook-button{ min-width:70px; max-width:115px; }
.twitter-button{ min-width:87px; max-width:90px; }
.hatena-button{ min-width:80px; max-width:125px; margin: 0 0 0 -5px; }
.gplus-button{ min-width:50px; max-width:80px; }
.pocket-button{ min-width:60px; max-width:115px; }
これで大きいタイプのボタンを横並びに設置できます。
あとがき
プラグインを使うのであれば、WP Social Bookmarking Lightで簡単に設置することができます。プラグインは使いたくないなーという時にぜひお試しください。
なお、ボタンのコードはWordPress用に少しカスタマイズしているので、WordPress以外のサイトに設置する場合は、ボタンの作成ページでコードを取得して差し替えてください。
そのうえで、各ボタンをsocialbuttonとxx-buttonというクラスで包括すれば、同じCSSで横並びに設置することができます。