読者です 読者をやめる 読者になる 読者になる

MUTANT

SEOやブログマネタイズの手法を紹介しています。ブログを運営する上での役立つtipsを紹介していきます。

ブログにお洒落なシェアボタンを簡単に設置できる「Add this」を紹介するよ

f:id:mutant-tetsu:20161210192211j:plain

こんにちは、てつです。

 

実は最近、ブログのシェアボタンをこそっと変えていました。

 

はてなブログ純正のシェアボタンでもいいのですが、どうもデザインが気に入らず。(特にTwitterボタン)

 

なにか良いシェアボタンないかなーと探していたらいい感じのものがありましたので、今日はブログに簡単に設置でき、デザインもいい感じのシェアボタンを紹介をします。

 

AddThisがいい感じ

海外のツールですが、シェアボタンの設置やフォローボタン、A/Bテストを簡単に行えるAdd thisがいい感じに進化していました。

 

 

しかも、このサービスは海外発ですけど、なんとはてなボタンも設置できるんですよ!

これは本当にありがたい。

 

はてなブログはもちろん、Wordpressでブログを運営している人にもオススメのツールです。

 

AddThisの特徴を説明すると

  • コードのコピペ1発でオシャレなデザインのシェアボタンが設定できる
  • 配置やデザインを何度も簡単に変えることができる
  • シェアボタンのアクセス解析ができる

 

その他にもフォローボタンや関連記事の機能も付いていたりと、およそブログ運営・サイト運営に必要な機能は全て揃っているツールです。

 

今回はその中でも「シェアボタンの機能」にフォーカスして紹介していきます。

 

ブログにシェアボタンを設置してみる

今回は、はてなブログ用に紹介していきますがWordpressでも他サービスのブログでも方法は一緒です。

ざっくりした流れを説明すると、

  • bodyタグ内にAコードをコピペ
  • シェアボタンを表示させたい場所にBコードをコピペ

こんな感じです。それでは実際の画面を見ていきましょう。

 

www.addthis.com

まずは、AddThisの公式サイトへアクセスします。

画面中央にある「Get Started」からログインをします。

f:id:mutant-tetsu:20161210192325j:plain

  • メールアドレス
  • Twitterアカウント
  • Googleアカウント
  • Facebookアカウント

 

いずれかでサインアップできます。自分はGoogleアカウントでサインアップしました。

 

次の画面はこのようになっていると思います。

f:id:mutant-tetsu:20161210192404j:plain

こちらにメールアドレスを入力して、下部のRegisterを選択。この時にニュースレターがいらない人はチェック(Email me a monthly newsletter)を外しておきましょう。

 

ログインをすると、使用するツールを選択できるので「share buttons」を選択。

f:id:mutant-tetsu:20161210192509j:plain

 

ここからさっそくシェアボタンのデザインを決定していきます。

 

画面左側に設置できたりもしますが、今回はひとまずコンテンツ内に設置したいので「inline」を選択しましょう。

f:id:mutant-tetsu:20161210192557j:plain

 

次にカウンター(シェア数を表示するか)を選択しますが、ここではひとまず「total」を選択します。

f:id:mutant-tetsu:20161210192619j:plain

 

 

このようなデザインは後で何度でも簡単に変更できるので安心してください。ひとまず駆け足で設置していきます。

 

設置するボタンの種類も選択できます。「select your own」で自分の好きなボタンを追加したり不要なボタンを削除していきます。

f:id:mutant-tetsu:20161210192648j:plain

自分は今までの運営データを見て

  • Facebook
  • Twitter
  • Pocket
  • Google+
  • はてぶボタン

この5つにしました。ここもデザイン同様いつでも変更できるので各自好きなものを選択しましょう。

 

ボタンの種類を選択し終わったら、画面下部の青ボタン「Save&Continue」をクリック。

 

次の画面ではさっそくコードをコピーしていきます。「COPY」のボタンを押すことで、コードをコピーできます。

f:id:mutant-tetsu:20161210192814j:plain

 

これをはてなブログの管理画面で貼り付けるので、はてなブログの画面も立ち上げましょう。

 

管理画面>デザイン>カスタマイズ>フッタの箇所にペタリと貼り付けます。

f:id:mutant-tetsu:20161210192837j:plain

 

ちょうど、AddThisの画面②でも説明されていますね。

 

AddThis側で下の項目に行くと、画像のようなコードがありますのでこちらもコピー。

f:id:mutant-tetsu:20161210192933j:plain

 

これは、はてなブログの管理画面で記事の箇所に貼り付けます。

 

管理画面>デザイン>カスタマイズ>記事>記事上下のカスタマイズ

 

f:id:mutant-tetsu:20161210193000j:plain

自分は記事上・記事下両方に設置しましたが、こちらはお好みで。

 

記事下は読者がアクションを起こしやすい場所なので、記事下には必ず設置しましょう。

 

この時にはてなブログ側でデフォルトで設置している、ボタンのチェックは外しましょう。(はてなスターはそのままで)

 

さっそく、個別記事で見てみると・・・

 

問題なく設置されていますね。お疲れ様でした。

 

Wordpressの場合も公式サイトで詳しい説明がされていますが、説明に沿ってプラグインを入れるだけなので簡単に設置することができます。

 

ちなみにデザインやボタンの差し替えは同じ手順でデザインを変更することで反映されます。コードの張り替えは必要ありません。

 

すでに貼られたコードはそのままでデザインを変更することができます。

 

シェア数の計測もできる

AddThisが自分で設置するシェアボタンと違うのは、Googleアナリティクスのような計測機能も備えていることです。

 

SNS毎のシェア数の遷移なども「ANALYTICS」の項目で確認することができます。

f:id:mutant-tetsu:20161210193131j:plain

 

デザインも自由自在に変更できる

設置するボタンの種類はもちろん、シェアボタンの配置・デザインも簡単に変更することができます。

 

管理画面から上部の「TOOLS」を選択し、クリックしていきます。

例えば、Jumboはシェアボタンの合計数を表示してくれたり、

f:id:mutant-tetsu:20161210193156j:plain

 

「DESIGN」ではボタンの大きさや、角丸ボタンに変更したり

f:id:mutant-tetsu:20161210193213j:plain

 

カラーも変更できます。(任意のカラーはPRO版への移行が必要)

f:id:mutant-tetsu:20161210193231j:plain

まとめ

いかがでしたでしょうか。ブログに簡単にシェアボタンを設置できるツール「AddThis」を紹介しました。

 

ちなみに途中でAddThisに切り替えて既存のシェアボタンを非表示にしても、それまで蓄積されたシェア数が消えることはありません。

 

AddThisに切り替えた時からAddThisで設置したボタンの方にシェア数は蓄積されていきます。

 

シェアボタンは重要なパーツの1つです。既存のシェアボタンのデザインに飽きて来た人は一度試してみてはいかがでしょうか。それでは今日はこの辺で。

 

 

Copyright © 2016 MUTANT All rights reserved.