ブログ

  1. トップ
  2. ブログ
  3. WordPressでSNSシェアボタンが設置できるプラグイン5選(+OGPの設定方法)

WordPress

WordPressでSNSシェアボタンが設置できるプラグイン5選(+OGPの設定方法)

WordPressでブログなどのメディアを運営する場合、SNSシェアは必須でしょう。SNSシェア用のプラグインもいろいろとあるので、設置をするだけなら難しくはありません。ただし、SNSシェアボタンの設置にはそのためのコツもあります。

本記事ではSNSシェアのポイントをおさらいしながら、WordPressのおすすめSNSシェア系プラグインを5つご紹介します。SNSシェアでは欠かせない、OGPの設定方法についても解説してあるので、併せて参考にしていただければと思います。

SNSでシェアされるためのポイント6箇条

ユーザーにたくさんシェアしてもらうには、どうすればいいのでしょうか?SNSシェア系のプラグインについて見ていく前に、SNSシェアボタンを設置する時のポイントについてご紹介します。コツを押さえて、しっかりとシェアにつながるようにしていきましょう。

コンテンツを魅力的にすること

何よりも重要なのは、コンテンツが魅力的であることです。どんなに見た目が良くても、どんなに見やすいページでも、中身がなければユーザーにはシェアしてもらえないでしょう。ターゲットを明確にして、そのユーザーに刺さるコンテンツは何なのかをしっかりと練っていくことが必要なのです。

シェアボタンは設置する場所を考えること

ユーザーはどんなタイミングで、コンテンツをシェアしたいと思うのでしょうか?SNSシェアボタンをクリックするのは、いつなのでしょうか?いろいろなケースがあるかと思いますが、コンテンツに心を動かされたり、ためになったと満足したりした時が多いでしょう。そのため、SNSシェアボタンはコンテンツの導入と、最後に設置するのが一般的になっています。

ただし、コンテンツが縦に長かったりすると、ユーザーにSNSシェアボタンを見つけてもらえない可能性もあります。そのため、スクロールを追尾したり、画面の上か下にStickyな要素として配置するケースもあります。

いずれにしても、ユーザーがシェアしたいと思った時に、そのタイミングでシェアしてもらうようにすることが大切です。ユーザーの行動を考えながら、最適な場所に設置するようにしましょう

コンテンツやターゲットに合わせてSNSシェアボタンを選ぶこと

SNSシェアボタンの種類は、コンテンツやターゲットに合わせて選ぶようにしてください。その理由は、SNSごとに特徴が異なるから。ターゲットとしているユーザー層をよく考えて、SNSを選んでいく必要があるのです。

SNSごとのロゴや配色を守ること

SNSシェアボタンを使うときは、サービスごとのロゴや配色を守ることを忘れないでください。各サービスごとの利用規約に準拠するという理由もありますが、ユーザーはロゴや色を見てサービスを判断しているからです。

スムーズにシェアしてもらうためにも、お馴染みのロゴや配色でシェアボタンがデザインしてあることが大切です。

SNSシェアボタンは多くし過ぎないこと

「決定回避の法則」をご存じでしょうか?ユーザーは選択肢が多いと、なかなか選べなかったり、何も選択しないことがあるのです。

SNSシェアボタンにも、同じようなことが考えられます。ボタンの数が多すぎると、せっかくユーザーがその気になっても、シェアボタンを選んでもらえない可能性があります。設置するシェアボタンは必要最低限にして、ユーザーに選んでもらいやすくしましょう。

PDCAをまわすこと

SNSシェアボタンを設置したら、ユーザーの反応を見ながら都度改善を加えるようにしましょう。いわゆるPDCAサイクルをまわしながら、A/Bテストなどを活用して、シェアボタンを最適化していくようにしましょう。

SNSシェアボタンが設置できるWordPressプラグイン5選

SNSシェア用のプラグインを5つご紹介します。どのプラグインも、インストールして有効化するだけで、簡単にSNSシェアボタンを実装することができます。

WP Social Bookmarking Light

WP Social Bookmarking Light

» WP Social Bookmarking Light — WordPress Plugins

SNSシェア系のプラグインとしては、おそらく最も有名なのではないでしょうか?「WP Social Bookmarking Light」は、簡単にSNSシェアボタンが設置できるプラグインです。

