通常シェアボタンは、記事の上、下に設置されています。
これだと記事を読む前か読んだ後にしかシェアボタンは押されません。
私のブログもそんな感じです。↓
普通は、記事を読む前にシェアボタンを押す人はいないと思います。
「もし、記事の途中で読むのをやめてしまったら...?」
もちろん途中で読むのをやめてしまった人がシェアボタンを押す確率は高くないでしょう。
ただ、それでも可能性があるのなら、そのチャンスを逃したくないですよね？
そんな事を考えていたら、いくつかのブログが気になりました。
「なんか、左側に縦型のシェアボタンがあって、スクロールしてもずっとある？」
これを私のブログにも採用したいと思い探したところ、見つけました。
またまた、オークニさんのブログ「オークニズム」です。
シェアボタンを画面横や画面下に固定/追従したいならAddThisがオススメ！ - オークニズム
この通りにやらせて頂きました。
シェアボタンを作成する
この作業には「AddThis」を使います。
https://www.addthis.com/
これは結構昔からある SNS ボタンを作るサービスです。
（私が記事の上下に設置しているシェアボタンもこれで作りました。）
まずは AddThis のサイトへ行きます。
以下のような画面が出ますので、「Get started, it's free」をクリック。
するとサインナップを要求してきます。
必要事項を入力して「Let's Get Started」をクリック。
するとこんな画面が出ます。
今回は「Share Buttons」を選択。
するとタイプを選択する画面に遷移します。
今回は画面左に固定したかったので左上の「Floating」を選択し、左下の「Continue」をクリック。
ちなみに、画面中央上の「Change Preview Size」で PC とスマホのプレビューを切り替える事ができます。
デフォルトでは、PC は左サイド、スマホは下になってます。
すると SNS 選択の画面に切り替わります。
デフォルトから変更したい場合は「Selected by You」を選択します。
削除したいサービスは左側アイコンの ”x" で削除できます。
新しくサービスを追加したい場合は「ADD MORE SERVICES」をクリックします。
すると SNS サービスの一覧が表示されます。
はてなとかまでカバーしてるのはすごいですね。
対象の SNS を見つけたらクリックすると追加できます。
並び順は前の画面でドラッグ＆ドロップで変更できます。
終了したら左下の「Activate Tool」をクリックします。
画面が切り替わったら右上の「Get The Code」をクリックします。
私の場合、いくつかのボタンを作っているので複数表示されます。
初めての場合は「Floating」という名前でひとつだけ表示されると思います。
実はこれが悩みの種でした。
こういう画面が出るのですが...。
下の方に、「Inline」とか「Floating」とか、過去に作ったボタンが複数表示されます。
今回作ったボタンもそこに加わるのかと思いきや、加わりません。
「Just Copy」のコードが今回作ったボタンのコードです。
シェアボタンを常に見える位置に配置する
あとは上記でできたコードをはてなブログにコピペするだけです。
プレビュー画面で確認すると、ちゃんと表示されてました。
ほとんど「AddThis」での作業だけで、非常に簡単です。
効果の程はわかりませんが、個人的には大満足のカスタマイズでした。
↓ ランキングに参加しています。よろしければポチッとして下さい。
