WordPressでシェアボタンを設置するプラグイン「AddToAny Share Buttons」を使ってみる

FacebookやTwitterなどメジャーなものから、はてなブックマークやLINEなど日本でよく使われるものまで、100以上の種類のシェアボタンを設置できるプラグイン「AddToAny Share Buttons」を使ってみます。

インストール

管理画面でプラグイン > 新規追加 を選択して、右上の検索ボックスから「AddToAny Share Buttons」を調べます。
「AddToAny Share Buttons」が表示されるので、今すぐインストールをクリックします。

インストール完了後、有効化にすれば準備完了です。
デフォルトだと、投稿詳細ページに以下のように表示されるようです。

右の+ボタンは表示しているボタン以外でのシェアを行えます。

使い方

管理画面の設定 > AddToAny を選択します。
上部タブのStandardで基本的な設定、Floatingで固定表示の設定が行えます。

StandardのIcon Styleではアイコンのサイズと色の設定を行えます。

サイズは数値で指定、色は背景色(デフォルト/透過/カスタム)と前景色(デフォルト/カスタム)が指定できます。
例えば、サイズを16px、背景色を黒、前景色を白にしてみます。

変更を保存して表示を確認すると、以下のように白黒のボタンに変更できました。

Share Buttonsは表示するシェアボタンの追加・削除や並び替えができます。

追加できるボタンは以下のようにかなりあります。(記事作成時点で100種類)
下部にはFacebook、Twitter、Googleのデフォルトのボタンもあります。

試しに「はてなブックマーク」と「LINE」を追加してみます。
一覧から追加したいボタンをクリックすると追加されます。

変更を保存して表示を確認すると、以下のようにボタンを追加できました。

ユニバーサルボタンは表示しているシェアボタン以外を表示するボタンの設定になります。
設定はデフォルト/画像URL指定/テキストのみ/表示しないの4つと、オプションとしてカウントを表示するかどうかになります。

試しに「共有」のテキストでカウントを表示するようにしてみます。

変更を保存して表示を確認すると、以下のようになりました。

残りの設定の詳細な説明は省略しますが、シェア・ヘッダーはシェアボタンの上にテキストを追加、ブックマークボタンの場所はシェアボタンを配置するページと位置を指定、
メニューのオプションでオプションの設定、追加JavaScriptと追加CSSは名前の通りJavaScriptとCSSのコードを追加、
追加オプションはアイコンを独自の画像に変更したりできます。

もう一つのタブのFloatingは追従するボタンの設定を行えます。
縦ボタンは画面幅が広い時に表示、横ボタンは画面幅が狭い時に表示されます。

デフォルト以外の位置に出力したい場合

指定した位置にシェアボタンを出力したい場合、テンプレート内の出力したい場所に以下のように記述します。

PHP

<?php if ( function_exists( 'ADDTOANY_SHARE_SAVE_KIT' ) ) { ADDTOANY_SHARE_SAVE_KIT(); } ?>

公式のQ&Aにも記載がありますが、ADDTOANY_SHARE_SAVE_KIT()は引数でオプションを設定できます。
例えば、シェアするURLやタイトルを現在のページ以外にしたい場合、以下のようにします。

PHP

<?php if ( function_exists( 'ADDTOANY_SHARE_SAVE_KIT' ) ) { 
    ADDTOANY_SHARE_SAVE_KIT( array( 
        'linkname' => 'ダミータイトル',
        'linkurl'  => 'https://www.example.com/',
    ) );
} ?>

表示するボタンを変更したい場合、以下のように配列形式で指定できます。

PHP

<?php if ( function_exists( 'ADDTOANY_SHARE_SAVE_KIT' ) ) { 
    ADDTOANY_SHARE_SAVE_KIT( array( 
        'buttons' => array( 'facebook', 'twitter', 'line' ),
    ) );
} ?>

指定する名称はこちらでご確認ください。
　

もしくは、ショートコードが用意されているようなのでそちらでも出力できます。
出力したい場所に以下のように記述します。

PHP

<?php echo do_shortcode('[addtoany]'); ?>

先ほどと同じく、ショートコードにもオプションが用意されています。
シェアするURLとタイトルを現在のページ以外にしたい場合、以下のように指定します。

PHP

<?php echo do_shortcode('[addtoany url="https://www.example.com/" title="ダミータイトル"]'); ?>

表示するシェアボタンを変更する場合、コンマ区切りで以下のように指定します。

PHP

<?php echo do_shortcode('[addtoany buttons="facebook,twitter"]'); ?>

【参考サイト】

• Custom WordPress Share Buttons & Sharing Menu Examples & Documentation – AddToAny