【汎用ブログパーツ】3分でSNSボタンを設置できる！簡単便利すぎるのでAddThisについてだけは書くよ

汎用ブログパーツについては、世の中にたくさんハウツー的なそれがあるかなと思っていたのですが（詳しくは昨日の記事参照）。
AddThisのシェアツールが新しいUIになってからというもの、ことBlogger向けの日本語で書かれた記事においては、それを見かけることができず。

というわけで、汎用ツールのうちAddThisだけは、防備録も兼ねて書いておいちゃおうと思います。


○AddThis (https://www.addthis.com/)

まず、上のURL又は画像リンクをクリックします。
そうすると、下のページに着陸します。

真ん中にある Get Started Free! か、右上の SIGN IN をクリックします。
すると、以下のページになります。

メールからアカウントを作ることもできますし、Googleやフェイスブック、ツイッターのアカウントで登録することもできます。
ちなみにこれ、アカウントの数に制限はありませんが、1アカウントで複数サイトにツールを設置できますので、基本的には1アカウントで必要十分かと思います。

ただし、何個かWEBサイトやブログを運営していて、個別に設定を変えたい場合には別々のアカウントを取った方が便利な場合もあります。
これについては、後述しますね。


続いて、シェアボタンの設定です。
まず下の画面から、設置したいボタンを選びます。

ご覧の通り、私は Sidebar Share Buttons と Inline Share Buttons を使用しています。
ちなみに、最下段の Expanding Share Buttons は有料アカウント用です。

で、それぞれの右側にある Settings 又は SETUP から設定画面に入ります。

いずれもプレビューを見ながらできますので、おそらく説明不要レベルでしょう。
というわけで、キャプチャした画像のみ載せておきます。

 Sidebar Share Buttons （サイドバー）の設定画面はこちら

 Inline Share Buttons （インライン）の設定画面はこちら

設定が終わったらいずれも、右下にある Update ボタンを押します。

すると、コードが表示された画面になります。
コードはこんな感じです。

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-****************"></script>

これを</head>の直前に貼り付けます。
****************のところには、各アカウントごとに割り振られた英数字が入ります。

サイドバーについては、これのみで実装完了。
超簡単、3分でできます。

あ、そうそう。
Bloggerの場合、テンプレート → HTMLの編集 → エディタ内をクリック → Ctrl+F → </head>と打ち込む → Enter でやると、設置すべき場所に最短で到着できます。
このCtrl+Fで検索は、たぶん他のブログでも使えると思います。
ブラウザのページ内検索もこれですもんね。


さて、話を戻しまして。
インラインについては、まず上の手順を済ませておき、それから以下のコードを表示させたい場所に直接貼ります。

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_share_toolbox"></div>

これを好きな位置に貼ります。
インラインについては、ここまでやって実装されます。

私は最下段のフッターにガジェットを配置してそこに貼りました。
Bloggerの場合、そのようにガジェット内に貼る方法が一番簡単です。
ちなみに、記事の下（記事フッターの上）に表示させたい場合は、<div class='post-footer'>の直前にこのコードを貼ります（Bloggerの場合）。
テンプレートが『シンプル』の場合、<div class='post-footer'>は2箇所ありますが、上にある方がモバイル用で下にある方がPC用になっていると思います（違ったらごめんなさい）。


と、そんなこんなでこのブログに実装されている、AddThisのシェアボタンツールが簡単に設置できるわけです。
このAddThisのデザイン、めっちゃクールで気に入っています。
車ばかりでなく、こういうWEBデザインのセンスも、海外の方が一枚も二枚も上手だな～って思いますね（個人的見解）

あと、昨日も書きましたが、AddThisのサポート対応はよいですよ。
私の拙い英文でも、迅速かつ丁寧に対応してくれましたし。
おかげで、先日のトラブル（同アカウントで他のブログを追加したら作動しなくなった）は、ほぼほぼ即日復旧でした。


そうそう。
先ほど触れた、複数アカウントの使い方ですが。

実は私、現在放置しているものの以前書いていたブログをまだ残していまして、そちらにもこのツールを導入したんですね。
ただ、あちらの放置ブログはもっぱら国内の方が見るものですが、こちらの適当ブログは少ないとは言え海外の方も見られており、そこでボタンの棲み分けをしたいなと考えたんですよね。
具体的には、こちらの適当ブログにはPocketを設置し、あちらの放置ブログにはmixiを設置したいなと。
とは言え、ボタンの数が多いのもカッコ悪いですし、余計なボタンは付けたくないという思いもあったり。

ですが、2アカウントであればその問題は解消できるわけで。
そんな使い方をすべく、2アカウント所有していたりします。


そんなこんなで、AddThisのSNSボタンのご紹介でした。
参考にされる方は、自己責任でお願いします。

んでは！