テキストリンクだけでWordPressにシェアボタンを挿入する方法

2015-11-15

TwitterやFacebookのシェアボタンを、テキストリンクだけで入れてみます。

テキストリンク

画像を使ったりした方が見栄えはいいのですが、とにかくシンプルに文字だけで入れたいという場合の方法です。ワードプレスの基本的な構造のものであればこれで簡単に入ると思われます。特にこれといって機能的なものは無いシンプルなバージョン。

シェアボタン

Facebook、Twitter、Google+、pocket、はてなブックマークの5つを作り、single.phpで個別記事に挿入します。

追記：facebook のシェアリンクが変更になったので変更しました。16/05/10

single.php

<?php the_content(); ?>　<!-- 下に追加 -->

<div class="share">
    <a id="hatebu" target="_blank" href="//b.hatena.ne.jp/entry/<?php echo rawurlencode(get_permalink()); ?>">B!</a>
    <a id="pocket" target="_blank" href="//getpocket.com/edit?url=<?php echo rawurlencode(get_permalink()); ?>">pocket</a>
    <a id="googleplus" target="_blank" href="//plusone.google.com/_/+1/confirm?hl=ja&amp;url=<?php echo rawurlencode(get_permalink()); ?>">G+</a>
    <a id="twitter" target="_blank" href="//twitter.com/share?url=<?php echo rawurlencode(get_permalink()); ?>&amp;text=<?php echo rawurlencode(get_the_title()); ?>">Twitter</a>
    <a id="facebook" target="_blank" href="//www.facebook.com/sharer.php?u=<?php echo rawurlencode(get_permalink()); ?>">facebook</a>
</div>

入れる場所は<?php the_content(); ?>の下がいいと思います。Twitterのみ記事タイトルを引っ張ってきて入れてます。

あとはCSSでそれなりに。

CSS

.share a {
    float: right;
    padding: 0 10px;
    font-size: 16px;
    transition: all 0.2s linear 0s;
}

/*はてなブックマーク*/
#hatebu {
    color: #00a5df; /*文字色*/
}

#hatebu:hover {
    background-color: #00a5df; /*マウスホバー時の背景色*/
    color: #fff; /*マウスホバー時の文字色*/
}

/*pocket*/
#pocket {
    color: #eb4654; /*文字色*/
}

#pocket:hover {
    background-color: #eb4654; /*マウスホバー時の背景色*/
    color: #fff; /*マウスホバー時の文字色*/
}

/*G+*/
#googleplus {
    color: #dd4e41; /*文字色*/
}

#googleplus:hover {
    background-color: #dd4e41; /*マウスホバー時の背景色*/
    color: #fff; /*マウスホバー時の文字色*/
}

/*twitter*/
#twitter {
    color: #5ea9dd; /*文字色*/
}

#twitter:hover {
    background-color: #5ea9dd; /*マウスホバー時の背景色*/
    color: #fff; /*マウスホバー時の文字色*/
}

/*facebook*/
#facebook {
    color: #3c599f; /*文字色*/
}

#facebook:hover {
    background-color: #3c599f; /*マウスホバー時の背景色*/
    color: #fff; /*マウスホバー時の文字色*/
}