WordPressでツイッターやフェイスブック等SNSのシェアボタンを設置する方法(プラグインなし)

2017年7月20日WordPressカスタマイズ

ブログで書いた記事をツイッターやフェイスブック等のソーシャルメディアでシェアしてもらうためにシェアボタンを設置する人が増えています。パソコン慣れしている人はURLをコピペしてシェアしたりすることができますが、やはりボタン一個で簡単に記事をシェアできるようにしたほうが読者に親切です。

ワードプレスならWP Social Bookmarking Light等のプラグインで簡単にシェアボタンを記事の中に配置したりできますが、表示に一瞬のラグがあるのがどうしても気になってしまい、プラグインを使わず自分で作ることにしました。

コピペでできますので皆さんも使ってみてください。

目次

設置するソーシャルメディアのシェアボタン

今回は以下ソーシャルメディアのシェアボタンを設置したいと思います。

  • Twitter
  • facebook
  • Google+
  • はてなブックマーク
  • pocket
  • LINE

『ツイッターカード』を設定しておくとツイッターでシェアされた時、見栄えが良くなります。今回の設定が終わった後にでも設定しておきましょう。

https://saburo-design.com/1231/

記事のテンプレートファイル内にコピペ

記事のテンプレートの中に以下のコードをコピペしてください。

<ul id="sns_btn">

<li class="sns_btnInner"><a class="twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterで共有">Twitter</a></li>

<li class="sns_btnInner"><a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&amp;t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookで共有">facebook</a></li>

<li class="sns_btnInner"><a class="google_plus" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+で共有">Google+</a></li>

<li class="sns_btnInner"><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加">はてブ</a></li>

<li class="sns_btnInner"><a class="pocket" href="http://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="pocketで共有">pocket</a></li>

<li class="sns_btnInner"><a class="line" href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank" title="LINEで送る">LINE</a></li>

</ul>

※LINE(ライン)に関しては、モバイルからなら現在のページをシェアすることが出来ますが、パソコン上からだと公式サイトに飛ぶだけのようです。

スタイルシート内にコピペ

このままだとただのリスト表示になっているので、下記のCSSをコピペしてレイアウトを整えます。

/*記事SNSシェアボタン*/
ul#sns_btn {
    width:100%;
    float: left;
    clear: both;
    padding: 0px;
    margin: 0px 0px 10px 0px;
}

ul#sns_btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

ul#sns_btn li.sns_btnInner {
    width:15%;
    float: left;
    padding: 0px;
    margin: 0px 2% 0px 0px;
    list-style-type: none;
}

ul#sns_btn li.sns_btnInner:nth-child(6n) {
    width:15%;
    margin: 0px 0px 0px 0px;
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner {
    width:32%;
    margin: 0px 2% 5px 0px;
}
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner:nth-child(3n) {
    width:32%;
    margin: 0px 0px 5px 0px;
}
ul#sns_btn li.sns_btnInner:nth-child(6n) {
    width:32%;
    margin: 0px 0px 5px 0px;
}
}

ul#sns_btn li.sns_btnInner a {
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    color:#ffffff;
    display: block;
    padding: 8px 0px;
    margin: 0px;
    background-color:#f5f5f5;
    text-align:center;
    text-decoration: none;
    border-radius:5px;
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner a {
    font-size: 14px;
    padding: 10px 0px;
}
}

ul#sns_btn li.sns_btnInner a.twitter {
    background-color: #00acee;
}

ul#sns_btn li.sns_btnInner a.facebook {
    background-color: #3b5998;
}

ul#sns_btn li.sns_btnInner a.google_plus {
    background-color: #dd4b39;
}

ul#sns_btn li.sns_btnInner a.hatena {
    background-color: #2D4C86;
}

ul#sns_btn li.sns_btnInner a.pocket {
    background-color: #EE4056;
}

ul#sns_btn li.sns_btnInner a.line {
    background-color: #5ae628;
}

以上です。

シェア数を表示したい方は

この方法だとシェア数をカウントして表示することが出来ませんが、そこはプラグインを使って対応することが出来ます。詳しくは下記の記事をご参照下さい。

https://saburo-design.com/3655/

まとめ

いかがでしたでしょうか?上記スタイルシートはパソコンだと1列で横並びですが、スマホなど小さな画面では2列になるようにしています。お好みでレイアウトを変えてみてください。

ツイッターのシェアボタンをさらに深くカスタマイズする方法はこちら↓

https://saburo-design.com/17268/