デザインテンプレート販売中 >>

AddToAny Share Buttonsの設定と使い方|WordPressにシェアボタンを実装しよう

WordPressテーマによっては、TwitterやFacebookなどのシェアボタンがないテーマも存在します。

だかと言って、使い慣れたテーマを変更するのも大変ですよね。

そこで便利なのが、WordPressにシェアボタンを簡単に実装できるAddToAny Share Buttonsプラグインです。

AddToAny Share Buttonsでは100種類以上のボタンが予め用意されていますので、自分のお好みのシェアボタンを簡単にWordPressに設置することが可能です。

このページでは、そんなAddToAny Share Buttonsの設定と使い方を見ていきましょう。

当ブログのデザインをあなたのブログにも実装してみませんか?

  • 3月15日ついにリリース
  • デザイン2種を展開
  • 今すぐあなたのブログをオシャレに

WordPressにシェアボタンを実装しよう

AddToAny Share Buttonsを使えば、以下のようなシェアボタンが実装できます。

 

設置できるアイコンの種類も100種類以上あり、自分の好きなアイコンを好きな場所に設置できます。

 

それでは、早速WordPressにシェアボタンを設置していきましょう。

まずは、AddToAny Share Buttonsプラグインをインストール&有効化させます。

AddToAny Share Buttons

WordPressのプラグインのインストール方法|手動&FTPのやり方も解説
このページでは、WordPressのプラグインのインストール方法を紹介しています。 プラグインのインストールはWordPressを使っていく上で必須のスキルですので、是非この機会に色々なプラグインのインストール方法があることを覚えてお...

 

プラグインの有効化が完了したら、ダッシュボードのAddToAnyをクリックします。

 

標準Floatingという2つのメニューがありますので、それぞれの設定項目を見ていきましょう。

AddToAny Share Buttonsの設定/標準

アフィ
アフィ

まずは、標準の設定項目から見ていきましょう。

Icon Style

Icon Styleでは、アイコンのデザイン設定が行なえます。

  • アイコンのサイズ
  • アイコンの背景色
  • アイコンの色

を変更したい場合には、ここをカスタマイズしましょう。

Share Buttons

Share Buttonsでは、表示するアイコンの設定が行えます。

デフォルトで「Facebook」「Twitter」「メール」アイコンが表示されていますが、更にアイコンを追加したい場合にはサービスの追加/削除をクリックします。

 

100種類以上のアイコンが一覧表示されますので、この中から使用したいアイコンを選択しましょう。

 

アイコンの下にあるShow countにチェックを付けると、そのアイコンサービスでシェアされた回数が表示されるようになります。

ユニバーサルボタン

ユニバーサルボタンでは、メインのシェアボタン以外を表示するボタンデザインを変更することができます。

デフォルトだとユニバーサルボタンは青い「+」のアイコンとなっていますが、このアイコン自体を変更したい場合にはここでカスタマイズします。

 

ユニバーサルボタンをカスタマイズするにはをクリックします。

 

「+」アイコン以外のアイコンにしたい場合には、予めメディアに画像をアップロードして画像のパスを画像のURL:に入力します。

テキストリンクにしたい場合にはText only:にチェックを入れ、文言を設定します。

シェア・ヘッダー

シェア・ヘッダーは、シェアボタンの上に何かしらのタイトルを表示させたい場合に使用します。

 

ここに入力した文字がシェアボタンの上に表示されます。

例えば、入力したタイトルが表示されますと入力すれば画像のように表示されます。

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

ブックマークボタンの場所では、シェアボタンを設置する場所を設定します。

お好みの設置場所を指定するといいでしょう。

メニューのオプション

メニューのオプションは、ユニバーサルボタン内のアイコンをマウスホバーだけで表示するか、クリックして初めて表示するかを設定します。

メニューのオプションにチェックを付けることで、クリックしないとユニバーサルボタンのシェアボタンは表示されなくなります。

追加 JavaScript

追加 JavaScriptでは、AddToAny Share ButtonsプラグインにJavaScriptを追加する際にここにコードを記述します。

追加 CSS

追加 CSSでは、AddToAny Share ButtonsプラグインにCSSを追加する際にここにコードを記述します。

追加オプション

追加オプションでは、カスタムアイコンを使用する場合や、キャッシュの設定を行うことができます。

 


 

お好みの設定に変更できたら、変更を保存をクリックします。

変更を保存

AddToAny Share Buttonsの設定/Floating

アフィ
アフィ

次は、Floatingのタブに移ります。

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

ブックマークボタンの場所では、シェアボタンの位置を調整することができます。

 

例えば、左にドッキングを選択するとこのように画面の左側にシェアボタンが表示されるようになります。

 

お使いのテーマや設定によっては画像のように文字に被ることがあるので、ユーザービリティが低下しないように表示設定を行う必要があります。

レスポンシブ化

レスポンシブ化では、シェアボタンを表示する条件を指定します。

デフォルトでは980という値が設定されていますが、これは画面幅が980px以上の場合にシェアボタンを表示するという意味です。

 

0px指定にすることでどのような場合でもシェアボタンを表示することが可能となりますが、本文などのコンテンツと被りやすくなるので、ここも実際の画面を見ながら調整したほうがいいでしょう。

位置

位置では、シェアボタンの縦の位置を変更することができます。

 

縦の位置とは、画像のこの部分のことです。

オフセット

オフセットでは、シェアボタンの横の位置を変更することができます。

 

横の位置とは、画像のこの部分のことです。

アイコンサイズ

アイコンサイズでは、アイコンの大きさを調整することができます。

Background

Backgroundでは、シェアボタンの背景色を設定することができます。

 


 

お好みの設定に変更できたら、変更を保存をクリックします。

変更を保存

AddToAny Share Buttonsの使い方

AddToAny Share Buttonsプラグインは、ここまでの設定を完了させていれば自動でシェアボタンが表示されます。

WordPressの表示を確認してみてください。

指定した場所に、指定したシェアボタンが表示されているはずです。

アフィ

2017年8月にブログをスタート。
1つの特化型ブログで月間75万PVを達成し、現在では複数の特化型ブログから安定的に月収50万円以上の収入を確保しています。
詳しく

アフィをフォローする

当ブログのデザインをあなたのブログにも実装してみませんか?

  • 3月15日ついにリリース
  • デザイン2種を展開
  • 今すぐあなたのブログをオシャレに
プラグインの使い方
アフィをフォローする
アフィブログ

コメント