対応しているSNSも多岐に渡っていて、その中から必要なものを選ぶことができます。対応しているSNSをリストアップしておきましょう。FacebookやTwitterだけでなく、LINEやはてなにも対応しているのは嬉しいですね。

  • はてな
  • Facebook
  • Facebook Like Button
  • Facebook Share Button
  • Facebook Send Button
  • Twitter
  • Livedoor Clip
  • @nifty clip
  • Tumblr
  • FC2 Bookmark
  • newsing
  • Choix
  • Yahoo!JAPAN Bookmark
  • Yahoo!Buzz
  • Google Bookmark
  • Google Buzz
  • Google +1
  • Delicious
  • Digg
  • FriendFeed
  • reddit
  • LinkedIn
  • Evernote
  • Instapaper
  • StumbleUpon
  • mixi Check
  • mixi Like
  • GREE Social Feedback
  • atode (toread)
  • LINE
  • Pocket
  • Pinterest

SNSシェアボタンは、コンテンツの上部もしくは下部、もしくはその両方に設置することが可能です。投稿と固定ページの両方に設置することができますが、投稿だけに設置するなどの設定も可能です。

Sharebar

Sharebar

»  Sharebar — WordPress Plugins

画面の左側に、SNSシェアのボックスが設置できるプラグインです。スクロールに追従して表示されるので、常にSNSシェアボタンを画面内に表示しておくことができます。記事の前半で解説したように、シェアボタンがいつもユーザーの目に触れていることは重要です。Sharebarはそういった意味でもいい選択肢になるでしょう。こういった要素は結構じゃまになることが多いのですが、Sharebarのシェアボックスは縦長のスリムな形状になっています。コンテンツの邪魔になることもないでしょう。

オートモード(AUTO MODE)がONの場合は、プラグインを有効化するだけで自動的にSNSシェアボタンが表示されます。設置場所を任意に決めたい場合は、オートモードをOFFにしてPHPファイル(テンプレートファイル)に指定されたコードを記述する必要があります。

「Sharebar」で表示可能なボタンは、以下の6種類です。対応しているSNSの種類は多くはありませんが、日本でもメジャーなFacebookとTwitterは押さえられています。ボタンには、シェアされた回数も併記されます。

  • Facebook
  • Twitter
  • Pinterest
  • Email
  • Stumbleupon
  • Reddit

なお、基本的にはページの左側にSNSシェア用のボックスが表示されるのですが、ページ幅によって自動で表示形式が変わります。1,000pxを満たないページ幅の場合は、ページタイトルの下に小さくボタンが表示されるようになります。1,000pxと言いましたが、この値は変更可能です。切り替えたいページ幅に、任意に設定することができます。

Simple Share Buttons Adder

Simple Share Buttons Adder

» Simple Share Buttons Adder — WordPress Plugins

その名の通り、シンプルなSNSシェアボタンが設置できるプラグインです。シンプルとは言ってもデザインは洗練されていて、コンテンツのじゃまにならず、かつセンスの良い見た目になっています。シェア数を併記することもできます。

シェアボタンは、コンテンツの上部か下部、もしくはその両方に設置することができます。投稿や固定ページ意外にも、トップページにもシェアボタンを設置することが可能です。設定次第でいろいろとデザイン出来るのですが、例をあげると下のようなSNSシェアボタンが使えます。

Simple Share Buttons Adderのサンプル

対応している代表的なサービスについても列挙しておきましょう。SNSの他にも、メールやプリントなどのボタンを設置することも可能です。表示するボタンの並び替えもできます。

  • Facebook
  • Twitter
  • Google +
  • Tumblr
  • LinkedIn
  • Pinterest
  • Diggit
  • Buffer

「Simple Share Buttons Adder」の特徴をもう一つあげるなら、カスタマイズがしやすいことがあげられるでしょう。シェアボタンで使うアイコン画像を自分でアップロードしたものに差し替えたり、CSSをカスタムしてデザインを弄ることもできます。

Tweet, Like, Google +1 and Share

Tweet, Like, Google +1 and Share

» Tweet, Like, Google +1 and Share — WordPress Plugins

「Tweet, Like, Google +1 and Share」も、SNSシェアボタンが設置できるプラグインです。

特徴としては、カスタムボタンが設置できることがあげられます。デフォルトで対応しているサービスはFacebookとTwitter、Google +、Linkedinだけなのですが、カスタムボタンを1つ増やすことができるのです。はてなブックマークやLINEなど、国内のサービスを使いたい場合に役立つでしょう。

