WordPressで超簡単にサイドバー追従のシェアボタンを作る方法

サイト・ブログで認知度を高めるために重要なシェアボタンのサイドバー追従ボタンを外部ツールを使って、簡単に表示する方法を紹介します。無料で使える上、貼り付けるだけで使えるため、利用も簡単なツールです。

適用イメージは以下の通りです。こちらがパソコンです。

こちらがモバイルです。

本カスタマイズの基本情報

項目基本情報
所要時間20分
ツール名add this
費用0円
効果シェアボタンの常時表示による拡散の促進。認知度アップ。

サイドバーに追従するシェアボタン
設定方法

add this公式ページへアクセスします。アクセス後「Get Started」を選択。

必要項目を入力します。上からEメール、パスワード、パスワード確認用、国、月間PV数です。

一番下のチェックを外しておくとプロモーションメールが送られてこないようになります。

シェアボタンを選択します。

一番上のフローティングを選択します。

次に自分の好きなシェアボタンを選びます。Selected by Youを選ぶことで選べるようになります。

シェアボタンを選ぶ場合は「ADD MORE SERVICES」から選びましょう。

以下は選んだ一例です。

モバイルもフローティングさせたい場合は、2つ目のタブからサイズ、カラーなどを変更します。組み合わせによりたくさんのパターンが選べるので自分の好きなようにチョイスしてください。以下の図の右上、モバイルとパソコンの切り替えボタンで表示を変えられます。

シェア数の表示が要らない場合は、3つめのタブから「None」を選びます。

モバイルのどちらにフローティングさせるか、モバイルで表示させるかを変更します。「On Mobile」をHideにすることで非表示にできます。

レスポンシブ表示でどこまでフローティングボタンを表示させるか決めます。以下はデフォルトです。WordPressテーマは1100~1200くらいの幅が多いので、この幅に合わせてコンテンツと重ならないようにしましょう(わからなければ、1160pxくらいを入れておきましょう)。

設定が完了したら、左下のボタンを押して完了します(以下は設定済みのためUpdate Toolになっていますが、初期設定ではActivate Toolになっています)。

出てきたコードをコピーします。

このままの状態でシェアボタンを押すとadd this用のトラッキングコードが付属してしまいます。そのためトラッキングコードを除去するスクリプトを追加します。add This公式サイトで配布されています。

このコードは上書きされてしまうため、元のadd thisコードの後ろに追加する形で書いて下さい。

<script type="text/javascript">
var addthis_config = addthis_config||{};
    addthis_config.data_track_addressbar = false;
    addthis_config.data_track_clickback = false;
</script>

この組み合わせたコードをウィジェットに貼り付けて終了です。以下の画像は元コード+トラッキングコード排除の組み合わせです。

最後にページを開いて確認しましょう。キャッシュが効いて表示されないことがあるので「Ctrl+F5」を押して更新してください。

本来はbodyタグの閉じタグ前がベストですが、今回は設定しやすさ重視でウィジェットに入れています。

コメント

コメントする