簡単！WordPressサイトにSNSシェアボタンを追加する方法

WebサイトはSEO対策も重要ですが、SNSを活用したマーケティングも非常に重要です。

特にメディアやブログなどは、投稿にSNSシェアボタンを設置することにより、SNSからのアクセスアップを増やすことが期待できます。

今回は、WordPressサイトにSNSシェアボタンを追加する方法をご紹介したいと思います。

INDEX

SNSシェアボタンを設置する方法
プラグインを使ってSNSシェアボタンを追加する
- Share Buttons by AddThis
- AddToAny Share Buttons
プラグインなしでSNSシェアボタンを追加する
まとめ

SNSシェアボタンを設置する方法

WordPressサイトにSNSシェアボタンを追加する方法は、大きく分けて2種類の方法があります。

プラグインを使ってSNSシェアボタンを追加する
プラグインなしでSNSシェアボタンを追加する

プラグインを使えば手軽にSNSシェアボタンを追加することができますが、細かなデザインの調整ができなかったりするため、自分でカスタマイズして設置したい場合はプラグインを使わずにテンプレートファイルを編集してSNSシェアボタンを設置する方法がおすすめです。

ただし、テンプレートファイルの編集は誤ったコードを記述するとエラーが発生する原因となってしまうため、注意して編集するようにしてください。

プラグインを使ってSNSシェアボタンを追加する

WordPressサイトにSNSシェアボタンを追加できるプラグインは様々なものがありますが、おすすめのプラグインをご紹介していきます。

Share Buttons by AddThis

デザインがきれい
200種類以上のSNSに対応
フローティングボタンも追加可能

AddThisは有名なWordPressプラグインで、ボタンの見た目も整っていて、様々なサイトに馴染むボタンを設置することができます。

また、シェア数を表示する機能もあり、SNS上でシェアされている回数をボタン上に表示することもできます。

下記は実際に表示されるSNSシェアボタンのサンプルです。

AddToAny Share Buttons

100種類以上のSNSに対応
ボタンの見た目を細かくカスタマイズ可能
フローティングボタンも追加可能

AddToAnyも対応しているSNSの種類が多く、シンプルなSNSシェアボタンを簡単に設置できるという点から人気の高いプラグインです。

ボタンのサイズは設定画面から簡単に変更することができ、追加のCSSやJavaScriptも管理画面上で記述することが可能です。

下記はAddToAnyのSNSシェアボタンの表示サンプルです。

プラグインなしでSNSシェアボタンを追加する

プラグインなしでSNSシェアボタンを追加する場合は、テンプレートファイルを編集します。投稿ページにSNSシェアボタンを設置したい場合は、single.phpというファイルを編集していきます。それ以外のページでも、それぞれ対応するテンプレートファイルを編集すれば同様にSNSシェアボタンを設置する事が可能です。

まず、テンプレートファイルを開いて、SNSシェアボタンを表示したい場所に、下記のコードをそのまま貼り付けてください。

<div class="sns__container">
  <a class="sns__twitter" href="https://twitter.com/share?url=<?php echo get_the_permalink();?>&text=<?php echo get_the_title();?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-twitter-square"></i>
  </a>
  <a class="sns__facebook" href="http://www.facebook.com/share.php?u=<?php echo get_the_permalink(); ?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-facebook-square"></i>
  </a>
  <a class="sns__pocket" href="http://getpocket.com/edit?url=<?php echo get_the_permalink();?>&title=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-get-pocket"></i>
  </a>
  <a class="sns__line" href="https://social-plugins.line.me/lineit/share?url=<?php echo get_the_permalink(); ?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-line"></i>
  </a>
</div>

最低限のデザインを整えるCSSは、下記の通りです。必要に応じて、ご自身で編集してお使いください。

.sns__container {
    display: flex;
}

.sns__container a {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0;
}

.sns__container a:hover {
    opacity: 0.6;
}

.sns__twitter {
    background: #55acee;
}

.sns__facebook {
    background: #3b5998;
}

.sns__pocket {
    background: #ef3f56;
}

.sns__line {
    background: #1dcd00;
}

.sns__hatena {
    background: #00a5de;
}

こちらはFont Awesomeを使ってアイコンの表示を行っているため、そのままアイコンを表示する場合はFont Awesomeの導入が必要です。