SEO・サイトの質問掲示板 >

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

Wordpress(ワードプレス)

このカスタマイズのポイント

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

無料で使える上、貼り付けるだけで使えるため、利用も簡単なツールです。

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

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

 

難易度

Lv.1 プラグインのみ
Lv2 CSSの操作が必要
Lv3 サーバーでの操作が必要
Lv4 FTPの操作が必要
Lv5 それ以上の難易度全て

 

サイドバーに追従するシェアボタン
改善前

WordPressテーマによってはサイドバーにSNSのシェアボタンがない状態です。

 

サイドバーに追従するシェアボタン
改善後

WordPressのシェアボタンがサイドバーに設置できます。合わせて、必要であればモバイルフッターにも追従形式で設置できます。当サイトでも適用しています(ただし当サイトのモバイルは、別の方法でリボルバーを適用しています。2020/04/07段階)。

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

 

こちらがモバイルです。

 

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

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タグの閉じタグ前がベストですが、今回は設定しやすさ重視でウィジェットに入れています。

 

これでおしまいだよ!サイドバーのシェアボタンは設置できたかな?もし、役に立ったらツイート、はてなブックマークしてくれると嬉しいな。

0

タイトルとURLをコピーしました