WordPressにシェアボタンを追加するプラグイン「AddToAny Share Buttons」

シェアボタン機能が付いていないテーマにシェアボタンを表示させるプラグイン「AddToAny Share Buttons」についてメモします。

カウント表示がFacebookでしかできないという不満点はありつつも、
・100種類以上のSNSボタンがある・日本語化されている(100%ではないですが…)・初心者でも使いやすいシンプルな設定画面・かつJava ScriptやCSSを書き込める柔軟性もある
…と、手軽に設置したい場合にはオススメのプラグインです。

AddToAny Share Buttons インストール方法

WordPressのダッシュボードから「プラグイン」→「新規追加」
→右上の検索バーに「AddToAny Share Buttons」と入力
→自動的に検索されるので、該当プラグインの「今すぐインストール」をクリック
※画像が見にくい場合はクリックで拡大します。


AddToAny Share Buttonsのインストール方法の画像2枚目です。

インストールが完了すると「今すぐインストール」ボタンが「有効化」ボタンに切り替わるので、「有効化」をクリックして完了です。

AddToAny Share Buttons 設定画面へ

AddToAny Share Buttonsの設定方法の画像1枚目です。

「有効化」ボタンをクリックすると自動的にこちらのページに移動するので、その場合は最初から③「設定」をクリックして設定画面に移動します。

通常はWordPressのダッシュボードから「プラグイン」→「インストール済みプラグイン」→「設定」の順にクリックします。
※ダッシュボードの「設定」から「AddToAny」をクリックしても設定画面に行けます。

AddToAny Share Buttons 必要最低限の設定項目

まずは、これだけ設定しておけば表示させたいSNSボタンを設置できるよー、という項目に絞って説明していきます。デフォルトのままで良いからとにかく時短したい方に。

AddToAny Share Buttonsの設定方法の画像2枚目です。

標準タブの「Share Buttons」と「ブックマークボタンの場所」の2カ所を設定するだけ!

Share Buttons

AddToAny Share Buttonsの設定方法の画像3枚目です。

「サービスの追加 / 削除」をクリックします。


AddToAny Share Buttonsの設定方法の画像4枚目です。

設置できるシェアボタンが表示されるので、表示したいシェアボタンをクリックします。そうすると四角で囲ってある部分に選択したシェアボタンが追加されます。

シェアボタンを削除したい時は、表示したいシェアボタンをクリックした時と同じように、削除したいシェアボタンをクリックします。 そうすると四角で囲ってある部分から選択したシェアボタンが削除されます。

*シェアされた数を表示させたい場合

投稿日現在はFacebookしかないのですが…

AddToAny Share Buttonsの設定方法の画像5枚目です。

シェアされた数が表示できるボタンには「▼」マークがついているのでクリックします。
→「Show count」にチェックを入れます。

*シェアボタンを並び替えたい場合

AddToAny Share Buttonsの設定方法の画像6枚目です。

例えば「pocket」アイコンをLINEアイコンの位置へ移動させるとすると…
アイコンの上にカーソルを持っていくと、カーソルが十字に変化するので、並び替えたい場所にドラッグ&ドロップします。

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

AddToAny Share Buttonsの設定方法の画像7枚目です。

シェアボタンの表示したい場所を選択します。
もし表示したくないページがあれば2行目以降のチェックを外します。(特にこだわりがなければデフォルトのままでOK)


設定が完了したら、下のほうにある「変更を保存」ボタンをクリックします。

AddToAny Share Buttonsの設定方法の画像8枚目です。

シェアボタンが表示されるようになりました!😊

AddToAny Share Buttons その他の設定

上記の設定さえしておけば、設置したいシェアボタンをブログに表示させることができますが、その他の機能についてもご紹介します。

標準タブ

Icon Style

アイコンをサイトのデザインに合わせてカスタマイズしたいときに利用します。

AddToAny Share Buttonsの設定方法の画像9枚目です。
  • pixels:アイコンのサイズを設定します
  • background :アイコンの背景色を設定します
    • Original :デフォルト設定
    • Transparent:透過設定
    • Custom :自由に色を設定
  • foreground :アイコンの文字色を設定します
    • Original :デフォルト設定
    • Transparent:透過設定
    • Custom :自由に色を設定
AddToAny Share Buttonsの設定方法の画像10枚目です。

試しにこのように設定してみました。殺風景なので派手に!(笑)

AddToAny Share Buttonsの設定方法の画像11枚目です。

実際に確認してみると~、こんな感じ。でかっ

ユニバーサルボタン

自身で設定したシェアボタン以外のアイコンも格納されているボタンです。