シェアボタンが設置できるのは、コンテンツの上部、下部、その両方から選べます。投稿や固定ページのほか、トップページやアーカイブにシェアボタンを設置することもできます。

Shareaholic | share buttons, related posts, social analytics & more

Shareaholic

» Shareaholic | share buttons, related posts, social analytics & more — WordPress Plugins

「Shareaholic」によるSNSシェアプラグインです。他のプラグインとは少し毛色が違っていて、デザインや機能がユニークなものになっています。SNSシェアボタンだけでなく、関連記事も表示できますし、アクセス解析などの機能を利用することもできます。

「Shareaholic」の特徴としては、そのデザインの良さが真っ先にあげられます。SNSシェアボタンは、ともすると簡素なものになってしまいがちです。「Shareaholic」で設置できるシェアボタンは、下のように目を惹くデザインになっています。オリジナリティのあるSNSシェアボタンを作ることができるでしょう。

Shareaholicのサンプル

対応しているサービスについても列挙しておきしょう。代表的なものだけでも、下のように非常に数が多いことがわかります。海外製のプラグインなので、残念ながらLINEなど日本のサービスには対応していません。ただ、ここまで対応しているサービス数が多いのは圧巻です。

  • Facebook
  • Twitter
  • Pinterest
  • Google Plus
  • Reddit
  • LinkedIn
  • Gmail
  • Delicious
  • OneNote
  • Evernote
  • Stumbleupon
  • Digg
  • Tumblr
  • Hootsuite
  • Buffer
  • Fancy
  • Wanelo
  • Yummly
  • WeHeartIt
  • Flipboard
  • Printfriendly
  • Amazon Wishlist
  • Instapaper
  • Pocket
  • Odnoklassniki
  • Houzz
  • Hacker News
  • Inbound.org
  • Vk

番外編:OGPの基本と設定方法

さて、最後にOGP(Open Graph Protocol)についてご紹介しておきましょう。Facebook OGPを設定する時の手順についても解説しています。

OGPとは?

OGPとは、Facebookでシェアされた時に表示される、トップ画像やタイトル、説明文などを指定する機能のことを言います。OGPを正しく設定しておかないと、せっかく記事がシェアされても正しくない画像やタイトルが表示されてしまうことがあるのです。

SNSシェアの効果を最大化するためにも、OGPについても忘れずに設定しておくようにしましょう。

ここではFacebook OGPについて解説していきますが、より詳しい内容については下記の公式ページ(英語)を参考にしてください。

» The Open Graph protocol

Facebook OGPの設定方法

それでは、Facebook OGPを設定するときの手順をご紹介しましょう。まずはOGPをHTMLページに書き込みます。下のコードを、ページのheadタグ内に記述してください。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:image" content="トップ画像のURL" />
<meta property="og:site_name" content="ホームページの名称" />

ページのタイトルや種類(websiteやarticleなど)、URL、トップ画像などを設定していきます。該当するページがSNSでシェアされると、ここに書き込んだ内容が投稿に表示される仕組みになっているのです。

注意点としては、OGPを設定する全てのページに上記のコードを書き込むこと。静的なページでは各ページのHTMLを個別に編集する必要があるので大変ですが、WordPressの場合はheader.phpに書くだけでOKです。

All in One SEO Packなどのプラグインを使っても設定できるので、PHPファイルの編集をしたくない場合はプラグインを使ってOGPを設定するといいでしょう。

さて、OGPの設置ができたら、正しくFacebookが読み込んでくれるかをチェックします。Facebookは公式にOGPのチェックツールを提供していて、デバッガーと呼ばれています。下のリンクから、デバッガーに接続してください。

※デバッガーを使うには、Facebookへのログインが必要です。

Facebookデバッガー

» デバッガー – 開発者向けFacebook

真ん中の入力欄に、OGPを調べたいページのURLを入力。右側の「デバッグ」ボタンを押せば、OGPのチェックがはじまります。設定したOGP内容になっていなければ、先ほどのコードを修正して、再度デバッグを行いましょう。

あとがき

SNSシェアのできるWordPressプラグインについてご紹介しました。Webからの集客を考える上では、SNSシェアボタンは必須の要素だと言えます。コンバージョンにつながるよう、ご紹介したポイントを参考にしていただきながら、上手にSNSシェアボタンを使っていってください。