SNSシェアボタンを設置する女性

ブログやホームページなど、WEBサイトの運営に必須とも言えるSNSのシェアボタン。
なるべく、簡単にオシャレに設置できたらよいですよね。

WordPress(ワードプレス)でサイト運営している方なら、複雑な設定をしなくても、『AddToAny Share Buttons』というプラグインを使用すれば、簡単に、SNSのシェアボタンが設置できます。

初心者でも、Facebook・Twitter・Google+・LINE・はてなブックマークなど、あらゆるソーシャルボタンを簡単にオシャレに設置可能です。

WordPressのブラグイン『AddToAny Share Buttons』を使用したSNSシェアボタンの設置方法をご紹介します。

プラグイン『AddToAny Share Buttons』をオススメする理由

WordPressには、SNSのシェアボタンを設置するのに、様々なプラグインがあります。

私も、設置するに当っては、プラグインを使用しないことも含め、様々な情報を収集しました。

でも、最終的には、『AddToAny Share Buttons』を使用するのが最適との判断しました。

その理由をご紹介します。

1.設置が簡単

まず、一つ目の理由は、『設置が簡単』です。

設定画面もわかりやすく、SNSのシェアボタンをどなたでも簡単に設置できます

2.種類が豊富

二つ目の理由は、『種類が豊富』です。

100種類以上のソーシャルボタンがあるため、自分が設置したいものを選び放題です

私は、SNSのシェアボタンの中で、代表的なFacebook・Twitter・Google+・LINE・はてなブックマークを設置したかったのですが、『AddToAny Share Buttons』には、すべて揃っていました。

FacebookとTwitterは、どのプラグインにもありますが、他のは、意外と揃いません。
特に、LINEや、はてなブックマークは、設定できるプラグインが限られます。

3.デザインがオシャレ(カスタマイズ可能)

三つ目の理由は、『デザインがオシャレ(カスタマイズ可能)』です。

見栄えも重要ですよね。
シェアボタンのデザインの良し悪しが、サイトのイメージにも影響します。

私は、スッキリとしたシンプルなもの、スタイリッシュなものが好きなので、そういう目線で、アイコンのみを表示できるプラグインを選択しました。

『WP Social Bookmarking Light』も、希望するシェアボタンがあるし、プラグイン制作者が日本人なので安心かなぁとも思いましたが、デザイン面で却下。

なお、『AddToAny Share Buttons』は、ボタンのサイズや色を自由にカスタマイズできるのも、いいですね。

以上3点が、『AddToAny Share Buttons』をオススメする理由です。

他にも、フローティング(浮遊)機能があるので、シェアボタンを画面上に常時表示させたいという方には、オススメです

個人的には、しつこい感じがしたので、フローティング機能は使用していません。

その変わり、記事上部と下部、ウィジェットの3ヶ所に表示しています。

好みの問題ですので、ご自身で検討されてみて下さい。

SNSシェアボタンの設置方法

では、『AddToAny Share Buttons』で、SNSのシェアボタンの設置する方法をご紹介します。

詳細に説明しますので、順を追って作業すれば、誰でもシェアボタンを設置可能かと思います。

では、実際に、シェアボタンの設置する作業に入りましょう。

1.『AddToAny Share Buttons』のインストール

では、まず、始めに、プラグイン『AddToAny Share Buttons』をインストールしましょう。

WordPressの「プラグイン」-「新規追加」を順にクリックし、『AddToAny Share Buttons』を検索しましょう。

プラグインが表示されたら、「今すぐインストール」をクリックしてください。

AddToAny Share Buttonsのインストール

インストールが終了したら、有効化ボタンが表示されます。「有効化」をクリックしましょう。

AddToAny Share Buttonsの有効化

以上で、インストールは完了です。

2.Standardの設定

次に、シェアボタンの設定をしていきます。

WordPressの「プラグイン」をクリックし、インストールされているプラグインの一覧にある『AddToAny Share Buttons』の「設定」をクリックします。

AddToAny Share Buttonsの設定

共有設定画面が表示されたら、Standardの設定画面で、アイコンのサイズと色を指定します。
特に変更しない場合は、このままでOKです。ちなみに、私は、特に変更を加えておりません。

