【WordPress】SNSボタンを簡単に付けれるAddToAny Share Buttonsのインストールと設定方法

様々なサイトでよく見かけるSNSのシェアボタン。
これはプログラムを追加して設置するものですが、ワードプレスの場合プラグインを使用するだけで簡単に設置することができます。

SNSのシェアボタンのプラグインは複数あり、中でもオススメなプラグインが『AddToAny Share Buttons』です。
AddToAny Share Buttonsはオススメな点は対応するSNSも多く、日本語化されているため分かりやすいというところです。
この他にも画面サイドにフローティングする設定などができることもポイントの一つです。

そこでこの記事ではAddToAny Share Buttonsのインストールと設定に関してお伝えしていきます。




AddToAny Share Buttonsのインストール

まずはAddToAny Share Buttonsをワードプレスにインストールの手順通りに行っていきます。

インストールの手順
❶管理画面から『プラグイン』の『新規追加』へ移動。
❷キーワードで『AddToAny Share Buttons』を検索。
❸検索後『今すぐインストール』をクリック。
❹インストール後『有効化』をクリック。

これでAddToAny Share Buttonsが使用できるようになりました。

AddToAny Share Buttonsの設定

有効化したらワードプレスの管理画面の『設定』から『AddToAny』をクリックし設定を行います。
この記事ではより簡単に設定ができるように、重要な部分のみの設定を解説します。

Standard


まずは一般設定から行っていきます。

〈Icon Style〉

Icon Styleではアイコンの大きさをピクセル単位で変更することができます。
初期状態では32pixelsとなっていますが、このまま使用しても問題のない大きさです。
この他にもbackground(アイコンの背景色)とforeground(アイコンのマーク色)の設定をすることもできます。

〈各項目の意味〉

Original 既存の背景色
Transparent 透明色
Custom 指定した色

〈Share Buttons〉

Share Buttonsではメインとなるボタンを設定します。
サービスの追加/削除のボタンをおすことで使用するアイコンを選択できます。
この記事では『Facebook』『Twitter』『Google+』『LINE』『はてブ』を選択しました。

〈ユニバーサルボタン〉

メインボタン以外のアイコンを表示させるための設定です。
様々なSNSに対応させたい方は一番上にチェックを入れておけばOKですが、この記事では不要な動作を入れないために『なし』にチェックを入れてユニバーサルボタンは外しています。

〈シェア・ヘッダー〉

シェア・ヘッダーではSNSアイコンの上に一言入れたい場合に使用することができます。
これを指定することで、入力した文字がアイコンの上に表示されます。

〈ブックマークボタンの場所〉

ここではSNSアイコンを表示する条件を指定します。
この記事では投稿の表示を『上部&下部』に変更し、この下の3つの項目のチェックを外しています。
(フロントページの「続きを読む」の後にまでアイコンがついてしまうのが、チェックを外した理由です。)

〈メニューのオプション〉

ここではユニバーサルボタンを設置している場合の、表示方法の設定が行えます。
マウスオーバーで表示されるのか、クリックして表示されるのかという設定です。
クリックして表示させたい場合はチェックを入れておいて下さい。

Floating

別のタブのフローティング設定は、画面上に浮遊するアイコンの設定です。
必要な場合はボタンの表示方法を選んでチェックをすることで表示されるようになります。

この記事では縦ボタンを例にして、各設定を解説していきます。

〈レスポンシブ化〉

設定したフローティングボタンの表示条件を設定します。
表示している画面が〇〇ピクセル以上の場合に表示するという設定となります。

〈位置〉

ボタンの表示位置です。
縦からどのくらいの位置に設置するかを設定します。
(横ボタンの場合は横の位置の指定となります。)

〈オフセット〉

これもボタンの表示位置の設定です。
これは横位置の設定となるため、壁からどれくらいの位置に設置するかを指定することができます。
(横ボタンの場合は縦位置の指定となります。)

〈アイコンサイズ〉

アイコンのサイズを指定できます。

〈background〉

背景色を指定することができます。
初期では透明色(Transparent)となっており、カスタムを選択することで背景に色を付けることができます。

これでAddToAny Share Buttonsの設定は完了です。

今回の記事で一通りの解説はしましたが、この中でも使用する設定は個々のサイトの構成によって異なってくると思います。
必要な設定を見極めて、サイトにあったSNSボタンを設置してみて下さい。


コメントを残す

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

CAPTCHA