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 |
| Google+ | google_plusone_share |
| はてぶ | hatena |
| 印刷 | |
| メール |
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のトラック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
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が一番好きです。夜のドライブには最適なアルバムです。
にその経緯が載っていますので興味がある方は閲読してみてください。
、
に詳細の説明がありますので、参考にしてください。上記のポートフォリオについても２冊に掲載されているサンプルをもとに作成しています。また
です。古いJazz歌手ですが、とても切なくこの歌を歌いあげます。ブルームーンでなくても月を見上げてこの曲を聴くと切なくなります。
