【バズろう】ワードプレスにソーシャルボタンとシェアボタンを簡単に設置する方法(Super Socializer)

ワードプレスのシェアボタン・ソーシャルボタン設置方法をご紹介します。記事を拡散するためには重要はボタンになりますので、もしもテーマに既存のシェアボタン機能がない場合、紹介する方法で設置しましょう。

プラグイン「Jetpack」でソーシャルボタン設置する方法

WordPressをインストールして、「Jetpack」もセットでインストールする人も多いと思いますのでJetpackの機能をご紹介します。

実はこの「Jetpack」にもソーシャルボタン、シェアボタンの機能があるんです。あまり知らない人もいるかなと思って紹介したいと思います。

→ Jetpackのダウンロードはこちら

Jetpackの共有からオンにする

ワードプレスメニューから「Jetpack」→「設定」を選択すると以下のような設定画面になります。

上部に横メニューがあるので、「共有」メニューをクリックします。

・共有ボタン
・「いいね」ボタン

の項目があるので、この２つをオンにします。(デフォルトではオフになっています)　設定変更後に保存ボタンは押さなくても勝手に変更を保存してくれます。

メニューの「設定」に「共有」が現れます。クリックすると共有設定画面になります。

共有設定画面では、

• 表示するボタンの選択　→　使うSNSボタンを選びます
• ボタンのスタイル　→　テキスト、ボタン形式、オフィシャルボタンなど選びます
• 共有ラベル　→　デフォルトは共有になっています
• ボタンの表示　→　ボタンを表示するページの指定

利用可能なサービスはちょっと日本向けではないですね。変更しないでも、最初からTwitterとFacebookは有効化済みになっているので、この2つでもいいかもしれませんね。

テキストだけだと味気ないのでボタンスタイルをおすすめします。

プラグイン「Super Socializer」で設置する方法

Jetpackよりもおすすめのプラグイン「Super Socializer」をご紹介します。

「プラグイン」→「新規追加」から検索窓に「Super Socializer」を打ち込みます。スーパーマンのマークのようなロゴのプラグインをインストールして有効化します。

メニューからSocial Sharingを選択する

「Super Socializer」では、FacebookコメントなどのSNSの連携、SNSでのログイン(Google, Facebookなどのアカウントでログイン)、いいねボタンなど、シェアボタン以外にも機能があります。

Social Sharingが共有・シェアに該当します。ワードプレスでコミュニティサイトや会員サイトを作っている場合は、Social Login機能を使うとユーザーにとって便利なサイトになりますね^^

外観と使うサービスを選ぶ

• テーマ選択　→　SNSアイコンの色や形を設定します
• 標準インターフェース　→　記事の上下にあるような普通のシェアボタン設定
• フロートインターフェース　→　PCだったらサイド、スマホだったら下部にSNS表示

標準インターフェース

• 標準シェアのインターフェースを有効にする　→　使う場合チェックを入れる
• ターゲットURL　→　シェア先のURLを選びます。デフォルトで良いでしょう。
• タイトル　→　好きなタイトルをつけましょう！
• アイコンの再配置　→　アイコンをドラッグして並び替えることができます。
• 共有サービスを選択　→　必要なサービスを選んでいきます。公式ボタンとその他のSNSボタン一覧からチェックを入れて選びます

そして、めーっちゃくちゃあるSNSシェアボタンからチェックして選んでいきます。世の中にこんなにたくさんのSNSサービスってあったんだ、、って思いません？

このSuper Socializerプラグインがおすすめの理由は、LINE, Pocket, はてなブックマークあたりがあるところです。個人的には、Facebook、Twitter、Pocket、Line、Hatebu(はてな)があればいいんじゃないかな？って思っています。Pinterestも入れてもいいかもしれませんね。

表示させるSNSが揃ったら、表示場所について指定します。

• 水平配置　→　ボタンの左右の位置を選択します。
• コンテンツに対する位置　→　コンテンツの上か下に、あるいは両方をチェックします。
• 配置　→　シェアボタンを配置するページを選択します。
• シェア数を表示　→　そのまま
• シェア合計を表示　→　そのまま
• ‘その他’アイコンを表示　→　読者が選択できるようになります。

このLaptoprener.netでは以下のように表示させています。

スマートフォンだと以下のように表示されます。タイトルには「参考になったらシェアお願いします！」にして、水平位置は「右」、「コンテンツの下」に表示しています。

フロートインターフェース

フロートインターフェースも同様に設定していきます。フロートインターフェースはPCサイトだったらサイドに表示されます。

スマホだと以下のように一番下に固定で表示させることができます。当サイトでは、「水平フロートバーのレスポンシブ」にチェックをいれていませんので、スマホでの閲覧時には非表示にしています。(表示領域が狭くなるため)

まとめ：

もともとJetpackを利用していて、TwitterやFacebookだけで十分ならJetpackに備わっている共有機能で良いと思います。

HatebuやLINEのシェアもしたい場合は、「Super Socializer」をおすすめします。幸い日本語化されていますので困ることなく使うことができるでしょう。

国産の有名テーマならすでにシェア機能があると思いますのでそちらを利用されても良いでしょう。SNSでのログイン機能もあるので知っておいて損はないプラグインだと思います^^