WebサイトはSEO対策も重要ですが、SNSを活用したマーケティングも非常に重要です。
特にメディアやブログなどは、投稿にSNSシェアボタンを設置することにより、SNSからのアクセスアップを増やすことが期待できます。
今回は、WordPressサイトにSNSシェアボタンを追加する方法をご紹介したいと思います。
INDEX
SNSシェアボタンを設置する方法
WordPressサイトにSNSシェアボタンを追加する方法は、大きく分けて2種類の方法があります。
- プラグインを使ってSNSシェアボタンを追加する
- プラグインなしでSNSシェアボタンを追加する
プラグインを使えば手軽にSNSシェアボタンを追加することができますが、細かなデザインの調整ができなかったりするため、自分でカスタマイズして設置したい場合はプラグインを使わずにテンプレートファイルを編集してSNSシェアボタンを設置する方法がおすすめです。
ただし、テンプレートファイルの編集は誤ったコードを記述するとエラーが発生する原因となってしまうため、注意して編集するようにしてください。
プラグインを使ってSNSシェアボタンを追加する
WordPressサイトにSNSシェアボタンを追加できるプラグインは様々なものがありますが、おすすめのプラグインをご紹介していきます。
- デザインがきれい
- 200種類以上のSNSに対応
- フローティングボタンも追加可能
AddThisは有名なWordPressプラグインで、ボタンの見た目も整っていて、様々なサイトに馴染むボタンを設置することができます。
また、シェア数を表示する機能もあり、SNS上でシェアされている回数をボタン上に表示することもできます。
下記は実際に表示されるSNSシェアボタンのサンプルです。
- 100種類以上のSNSに対応
- ボタンの見た目を細かくカスタマイズ可能
- フローティングボタンも追加可能
AddToAnyも対応しているSNSの種類が多く、シンプルなSNSシェアボタンを簡単に設置できるという点から人気の高いプラグインです。
ボタンのサイズは設定画面から簡単に変更することができ、追加のCSSやJavaScriptも管理画面上で記述することが可能です。
下記はAddToAnyのSNSシェアボタンの表示サンプルです。
プラグインなしでSNSシェアボタンを追加する
プラグインなしでSNSシェアボタンを追加する場合は、テンプレートファイルを編集します。投稿ページにSNSシェアボタンを設置したい場合は、single.phpというファイルを編集していきます。それ以外のページでも、それぞれ対応するテンプレートファイルを編集すれば同様にSNSシェアボタンを設置する事が可能です。
まず、テンプレートファイルを開いて、SNSシェアボタンを表示したい場所に、下記のコードをそのまま貼り付けてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="sns__container"> <a class="sns__twitter" href="https://twitter.com/share?url=<? echo get_the_permalink(); ?>&text=<? 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=<? 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=<? echo get_the_permalink();?>&title=<? 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=<? echo get_the_permalink(); ?>" target="_blank" rel="nofollow noopener" > <i class="fab fa-line"></i> </a> </div> |
最低限のデザインを整えるCSSは、下記の通りです。必要に応じて、ご自身で編集してお使いください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.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の導入が必要です。
Font Awesomeの導入が面倒だという方は、アイコンの部分をそのままテキストに変更しても大丈夫です。
実際に表示されるSNSシェアボタンは、下記のようになります。
See the Pen
GRoPrBN by Web Design Trends (@trendwebdesign)
on CodePen.
あとは、サイトごとにレスポンシブデザインで細かなカスタマイズを行ったり、ホバーアニメーションを調整して細かなデザイン調整を行ってみてください。
まとめ
SNSによっては、URL以外にパラメータを渡すことでシェアされる内容をカスタマイズすることも可能です。詳しくは下記のページでご紹介しているので、参考にしてください。
SNSシェアボタン以外にも、WordPressサイトの使いやすさを向上するためのカスタマイズは様々なものがあります。テーマによっては、最初から必要なカスタマイズが施されているものもあるので、時間をかけずに使いやすいサイトを作りたい場合は、高機能なテーマを選択するという手もあります。
