ガチャつくブログ

IT系のお勉強のために、やってみたことをアウトプットしていきます。

MENU

はてなブログで遊ぶ - シェアボタンをカスタマイズ -

はじめに

はてなブログを始めて、はやいものでもう2ヵ月。

現時点で記事数18(^^;。少なっ。

見た目の改善も少しづつ手を付けていこうと思ったので、シェアボタンのカスタマイズでも。

 

『AddThis』という無料のウェブサイトツールを使ってみます。

www.addthis.com

 

はてなブログ関連のまとめは以下。

tmt-tty.hatenablog.com

 

 

AddThisとは

共有ボタン以外にも、フォローボタンなど無料でウェブサイトツールを提供している。

Analitycsもできる様で、どれぐらいShareされたか、フォローされたかなど見れる模様。

まずは共有ボタンの作成から。

 

作成・設置

下記より、『はじめましょう、無料です』をクリックし、アカウント作成。

googleFacebookTwitterアカウントで作成も可能。

 

www.addthis.com

 

ツール選択画面で、"ShareButtons"をクリック。

f:id:tmt-tty:20181118232134p:plain

 

タイプ選択で今回は"Floating"を選択。

※上部で、PCとスマホ画面のプレビューが選択が可能。

選択ができたら"Continue"をクリック。

f:id:tmt-tty:20181118232445p:plain

 

詳細設定画面。

共有するサービスの選択画面。

自分で追加・削除・順番入れ替えなどカスタマイズ可能。

f:id:tmt-tty:20181118232657p:plain

 

デザイン画面。

サイズ、カラー、ラベルを設定可能。

f:id:tmt-tty:20181118232823p:plain

 

カウンター設定。

どのツールで何回シェアされているかというヤツですね。

f:id:tmt-tty:20181118232952p:plain

 

設置場所の設定。

PC、スマホでそれぞれ変更できます。

f:id:tmt-tty:20181118233109p:plain

 

共有ボタンを表示するページ、非表示にするページが設定できるようです。

また共有してもらった時のメッセージも設定できます。

すべての設定が完了したら、"Activate Tool"をクリックします。

f:id:tmt-tty:20181118233316p:plain

 

"Just Copy ..." に表示されているコードをコピーします。

f:id:tmt-tty:20181118233708p:plain

 

はてなブログの、

『デザイン』→『カスタマイズ』→ 『記事』→『記事下』にコピーしたコードを貼り付けます。

f:id:tmt-tty:20181118234056p:plain

 

動作確認

記事ページを確認してみます。

「PC版」

f:id:tmt-tty:20181118234321p:plain

 

スマホ版」

f:id:tmt-tty:20181118234439p:plain