AddToAny Share Buttonsのシェアボタンを好きな場所に設置する方法

WordPressでシェアボタンを導入するには大きく「自作」「プラグイン」の2つの選択肢があります。この記事ではそれぞれの特徴と、プラグイン「AddToAny Share Buttons」を使った設定について説明します。

シェアボタンの導入方法

自作

自作でPHPファイルを用いて用意したり、ブロックエディタの「ソーシャルアイコン」機能を使って作ることができます。

メリット「自由度が高い」

1から自分で作る分、自由度が高いです。

デメリット「作るのが大変」

メリットは、デメリットにもなり得ます。自分でアイコンを用意したり、リンク先を指定したり…とどうしても手間がかかります。アイコンも用意するだけではなく、サイズを揃えたりしなければなりません。

プラグインを導入

メリット「簡単」

PHPに詳しくない人でも簡単に導入ができます。表示するプラットフォームの変更も容易です。表示したいボタンを選択するだけで、それぞれのリンク先も、リンクに用いる情報も用意してくれる、まさにいたせりつくせりです。

デメリット「自由度が低い」

デザインの変更ができなかったり、設置場所が限定されていたりと自由度の低さというデメリットも存在します。

今回わたしがプラグインを導入する選択をとったのは「font aweesome 5 freeでははてなブログのアイコンがなかったから」です。もしプラグインで不自由さを感じたとしたら、自作しようと決めてプラグインを導入しました。

AddToAny Share Buttonsの設定

プラグインのインストール&有効化

検索フォームに「AddToAny Share Buttons」と入力して検索し、当該プラグイン右上の「今すぐインストール」ボタンを押します。インストールされた後は「有効化」ボタンに変わりますのでクリックします。

表示したいボタンの設定

「設定→AddToAny」を選択します。

共有設定からシェアボタンの設定が可能です。

表示場所の設定

「ブックマークボタンの場所」から表示する位置を選択できます。選択後は「変更を保存」ボタンを押すのを忘れずに。

AddToAny Share Buttonsを好きな場所に設置する方法

ショートコードを利用する方法

公式サイトのFAQに、以下のショートコードの記載があります。

[addtoany]

このショートコードをショートコードブロックを使って好きな場所に入力すると、先ほど設定したシェアボタンが好きな場所に表示されます。FAQを読んでいただくとわかりますが、カスタマイズも可能です。

PHPファイルに入力する方法

公式サイトのFAQによると以下の関数が用意されています。

ADDTOANY_SHARE_SAVE_KIT();

こちらも引数を指定することで「表示するボタンを設定」したり「情報を設定」したりできます。

ただこのまま表示したい場所に記載すると、プラグインをアンインストールした場合や何らかの不具合が起きた場合にエラーがでるとページの表示に支障をきたす恐れがあるため、

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

「関数が存在する場合のみ表示」するようにワンクッション置くと安心です。

<?php 
if ( function_exists( 'ADDTOANY_SHARE_SAVE_KIT' ) ) { ?>
    <div class="share">
        <p class="share-title">SHARE</p>
        <?php ADDTOANY_SHARE_SAVE_KIT(); ?>
    </div>
<?php } ?>

私の場合はこのようにシェアボタンのエリア自体を条件の中に組み込んで使用しています。こうすることで、関数にエラーが生じたとき「SHARE」という文字だけが残ってしまう、という事態を防ぐことができます。

以上の方法により満足いく形でシェアアイコンの設定ができたので、自作には至りませんでした。ショートコードや関数を用意してくれていることにより、自由度はかなり高く、希望に沿った設定ができると思います。

自作と悩んでいる方がいたら、一度試してみる価値はあるのではないでしょうか。