シェアボタン機能が付いていないテーマにシェアボタンを表示させるプラグイン「AddToAny Share Buttons」についてメモします。
カウント表示がFacebookでしかできないという不満点はありつつも、
・100種類以上のSNSボタンがある・日本語化されている(100%ではないですが…)・初心者でも使いやすいシンプルな設定画面・かつJava ScriptやCSSを書き込める柔軟性もある
…と、手軽に設置したい場合にはオススメのプラグインです。
WordPressのダッシュボードから「プラグイン」→「新規追加」
→右上の検索バーに「AddToAny Share Buttons」と入力
→自動的に検索されるので、該当プラグインの「今すぐインストール」をクリック
※画像が見にくい場合はクリックで拡大します。
インストールが完了すると「今すぐインストール」ボタンが「有効化」ボタンに切り替わるので、「有効化」をクリックして完了です。
「有効化」ボタンをクリックすると自動的にこちらのページに移動するので、その場合は最初から③「設定」をクリックして設定画面に移動します。
通常はWordPressのダッシュボードから「プラグイン」→「インストール済みプラグイン」→「設定」の順にクリックします。
※ダッシュボードの「設定」から「AddToAny」をクリックしても設定画面に行けます。
まずは、これだけ設定しておけば表示させたいSNSボタンを設置できるよー、という項目に絞って説明していきます。デフォルトのままで良いからとにかく時短したい方に。
標準タブの「Share Buttons」と「ブックマークボタンの場所」の2カ所を設定するだけ！
「サービスの追加 / 削除」をクリックします。
設置できるシェアボタンが表示されるので、表示したいシェアボタンをクリックします。そうすると四角で囲ってある部分に選択したシェアボタンが追加されます。
シェアボタンを削除したい時は、表示したいシェアボタンをクリックした時と同じように、削除したいシェアボタンをクリックします。 そうすると四角で囲ってある部分から選択したシェアボタンが削除されます。
＊シェアされた数を表示させたい場合
投稿日現在はFacebookしかないのですが…
シェアされた数が表示できるボタンには「▼」マークがついているのでクリックします。
→「Show count」にチェックを入れます。
＊シェアボタンを並び替えたい場合
例えば「pocket」アイコンをLINEアイコンの位置へ移動させるとすると…
アイコンの上にカーソルを持っていくと、カーソルが十字に変化するので、並び替えたい場所にドラッグ&ドロップします。
ブックマークボタンの場所
シェアボタンの表示したい場所を選択します。
もし表示したくないページがあれば2行目以降のチェックを外します。(特にこだわりがなければデフォルトのままでOK)
設定が完了したら、下のほうにある「変更を保存」ボタンをクリックします。
シェアボタンが表示されるようになりました！😊
上記の設定さえしておけば、設置したいシェアボタンをブログに表示させることができますが、その他の機能についてもご紹介します。
標準タブ
Icon Style
アイコンをサイトのデザインに合わせてカスタマイズしたいときに利用します。
- pixels：アイコンのサイズを設定します
- background ：アイコンの背景色を設定します
- Original ：デフォルト設定
- Transparent：透過設定
- Custom ：自由に色を設定
- foreground ：アイコンの文字色を設定します
- Original ：デフォルト設定
- Transparent：透過設定
- Custom ：自由に色を設定
試しにこのように設定してみました。殺風景なので派手に！(笑)
実際に確認してみると～、こんな感じ。でかっ
ユニバーサルボタン
自身で設定したシェアボタン以外のアイコンも格納されているボタンです。
- 画像のURL：十字アイコンをオリジナルアイコンに変更したい場合は画像URLを指定します。
- Text only： アイコンではなくテキストで表示させたい場合に任意の文字表示させます。
- なし：ユニバーサルボタンを表示させたくない場合に設定します。
- Show count：シェアされた回数を表示します。
ただ…現状Facebookしかカウントされるアイコンがないことを鑑みると、Facebookのみのカウントになるような気もします。。。どうなんだろ。。。
十字のアイコンの上にカーソルを持っていくと、このように表示されます。
シェア・ヘッダー
シェアボタンの上に表示される見出しです。
何も表示させたくない場合は空白のままにします。
試しにこのように入力してみました。www
実際にはこのように表示されます。
メニューのオプション
ユニバーサルボタンは十字アイコンの上にカーソルを持っていくと開くようになっていますが、こちらにチェックをいれることで、クリックしないと開かないようになります。
追加JavaScript / 追加CSS
AddToAnyにJavaScript、CSSそれぞれ追加する場合に記入します。
Floatingタブ
スクロールした時にシェアボタンが追いかけてくるように設定できます。(＝ブックマークボタン) 私はけっこうウザいなーと思ってしまうタイプなので設定していませんが、ユーザー側の意見としてはどちらが多数派なんだろうか…あったほうが便利と考えている人が多いなら、設置したい。
縦ボタン / ブックマークボタンの場所
ブックマークボタンを表示させる位置を設定できます。非表示にするには「なし」を選択します。
縦ボタン / レスポンシブ化
- ①：画面の幅が何ピクセル以上で、ブックマークボタンを表示させるか指定します。デフォルトでは980ピクセル以上となっています。
- ②：上から何ピクセル以上スクロールされたら、ブックマークボタンを表示させるか指定します。デフォルトでは100ピクセル以上となっています。
- ③：下から何ピクセルまでブックマークボタンを非表示にするか指定します。デフォルトでは100ピクセルまでとなっています。
※常に表示させる場合はチェックを外します。①に関しては画面の幅が小さいとコンテンツが重なってしまうので、注意が必要です。
縦ボタン / その他の設定
- 位置、オフセット：縦横それぞれどの程度幅を開けてブックマークボタンを表示させるか指定します。
- アイコンサイズ：表示させるアイコンの大きさを指定します。
- Background ：ブックマークボタンの背景色を指定します。デフォルトでは透過されていますが「Custom」を選択すると画像の通り色を指定できます。
横ボタン / ブックマークボタンの場所
シェアボタンを表示させる位置を設定できます。非表示にするには「なし」を選択します。
横ボタン / レスポンシブ化
- ①：画面の幅が何ピクセル以下でブックマークボタンを表示させるか指定します。デフォルトでは981ピクセル以下となっています。縦と微妙に矛盾…？
- ②：上から何ピクセル以上スクロールされたら、ブックマークボタンを表示させるか指定します。デフォルトでは100ピクセル以上となっています。
- ③：下から何ピクセルまでブックマークボタンを非表示にするか指定します。デフォルトでは100ピクセルまでとなっています。
横ボタン / その他の設定
- 位置、オフセット：縦横それぞれどの程度幅を開けてブックマークボタンを表示させるか指定します。
- アイコンサイズ：表示させるアイコンの大きさを指定します。
- Background ：ブックマークボタンの背景を指定します。デフォルトでは画像の通り透過されていますが「Custom」を選択すると色を指定できます。
シェアボタンをクリック後ポップアップ広告が表示されてお困りの方
ユーザービリティの観点から、訪問者がシェアボタンをクリックした際にポップアップ広告が表示されるのを回避したい場合は、標準タブで紹介した「追加JavaScript」にポップアップ広告を回避するJavaScriptを追加します。
参考サイト https://thiscalifornianlife.com/2018/12/26/addtoany-issue01/
この記事をシェアしますか？
トラックバック URL
https://posiactive.com/addtoany-share-buttons/trackback/