渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:シェアボタンを画面横・画面下に固定する方法

f:id:ss17935:20190103211547j:plain

 

通常シェアボタンは、記事の上、下に設置されています。

これだと記事を読む前か読んだ後にしかシェアボタンは押されません。

私のブログもそんな感じです。↓

 

f:id:ss17935:20190103212644p:plain

 

普通は、記事を読む前にシェアボタンを押す人はいないと思います。

「もし、記事の途中で読むのをやめてしまったら...?」

もちろん途中で読むのをやめてしまった人がシェアボタンを押す確率は高くないでしょう。

ただ、それでも可能性があるのなら、そのチャンスを逃したくないですよね?

そんな事を考えていたら、いくつかのブログが気になりました。

 

「なんか、左側に縦型のシェアボタンがあって、スクロールしてもずっとある?」

 

これを私のブログにも採用したいと思い探したところ、見つけました。

またまた、オークニさんのブログ「オークニズム」です。

シェアボタンを画面横や画面下に固定/追従したいならAddThisがオススメ! - オークニズム

この通りにやらせて頂きました。

 

シェアボタンを作成する

この作業には「AddThis」を使います。

https://www.addthis.com/

これは結構昔からある SNS ボタンを作るサービスです。

(私が記事の上下に設置しているシェアボタンもこれで作りました。)

 

まずは AddThis のサイトへ行きます。

以下のような画面が出ますので、「Get started, it's free」をクリック。

 

f:id:ss17935:20190105094859p:plain

 

するとサインナップを要求してきます。

必要事項を入力して「Let's Get Started」をクリック。

 

f:id:ss17935:20190105095355p:plain

 

するとこんな画面が出ます。

今回は「Share Buttons」を選択。

 

f:id:ss17935:20190105095801p:plain

 

するとタイプを選択する画面に遷移します。

今回は画面左に固定したかったので左上の「Floating」を選択し、左下の「Continue」をクリック。

ちなみに、画面中央上の「Change Preview Size」で PC とスマホのプレビューを切り替える事ができます。

デフォルトでは、PC は左サイド、スマホは下になってます。

 

f:id:ss17935:20190105100301p:plain

 

すると SNS 選択の画面に切り替わります。

デフォルトから変更したい場合は「Selected by You」を選択します。

削除したいサービスは左側アイコンの ”x" で削除できます。

 

f:id:ss17935:20190105102621p:plain

 

新しくサービスを追加したい場合は「ADD MORE SERVICES」をクリックします。

すると SNS サービスの一覧が表示されます。

はてなとかまでカバーしてるのはすごいですね。

 

f:id:ss17935:20190108103314p:plain

 

対象の SNS を見つけたらクリックすると追加できます。

並び順は前の画面でドラッグ&ドロップで変更できます。

終了したら左下の「Activate Tool」をクリックします。

 

f:id:ss17935:20190108110020p:plain

 

画面が切り替わったら右上の「Get The Code」をクリックします。

私の場合、いくつかのボタンを作っているので複数表示されます。

初めての場合は「Floating」という名前でひとつだけ表示されると思います。

実はこれが悩みの種でした。

こういう画面が出るのですが...。

 

f:id:ss17935:20190108111335p:plain

 

下の方に、「Inline」とか「Floating」とか、過去に作ったボタンが複数表示されます。

今回作ったボタンもそこに加わるのかと思いきや、加わりません。

「Just Copy」のコードが今回作ったボタンのコードです。

 

シェアボタンを常に見える位置に配置する

あとは上記でできたコードをはてなブログにコピペするだけです。

 

f:id:ss17935:20190108112037p:plain

 

プレビュー画面で確認すると、ちゃんと表示されてました。

 

f:id:ss17935:20190108112259p:plain

 

ほとんど「AddThis」での作業だけで、非常に簡単です。

効果の程はわかりませんが、個人的には大満足のカスタマイズでした。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