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

2018.02.122016.07.14

この記事は約8分で読めます。

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

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

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

設置するソーシャルメディアのシェアボタン
記事のテンプレートファイル内にコピペ
スタイルシート内にコピペ
シェア数を表示したい方は
まとめ

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

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

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

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

WordPressで『TwitterCard』を設定して、つぶやいた時にサイトの概要が表示されるようにする方法

ワードプレスで記事を作成した時に拡散させるための手段としてツイッターを使用することが多いです。特にブログを運営したばかりの時はサイトへのアクセスも少なく、せっかく書いた記事を誰にも見てもらえないことなどしばしば・・・。せっかくツイッター...

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

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

<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;
}

以上です。