AddThisボタンをカスタマイズ

AddThisとは

AddThisとは、様々なソーシャルネットワークやブックマークボタンをサイトやブログに簡単に設置できるサービスです。現時点では336ものサービスに対応しています。海外のサービスなのでmixi Yahoo!Japan Livedoor など日本のサービスには対応していませんが、「はてなブックマーク」はあります。日本でよく使われているサービス（Facebook, Twitter, Tumblr, Instapaper, Pocket, Evernote）は対応されていますし、印刷ボタンやメール送信ボタンも追加できるので、十分使えるサービスだと思います。

AddThisボタンをブログやサイトに追加する

AddThisサイトからGet The Code For Your Site!をクリックします。

AddThis Site

登録を促されますが登録しなくてもボタンの設置はできますので、右上部の×でRegisterの画面を閉じます。

登録は不要！

BloggerにAddThisボタンを追加する

登録は簡単です。WordPress、Bloggerなど幾つかのサービスは、専用のコードを生成してくれます。Bloggerの場合は、専用のウィジェットを作成してくれます。ボタンの表示スタイルは４種類ありますが、32×32px、16×16pxのアイコンを選択した場合は、デフォルトでは閲覧者側のAddThisの設定によって表示されるアイコンが変わってきます。

AddThisボタンの種類

Bloggerを選択して、32×32pxのアイコン表示を選んで『Install Blogger Widget』をクリックします。

Bloggerに追加

取り敢えず、ここではデフォルト設定のままで『ウィジェットを追加』をクリックします。

Bloggerのレイアウト画面

右側上部のHTML/JavaScriptがAddThisのコードになります。この位置に追加されても実体は別な場所に表示されるので問題ありません。逆にサイドガジェットにないと正しく動作しません。

ブログの表示

下記が32×32pxのAddThisボタンで、デフォルトではフッター位置に表示されます。左からBlogger, Twitter, Facebook, ブックマーク, AddThisのツールボックスとなっていますが、これは表示する環境等によって異なるようです。

AddThis 32x32 デフォルト表示

AddThisのカスタマイズ

AddThisのカスタマイズ方法について調べてみました。Bloggerの場合は、レイアウトから追加されたガジェットの右下にある「編集」をクリックしてコードを編集します。

AddThisウィジェットの変更

AddThisツールボックスのカウントを消す

AddThisのツールボックス右側にバブル表示でAddThisの利用回数（カウンター）が表示されています。折角シンプルなアイコン表示を選択したので、このカウンターを表示しないようにします。

下記のコードを探して削除します。

<a class='addthis_counter addthis_bubble_style'></a>

※Bloggerの場合は”（ダブルクォート）ではなく’（シングルクォート）で囲みます。

これでAddThisのカウンター表示がなくなりました。

カウンター表示を削除したAddThisボタン

AddThisのアイコン（サービス）を変更

AddThisボタンに表示される共有サービスを変更するには、下記のaddthis_button_xxxのxxx部をサービス名にします。

<a class='addthis_button_preferred_1'></a>
<a class='addthis_button_preferred_2'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_4'></a>

※Bloggerの場合は”（ダブルクォート）ではなく’（シングルクォート）で囲みます。

Twitterボタンを利用する場合は、addthis_button_twitterとなります。下記は代表的サービスのサンプルになります。またサービスアイコンの表示数は初期値は４個に設定されていますが、個数に制限はなく１つでも10個でも設定可能です。AddThisのツールボックスを削除することも可能です。

Service Code

name	code
Twitter	twitter
Facebook	facebook
Google+	google_plusone_share
はてぶ	hatena
印刷	print
メール	email

Google+1はgoogle_plusoneを使用するとカウンター付きとなってしまうので google_plusone_share を使います。利用可能なサービスとサービスコードの詳細については、Service Codesに記載されているので参照してください。

ボタンの間にセパレータ入れる

下記のコードを使って各ボタンの間にセパレータをいれることができます。

<span class='addthis_separator'>|</span>

※Bloggerの場合は”（ダブルクォート）ではなく’（シングルクォート）で囲みます。

Pocket (Formerly Read It Later)と印刷ボタンの間にセパレータを入れるには下記のように記述します。”|”を区切り文字としていますが、区切り文字がなくても構いません。

<a class='addthis_button_readitlater'></a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_print'></a>

※Bloggerの場合は”（ダブルクォート）ではなく’（シングルクォート）で囲みます。

できあがったカスタマイズしたAddThisボタンの例は下記になります。

カスタマイズしたAddThisボタン

AddThisのトラックIDを削除

AddThisボタンで共有するとURLの後ろにクリック・トラッキング用のパラメータが付与されます。下記はTweetした例ですが、http://walking-elephant.blogspot.jp/2011/11/blog-post.htmlの#以降（#.UFCxpFQAm6Q.twitter）がクリック・トラッキング用のパラメータとなります。

Click Tracking のパラメータが付与されているURL

詳細はClick Trackingに記載されています。AddThisの利用状況をトラッキングする パラメータでSEOにも影響がないとありますが、自分のURLの後ろにパラメータが付いているのも気持ち悪いのでクリック・トラッキング用のパラメータが表示されないようにします。下記のコードを追加すれば、URLの後ろにパラメータが付かずにクリック・トラッキングされないとあります。

<script type="text/javascript"> 
var addthis_config = {
     data_track_clickback: false 
} 
</script>

Bloggerのウィジェットに追加する場合は、document.doAT=function(cl)の直前に追加します。

<script type='text/javascript'>
var addthis_config={data_track_clickback:false};
document.doAT = function(cl)
{

これで、下記のようにクリック・トラッキング用のパラメータがURLに付加されなくなります。

Click Tracking 用のパラメータが削除された

AddThisボタンを右寄せ表示に変更

AddThisボタンの表示はデフォルトでは左寄せですが、右寄せにすることもできます。AddThisのオプションというよりは、CSSやhtmlコーディングと同じです。まず下記のコードを見つけてください。

var at = <div class='addthis_toolbox  addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'>

右寄せ表示を追加します。

var at = <div style='float: right;'><div class='addthis_toolbox  addthis_default_style addthis_32x32_style' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'>

DIVステートメントを閉じるのを忘れないようにしてください。div class='addthis_toolbox'のDIVステートメントが閉じられている後ろに追加します。

</div></div>";

AddThisボタンの表示位置を変更（Blogger）

Blogger用のウィジェットでAddThisを追加した場合、AddThisボタンはブログのフッターに追加されます。フッターに表示されるのは下記のコードがあるためです。赤字の部分を変更することによって表示する場所を変更することができます。

var myPostContent = new RegExp('post-footer');

1．post-header
2．post-body

3．post-footer

その他変更

Customizing AddThis にその他色々とカスタマイズ方法について記載されていますので、色々と試してみてください。

今日の一曲

Add This について説明したので、今日の一曲はその名もずばりGus GusのAdd This Songです。色々なミックスバージョンを集めたAdd This Songというアルバムというのがあります。ネットラジオで Add This Song (Gluteus Maximus Mix）が流れていて、久しぶりに所謂UKエレクトリックミュージックを聴き、iTunesで購入してしまいました。

個人的にはAdd This Song (Klovn Mix) - Add This Songが一番好きです。夜のドライブには最適なアルバムです。