ブログに欠かせないのがソーシャルボタン。ブログ記事を拡散するためのものだけでなく、その記事自体の信用度の指標にもなります。WordPressにはいくつもソーシャルボタンのプラグインがあると思いますが、直接ソースを持ってきて使うと自由度が増します。ただ、意外とレイアウトに苦戦したりします。今回は、当ブログでも採用しているバルーン型（ボックス型）のソーシャルボタンに絞って各ソーシャルボタンの取得先と設置方法について紹介します。
サンプル
まずはサンプルをご紹介。バルーン型のソーシャルボタンは、ボタンの上にボタンが押された回数などがバルーン（風船）のように表示されているものです。横一列に並べると、大変見栄えがよいです。
各ソーシャルボタンの取得先（ソーシャルボタン一覧）
バルーン型に対応しているそれぞれのソーシャルボタンのコードの取得先は以下となります。取得方法や設定方法などは各ページの案内に従ってください。
Twitterのツイートボタンだけ、バルーン型に設定する方法がわかりにくいので、以下を参考に設定してみてください。
ソーシャルボタンの設置方法
いろいろ方法はあると思いますが、シンプルでレイアウトも変更しやすい方法を紹介します。まず、ソーシャルボタンはli要素でマークアップして、ul要素を親要素として指定しておきます。
ソーシャルボタンを囲っているli要素に対して、以下のようにCSSで指定します。これで、奇麗に一直線に並べることができます。
.social-button li {
display: inline-block;
vertical-align: top;
}
ソーシャルボタンの固まりを中央配置（センタリング）したい場合は、ul要素とさらにその親要素に対して、以下のようにCSSで指定します。
.social-button-area {
text-align: center;
}
.social-button {
display: inline;
}
以上でほぼ大丈夫だと思いますが、使っているreset.cssなどの影響でソーシャルボタン同士がぴったりくっついてしまっている場合もあります。その場合は、以下を付け足してみてください。
.social-button li {
display: inline-block;
vertical-align: top;
margin-right: 4px; /* ←付け足す */
}
.social-button li:last-child {
margin-right: 0; /* ←付け足す */
}
HTMLは以下の通りです。
<div class="social-button-area">
<ul class="social-button">
<li>
<!-- Hatena Button -->
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://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="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li>
<!-- Twitter Button -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</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>
<!-- Facebook Button -->
<div class="fb-like" data-href="" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
<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&appId=305618339584509";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</li>
<li>
<!-- G+ Button -->
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="tall"></div>
<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script>
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
<li>
<!-- 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>
</li>
<li>
<!-- LinkedIn Button -->
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: ja_JP
</script>
<script type="IN/Share" data-counter="top"></script>
</li>
</ul>
</div>
ソーシャルボタンは、ブログ運営には必要不可欠なものとなっていますが、その反面パフォーマンスを著しく低下させる場合もあります。最後にソーシャルボタンのパフォーマンスを上げる方法について説明しているブログ記事を紹介して終わりにします。
コメント