ブログなどのアクセス数を伸ばすためには、SNSでのシェアが欠かせません。
効果的にシェア数を伸ばすためには、記事ページにSNSシェアボタンを設置することがとても重要になります。
この記事では、WordPressの投稿ページにSNSシェアボタンを設置する方法をご紹介しています。
SNSシェアボタンを設置する方法
WordPressでSNSシェアボタンを設置する方法は、大きく分けて2つあります。
- プラグインを使用する
- SNSシェアボタンを自分で作る
プラグインを使用する場合は、初心者の方でも簡単にSNSシェアボタンを設置することができますが、細かなカスタマイズを行うことができません。
一方で、SNSシェアボタンを自分で作る場合はテーマファイルの編集が必要となり、少しハードルは高めですが細かなカスタマイズを行うことができます。
自分に合った方法を選ぶようにしましょう。
シェアボタンを設置したいSNS
現状、シェアボタンを設置しておきたいSNSの一覧は下記の通りです。
- はてなブックマーク
- LINE
Twitter、Facebook、Pocketは世界中で使われているサービスなので、プラグインを使用してもシェアボタンを設置することができます。
それに対して、LINEとはてなブックマークは対応しているプラグインが少ないため、これらのSNSシェアボタンが対応しているプラグインを選んだ方がいいでしょう。
プラグインを使ってSNSシェアボタンを設置する
今回、SNSシェアボタンを設置するプラグインを選んだポイントは下記の通りです。
- シェアボタンのデザイン
- 簡単に設定できるか
- LINE、はてなブックマークに対応しているか
- カスタマイズ性
WordPress Share Buttons Plugin – AddThis
「WordPress Share Buttons Plugin – AddThis」は、デザインが今風で設定も簡単なおすすめのSNSシェアボタン設置プラグインです。
下記のようなSNSシェアボタンが表示されます。
対応しているSNSや表示場所は下記の通りです。
| SNS | 表示可否 |
|---|---|
| ○ | |
| ○ | |
| ○ | |
| LINE | ○ |
| はてなブックマーク | ○ |
| 記事上 | 記事下 | 固定表示 |
|---|---|---|
| ○ | ○ | × |
AddToAny Share Buttons
「AddToAny Share Buttons」は、SNSシェアボタンを設置するプラグインの中でも特に人気が高いプラグインです。下記のようなシェアボタンが表示されます。
対応しているSNSや表示場所は下記の通りです。
| SNS | 表示可否 |
|---|---|
| ○ | |
| ○ | |
| ○ | |
| LINE | ○ |
| はてなブックマーク | ○ |
| 記事上 | 記事下 | 固定表示 |
|---|---|---|
| ○ | ○ | ○ |
初期状態だと少しボタンが小さく、間隔も狭いので「追加CSS」の欄に下記のコードを記述すると、デザインを整えることができます。
1 2 3 4 5 6 7 8 | .addtoany_share_save_container { text-align:center; margin-top:3em; } .addtoany_list a { padding:0 10px } |
WP Social Bookmarking Light
「WP Social Bookmarking Light」は、日本人が作成したSNSシェアボタン設置プラグインです。
各SNSの公式デザインのボタンが表示されるので、Webサイトでよく見られるようなデザインのSNSボタンを設置することができます。
対応しているSNSや表示場所は下記の通りです。
| SNS | 表示可否 |
|---|---|
| ○ | |
| ○ | |
| ○ | |
| LINE | ○ |
| はてなブックマーク | ○ |
| 記事上 | 記事下 | 固定表示 |
|---|---|---|
| ○ | ○ | × |
SNSシェアボタンを自分で作る方法
自分でテーマを編集して、下記のようなSNSシェアボタンを設置することも可能です。当サイトのSNSシェアボタンもテーマを編集して設置しています。
テーマファイルにコードを追加する
SNSシェアボタンを自作する場合は、single.phpなど投稿ページのテンプレートファイルの中のシェアボタンを設置したい場所に下記のようなコードを記述します。
1 2 3 4 5 6 7 | <div class="sns-button-wrap"> <a href="https://twitter.com/share?url=<? echo get_the_permalink(); ?>&text=<? echo get_the_title(); ?>" class="sns-button sns-twitter">Twitter</a> <a href="http://www.facebook.com/share.php?u=<? echo get_the_permalink(); ?>" class="sns-button sns-facebook">Facebook</a> <a href="http://getpocket.com/edit?url=<? echo get_the_permalink();?>&title=<? echo get_the_title(); ?>" class="sns-button sns-pocket">Pocket</a> <a href="https://social-plugins.line.me/lineit/share?url=<? echo get_the_permalink(); ?>" class="sns-button sns-line">LINE</a> <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<? echo get_the_permalink();?>&title=<? echo get_the_title(); ?>" class="sns-button sns-hatebu">はてブ</a> </div> |
デザインを整える
シェアボタンを設置したら、CSSを編集してデザインを整えましょう。
最低限色と表示幅を整えれば、下記のようになります。
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 | .sns-button-wrap { display: flex; justify-content: center; } .sns-button { color: #FFFFFF; width: 20%; text-align: center; padding: 0.5em 0; } .sns-twitter { background: #55acee; } .sns-facebook { background: #3B5998; } .sns-pocket { background: #ef3f56; } .sns-line { background: #1dcd00; } .sns-hatebu { background: #00a5de; } |
デザインは好みなので、サイトのイメージに合うシェアボタンにアレンジしてみてください。
Font AwesomeなどのWebアイコンフォントを使うときれいなデザインのシェアボタンを設置することができます。
WordPressでFont Awesomeを使う方法
