AddToAny Share Buttonsで簡単！
WordPressにSNSボタンを設置する方法
WordPressでSNSシェアボタンを設置したいと考えている方は多いと思いますが、LINEのシェアが高い日本では、AddToAny Share Buttonsというプラグインを利用するのがベストな方法だと言えます。10分以内でSNSシェアボタンを設置することができます。
AddToAny Share Buttonsのメリット・デメリット
メリット
- LINE、はてなブックマークのシェアボタンも用意されている。
- ページ上部、下部に設置するボタンとフローティングボタンを選べる
- 設定が簡単
デメリット
- デフォルトではアイコンのデザインが一つしかない
日本においてはLINEは外すことができないSNSなので、デフォルトでLINEボタンがあるAddToAny Share Buttonsはファーストチョイスだと思います。
Twitter、Facebookをはじめとして100種類以上のシェアボタンが用意されていて、プラグインの設定から置きたいSNSボタンを選ぶだけで簡単に設置できます。LINEの公式サイトに行ってボタンを取得なんてことをする必要はありません。
ページ内に設置するボタン、フローティングボタンのいずれか一方でもその両方でも設置可能です。また設置位置も細かく設定することができます。
デフォルトのアイコンのデザインは角丸の1タイプしかありませんが、自作のアイコンを利用することもできます。
AddToAny Share Buttonsの設定方法
１．準備
まずはインストール。プラグインの検索からAddToAny Share Buttonsを検索してインストールを行い、「有効化」します。
次に 「プラグイン」の一覧からAddToAny Share Buttonsの「設定」をクリックします。
２．設定
ページ内設置ボタン
設定ページ上部の「Standard」タブがページ内に設置するボタンの設定です。
主な設定項目は下記の通りです。
| アイコンスタイル | アイコンの大きさ、背景や前面の色を設定することができます。前面の色を変更すると、アイコンの中の白い部分の色が変わります。例えば赤にするとTwitterの鳥が赤くなります。使う人いるのでしょうか？ |
| シェアボタン | 設置するSNSボタンの選択です。追加・削除・順番の入れ替えが可能です。 |
| ユニバーサルボタン | 常に表示しているボタン以外に、ボタンを格納できるボタンを設置できます。＋ボタンをクリックするとさらに10種類のシェアボタンが出てくるというイメージです。あまり使われるような気はしません。「なし」に設定できます。 |
| シェア・ヘッダー | これを設定するとシェアボタンの上に「気に入ったらシェアをお願いします！」みたいな文章を入れることができます。デフォルトはオフで、入力欄に「share this:」と薄く表示されているのはオフの状態です。 |
| ブックマークの場所 | 投稿の上部や下部など、どこに入れるかを設定します。 |
メニューオプション以降の設定は、わからなければ触る必要はありません。
なお、追加オプションの項目でオリジナルのSNSアイコンを設置できるようになっています。
フローティングボタン
設定ページ上部の「Floating」タブを選択して設定します。
「縦ボタン」とはその名の通りボタンが縦にならんだもので、デフォルトではPCでの使用が想定されています。「横ボタン」は横並びボタンでデフォルトではスマホでの使用が想定されています。「レスポンシブ化」の設定とでPCとスマホで縦横違うボタンを表示させることができます。
縦ボタンと横ボタンで同じ項目をそれぞれに設定することができます。
| ブックマークの場所 | シェアボタンの位置の設定。「なし」にもできます。 |
| レスポンシブ化 | 画面の解像度やスクロールの状況に応じたシェアボタンの表示/非表示の設定です。 解像度に応じてフローティングボタンをどう表示させるかを設定します。 |
| 位置/オフセット | 画面に対してどの位置にシェアボタンを設置するかを設定します。 |
| アイコンサイズ | シェアボタンのサイズ設定ですが、横ボタンでシェアボタンが4つある場合、36px以上だと表示が2行になってしまいます。 |
| 背景 | シェアボタンの背景色を透明か任意の色か設定できます。テキストの上に重なって見にくくなるのであれば背景を白（Customから白を選択）に設定するといいでしょう。 |
３．反映
最後に「変更を保存」ボタンをクリックすると全ページに反映されます。このように一気に全ページに反映できるのがWordPressのいいところですね。
