AddToAny Share ButtonsでSNSシェアボタンをカンタン設置
![media, social media, apps](https://marucu.com/wp-content/uploads/2023/03/998990-710x472.jpg)
せっかくブログ記事を書くなら、SNSのお力も借りたいですよね。
SNSシェアボタンを設置するプラグインは数多くありますが、選定した基準は以下。
- 軽量であること
- カスタマイズが容易
- ある程度ダウンロード数がある
まず動作が重いとユーザビリティを損ないSEO的にも不利ですし、あまり高機能である必要はないですが、カスタマイズ性はある程度ほしいところです。
また、ダウンロード数が多いからといって必ずしも信頼できるとは限りませんが、多くのユーザーに使われている方が今後も更新される見込みは高いと言えます。
以上を考慮し、「AddToAny Share Buttons」に決定しました。
設定方法
まずプラグインをダウンロードします。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_dl.png)
続いて「設定」> 「AddToAny」から設定画面に移動します。
アイコンスタイルを設定
設定画面の一番上にある「アイコンスタイル」で表示するアイコンをデザインできます。アイコンの背景や色も自由に決められます。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_fn_icon-1.png)
アイコンのサイズ | 「24」と設定すると24×24ピクセルになります。 |
background | アイコンの背景色 Original→公式の色 Transparent→透明 Custom→色指定 |
foreground | アイコンの色 Original→公式の色 Transparent→透明 Custom→色指定 |
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_ex2.png)
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_ex1.png)
シェアボタンを設定
表示するシェアボタンを決めます。(一般的なサービスをほぼ網羅しています)
ドラッグ&ドロップで表示順も変更できます。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_fn_share_btn-1-710x383.png)
ユニバーサルボタンの設置
「ユニバーサルボタン」とは、AddToAny Share Buttonsで設置できる全てのボタンを「+」ボタンの中に隠して置ける機能です。先ほど設定した「シェアボタン」の右に表示されます。
デフォルトでは青い「+」になっていましたが、ちょっと表示がボケていたので「画像 URL:」から独自にデザインしたボタンをアップしました。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_fn_univ-710x220.png)
ブックマークボタンの場所を設定
SNSシェアボタンを配置する場所を設定します。記事ページのみに表示する場合は以下のように「投稿にボタンを表示」にチェックを入れます。
カスタム投稿タイプを設定している場合は、一番下にカスタム投稿タイプのチェックボックスが表示されます。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_fn_place-1.png)
追加でjavascript/cssを追加できる
JavascriptやCSSを追加して、スタイルや機能をカスタムすることができます。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_add_js_css.png)
CSSを追加してマージンを調整してみました。
ボタンの場所を「上部&下部」に設定している場合、上ボタンを.addtoany_content_top
下ボタンを.addtoany_content_bottom
でそれぞれにスタイルを付与することができます。.addtoany_content { text-align:right; }
でボタンが右揃えになります。
![](https://marucu.com/wp-content/uploads/2023/03/addtoany-share-buttons_add_css-710x262.png)
その他JSやCSSの追加オプションは公式ドキュメントをご覧ください。