アイコンの調整(デフォルト)

アイコンの調整

次は、表示するシェアボタンを選択します。「サービスの追加/削除」をクリックして下さい。

シェアボタンの選択

各ソーシャルボタンの一覧が表示されたら、表示したいソーシャルボタンをクリックすれば選択できます。削除したい場合もクリックで非選択にできます。

順番を変更したい場合は、一番上に表示されているアイコンをドラッグ&ドロップして動かすことができます。

ソーシャルボタン一覧

次は、ユニバーサルボタンの設定をします。
これを設置することで、サイトの訪問者の方でシェアしたいボタンを選択できます。

ユニバーサルボタンの表示形式は、アイコン、画像指定、テキストから選択可能です。
なお、表示をしないことも可能です。

また、カウント数を表示したい場合は、Show countにチェックを入れることで表示できます。

ユニバーサルボタンの設定

シェア・ヘッダーの設定では、シェアボタンの上に表示するタイトルを指定できます。
▼をクリックすると、文字を入力できますので、タイトルを表示したい方は入力してください。

シェアボタンのタイトルの入力

ブックマークボタンの場所の設定では、シェアボタンを表示したい場所を選択します。

デフォルトでは、すべてにチェックが入り、投稿の下部に表示されるようになっていますが、お好みに合わせて指定してください。

ちなみは、私は、投稿ページの上部&下部のみを選択しています。

シェアボタンの表示位置の設定

メニューのオプションは、適宜、ご指定下さい。特に、こだわりがなければ、操作は不要です。

変更を確定してもよい場合は、「変更を保存」をクリックして、Standardの設定は完了です。

Standard設定の変更を保存

3.Floatingの設定

次は、フローティング(浮遊)機能の設定です。

これにより、シェアボタンを画面に常時表示させることができます。

<縦ボタン>

縦ボタン表示イメージ

<横ボタン>

横ボタンの表示イメージ

フローティングを使用しない場合は、デフォルトのまま、操作は不要です。

フローティングを使用する場合は、「Floating」をクリックして、フローティングの設定画面を表示させましょう。

フローティングの設定画面の表示操作

設定画面が表示されたら、まず、縦並びのシェアボタンである縦ボタンの設定をします。

縦ボタンの設定

同様に、横並びのシェアボタンである横ボタンの設定をします。

横ボタンの設定

設定し終わったら、「変更を保存」をクリックすると、Floatingの設定は完了です。

4.ウィジェットの設定

『AddToAny Share Buttons』は、ウィジェットにも対応しており、サイドバーやフッターなどにも、シェアボタンを設置できます。サイドバーを事例に、その設定方法をご紹介します。

WordPressの「外観」-「ウィジェット」をクリックし、ウィジェットの設定画面を表示します。
すると、既に、「AddToAny Share」というウィジェットがあると思います。

AddToAny Share Buttonsのウィジェット

その「AddToAny Share」をドラッグして、Sidebarの表示したい位置に入れてください
タイトルおよびウィジェットのロジックは、必要により、ご使用ください。

サイドバーにAddToAny Shareを入れる

ちなみに、私は、タイトルに「シェア」と入れています。タイトルおよびウィジェットのロジックを入力した場合は、「保存」をクリックして保存させましょう。

サイドバーのシェアボタンのタイトルの入力

同様に、「AddToAny Follow」というウィジェットを使用すれば、フォローボタンも、サイドバーやフッターなどに設置できます。

設置したい場合は、表示したいソーシャルサービスのIDを入力して下さい。
タイトル、アイコンサイズ、ウィジェットのロジックは、必要により、ご使用ください。

サイドバーのフォローボタンの設定

参考までに、タイトルに「フォロー」、TwitterのIDを入力して、「保存」した場合、サイドバーには、このように表示されます。シェアボタンと同じアイコンが表示されるようです。

サイドバーのフォローボタンの表示

いかがでしょうか。無事に、完成したでしょうか。

なお、フォローボタンをシェアボタンと違う表示にしたい場合は、フォローボタンは、別途、ウィジェットのテキストを使用して設定した方がよいかと思います。

その方法については、「Twitterのフォローボタンをサイドバーに設置する方法」をご覧下さい。