AddToAny Share Buttonsの設定方法の画像12枚目です。
  • 画像のURL:十字アイコンをオリジナルアイコンに変更したい場合は画像URLを指定します。
  • Text only: アイコンではなくテキストで表示させたい場合に任意の文字表示させます。
  • なし:ユニバーサルボタンを表示させたくない場合に設定します。
  • Show count:シェアされた回数を表示します。
    ただ…現状Facebookしかカウントされるアイコンがないことを鑑みると、Facebookのみのカウントになるような気もします。。。どうなんだろ。。。
AddToAny Share Buttonsの設定方法の画像13枚目です。

十字のアイコンの上にカーソルを持っていくと、このように表示されます。

シェア・ヘッダー

シェアボタンの上に表示される見出しです。

AddToAny Share Buttonsの設定方法の画像14枚目です。

何も表示させたくない場合は空白のままにします。

AddToAny Share Buttonsの設定方法の画像15枚目です。

試しにこのように入力してみました。www

AddToAny Share Buttonsの設定方法の画像16枚目です。

実際にはこのように表示されます。

メニューのオプション

AddToAny Share Buttonsの設定方法の画像17枚目です。

ユニバーサルボタンは十字アイコンの上にカーソルを持っていくと開くようになっていますが、こちらにチェックをいれることで、クリックしないと開かないようになります。

追加JavaScript / 追加CSS

AddToAny Share Buttonsの設定方法の画像18枚目です。

AddToAnyにJavaScript、CSSそれぞれ追加する場合に記入します。

Floatingタブ

スクロールした時にシェアボタンが追いかけてくるように設定できます。(=ブックマークボタン) 私はけっこうウザいなーと思ってしまうタイプなので設定していませんが、ユーザー側の意見としてはどちらが多数派なんだろうか…あったほうが便利と考えている人が多いなら、設置したい。

縦ボタン / ブックマークボタンの場所

AddToAny Share Buttonsの設定方法の画像19枚目です。

ブックマークボタンを表示させる位置を設定できます。非表示にするには「なし」を選択します。

縦ボタン / レスポンシブ化

AddToAny Share Buttonsの設定方法の画像20枚目です。
  • ①:画面の幅が何ピクセル以上で、ブックマークボタンを表示させるか指定します。デフォルトでは980ピクセル以上となっています。
  • ②:上から何ピクセル以上スクロールされたら、ブックマークボタンを表示させるか指定します。デフォルトでは100ピクセル以上となっています。
  • ③:下から何ピクセルまでブックマークボタンを非表示にするか指定します。デフォルトでは100ピクセルまでとなっています。

※常に表示させる場合はチェックを外します。①に関しては画面の幅が小さいとコンテンツが重なってしまうので、注意が必要です。

縦ボタン / その他の設定

AddToAny Share Buttonsの設定方法の画像21枚目です。
  • 位置、オフセット:縦横それぞれどの程度幅を開けてブックマークボタンを表示させるか指定します。
  • アイコンサイズ:表示させるアイコンの大きさを指定します。
  • Background :ブックマークボタンの背景色を指定します。デフォルトでは透過されていますが「Custom」を選択すると画像の通り色を指定できます。

横ボタン / ブックマークボタンの場所

AddToAny Share Buttonsの設定方法の画像22枚目です。

シェアボタンを表示させる位置を設定できます。非表示にするには「なし」を選択します。

横ボタン / レスポンシブ化

AddToAny Share Buttonsの設定方法の画像23枚目です。
  • ①:画面の幅が何ピクセル以下でブックマークボタンを表示させるか指定します。デフォルトでは981ピクセル以下となっています。縦と微妙に矛盾…?
  • ②:上から何ピクセル以上スクロールされたら、ブックマークボタンを表示させるか指定します。デフォルトでは100ピクセル以上となっています。
  • ③:下から何ピクセルまでブックマークボタンを非表示にするか指定します。デフォルトでは100ピクセルまでとなっています。

横ボタン / その他の設定

AddToAny Share Buttonsの設定方法の画像24枚目です。
  • 位置、オフセット:縦横それぞれどの程度幅を開けてブックマークボタンを表示させるか指定します。
  • アイコンサイズ:表示させるアイコンの大きさを指定します。
  • Background :ブックマークボタンの背景を指定します。デフォルトでは画像の通り透過されていますが「Custom」を選択すると色を指定できます。

シェアボタンをクリック後ポップアップ広告が表示されてお困りの方

ユーザービリティの観点から、訪問者がシェアボタンをクリックした際にポップアップ広告が表示されるのを回避したい場合は、標準タブで紹介した「追加JavaScript」にポップアップ広告を回避するJavaScriptを追加します。
参考サイト https://thiscalifornianlife.com/2018/12/26/addtoany-issue01/


この記事をシェアしますか?

コメントを残す

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

トラックバック URL

https://posiactive.com/addtoany-share-buttons/trackback/

PAGE TOP