WordPressにプラグインなしでレスポンシブなシェアボタンを設置する

こんにちは、ヒラタケです。

多くの人がTwitterやFacebookを利用しており、ブログをたくさんの方に診てもらうためにはこういったSNSで共有するためのボタンを設置するのがよいと思います。

今回は、自分の知り合いからの要望もあり、このサイトで使っているぼくが作ったスマホ対応のレスポンシブなシェアボタンを設置する方法を説明いたします。設置するシェアボタンは、「Twitter」「Facebook」「Google+」「はてなブックマーク」の4つです。

プラグインなしで設置するため、テーマのファイルを書き換える必要があります。難しいと感じた方は、インストールするだけで設置できるシェアボタンのプラグインが探せばきっとあると思いますので、そちらを使いましょう。

設置する方法

使用しているテーマに、以下のCSSを追加。それから、シェアボタンを表示したい箇所に以下のPHPのコードを追加してください。

また、もし「FontAwesome」を読み込んでいない場合は、読み込むようにしてください。

CSS

#socialLink {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#socialLink a {
    width:100%;
    height:48px;
    margin-bottom:16px;
    padding-bottom:4px;
    display:block;
    position:relative;
    box-sizing:border-box;
    border:solid 1px #e2e2e2;
    border-bottom:solid 4px;
    border-radius:3px;
    text-decoration:none;
    text-align:center;
    font-size:18px;
    line-height:44px;
    letter-spacing:.9pt;
    transition-duration:.1s;
}
#socialLink a:before {
    padding-right:8px;
    font-family:'FontAwesome';
    font-size:24px;
}
#socialLink a.fa-twitter {
    color:#1da1f2;
}
#socialLink a.fa-twitter:hover {
    background:#1da1f2;
}
#socialLink a.fa-facebook {
    color:#3b5998;
}
#socialLink a.fa-facebook:hover {
    background:#3b5998;
}
#socialLink a.fa-google-plus {
    color:#dd4b39;
}
#socialLink a.fa-google-plus:hover {
    background:#dd4b39;
}
#socialLink a.fa-hatebu {
    color:#008fde;
}
#socialLink a.fa-hatebu:hover {
    background:#008fde;
}
#socialLink a.fa-hatebu:before {
    content:"B!";
    font-family:Verdana;
    font-weight:bold;
    letter-spacing:-.9pt;
}
#socialLink a:hover {
    color:#fff;
    border:solid 1px transparent;
    border-bottom:solid 4px transparent
}
@media only screen and (min-width: 496px) {
    #socialLink a {
        width:49%;
    }
}
@media only screen and (min-width: 1024px) {
    #socialLink a {
        width:24%;
    }
}

PHP

<?php
$now_url = get_permalink();
?>
<div id="socialLink">
    <a href="http://twitter.com/share?text=<?php echo get_the_title(); ?>&amp;url=<?php echo $now_url; ?>" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" rel="nofollow" class="fa-twitter">Twitter</a>
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $now_url; ?>" class="fa-facebook">Facebook</a>
    <a href="https://plus.google.com/share?url=<?php echo $now_url; ?>" class="fa-google-plus">Google+</a>
    <a href="http://b.hatena.ne.jp/add?url=<?php echo $now_url; ?>" class="fa-hatebu">はてブ</a>
</div>

このPHPのコードは、必ずループ内に設置するようにしてください。

この2つがうまく記述できていれば、シェアボタンが表示されるはずです。テーマや環境によってはうまくスマホ対応にならない等あるかもしれません。ご了承ください。CSS頑張って書いたので、誰かに使っていただけたらうれしいです。

プラグインをたくさんインストールすると、サイトの動作がどうしても遅くなってしまいますので、シェアボタンくらいは、少し勉強してテーマ書き換えて設置したほうがいいかもしれませんね。