こんにちは、”はふぃ”です。

記事を読んでいると、記事の上や下にこのようなボタンありませんか?

これはSNSシェアボタンといい、ユーザーはこのボタンをクリックすることで簡単にSNSに読んでいる記事を共有することができます(例:Twitterボタンを押すと、読んでいる記事の内容をツイートできる)。

逆に記事を管理している側としては、いろんな人に記事を共有してもらうことで集客に繋げることができます。(SEOには効果がありません)

今回はこのSNSシェアボタンをWordPressで表示する方法について説明します。

目指すこと

WordPressのプラグインを利用して、Twitter・Facebook・LINEのSNSシェアボタンを表示する

使用するプラグイン

SNSシェアボタンのプラグインは数多く存在しますが、今回はWordPress Share Buttons, Related Posts, Google Analytics – Shareaholicを利用します。

このプラグインを選んだ理由は…

  • SNSシェアボタンの種類にLINEがある(ないものが多い)
  • 無料登録することで機能拡張できる
  • 関連記事を表示する機能も付いている

プラグインのインストール

WordPressで目次を簡単に自動生成する方法のプラグインインストール部分を参考に、検索窓に「Shareaholic」と入力して検索し、インストールを行ってください。

SNSシェアボタンの設定

インストールが完了するとWordPressの左サイドバーにShareaholicという項目が追加されていると思います。この項目をクリックし、設定画面にうつります。

「In-Page Share Buttons」という項目があると思うので、そこでSNSシェアボタンの設定を行います。

表示に関する設定

まず、それぞれの項目は以下の意味になります。

  • Post:投稿ページ
  • Page:固定ページ
  • Index:トップページ
  • Category:カテゴリページ

さらにAbove Contentはページ上部、Below Contentはページ下部を意味するので、SNSシェアボタンを表示したいページ・位置のチェックをつけます。

また、それぞれの項目にある「Customizeボタン」を押すとレイアウトの設定を行うことができます(個別に)。

ボタンの形やサイズ、シェアされた回数の表示位置などの変更ができるため、少し下にあるプレビューを確認しながら自分好みにカスタマイズしましょう。

さらに下へ進むと表示するいろんなサービスが一覧で並んでいますが、ここで表示したいSNSシェアボタンを追加することができます。

逆にSNSシェアボタンを減らしたい場合は、プレビュー画面で該当のアイコンにマウスオーバーすると左上にバツボタンが現れるので、それをクリックすることで取り除くことができます。

カスタマイズが完了したら「Save Settingsボタン」を押して設定を保存します。

クリック後の設定

続いて「Edit Settingsボタン」を押して、ユーザーがSNSシェアボタンをクリックした後に関する設定を行っていきます。

それぞれの項目は以下の意味になるので、ここも自分の好みで設定していきます。

  • MESSAGE FORMAT:シェアする内容(例:Twitterならツイート内容)
  • URL SHORTENER:ショートURL
  • SHARE COUNT MINIMUM:シェアされた回数を表示する最低回数
  • SMART SORT:ページごとに自動でソートするか否か
  • Show Post-Sharing Dialog:シェア完了時にダイアログを表示するかどうか
    • HEADING:表示するメッセージ
    • FOLLOW BUTTONS:フォローボタンを表示するかどうか
    • POST SHARE ADS:広告を表示するかどうか

設定が完了したら「Save Settingsボタン」で設定を保存します。

表示に関する設定、クリック後の設定が完了したらShareaholicの設定画面の一番下にある「Save Changesボタン」を押すことで全ての設定が反映されます

細かい設定

ここまでで基本的なSNSシェアボタンの表示は実現できたのですが、Shareaholicに無料会員登録することでさらに細かい設定が可能となります。

※ 細かい設定は不要だと思ったのですが、画面の左に表示されるフローティングメニューがデフォルトで表示される設定になっており、会員登録しないと消せなかったので、今回はそれをOFFにするために会員登録を行います。

Shareaholicの設定画面の「Shareaholic Dashboardボタン」を押します。

メールアドレスとパスワードを入力し、自分のサイトをリンクさせるとメールが送られてきます。そのメールのURLにアクセスすることで会員登録が完了します。(以下の画像のように、各項目で「Settingsボタン」が表示されていたら会員登録が完了しています)

ここで様々な設定ができますが、今回はフローティングメニューを消すことが目的なので「SOCIAL」の「Floated Share Buttons 」をOFFにすることで設定を更新します。

なお、フローティングメニューを消すのではなく、デザインや表示するSNSを変更したい場合は「Settingsボタン」を押すことでとてもわかりやすいプレビューを見ながらカスタマイズすることが可能です。

まとめ

Shareaholicというプラグインを使うことで簡単にSNSシェアボタンを表示することができました。

今回は紹介しませんでしたが、Shareaholicには関連記事を表示する機能もあるのでそちらも使ってみるとあなたのサイトのユーザビリティを向上させることができるかもしれません

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA