ShareButton/AddThis のバックアップ(No.3)

Top > ShareButton > AddThis

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
ShareButton/AddThis へ行く。
- 1 (2011-09-02 (金) 21:45:34)
- 2 (2011-09-02 (金) 21:59:39)
- 3 (2011-09-03 (土) 03:08:52)
- 4 (2011-09-05 (月) 01:38:41)
- 5 (2011-09-06 (火) 03:31:26)

AddThisボタンを表示する

AddThisボタンを表示する †

AddThisを利用すれば、世界中にある数々のソーシャルブックマークへの登録リンクを自分のサイトに簡単にまとめて設置できます。

▲ ▼

最も基本的なコード †

基本的なコードは、「AddThis - Help - Default Code」で説明されています。それは、以下のようなものです。

<!-- ADDTHIS BUTTON BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END -->

このコードでは、以下のようなボタンが表示されます。

ボタンの上にマウスポインタを乗せると、次のようなメニューが表示されます。

▲ ▼

ボタンを設置する基本的なコード †

「AddThis - Get Your Button」では、ボタンのカスタマイズなどを行い、コードを取得できます。このページはユーザー登録しないと表示できないようですが、コードはユーザー登録しなくても使用できるようです。

優先順位の高い4つのボタン（ユーザーに従って自動的に決定される）と、AddThisボタン（マウスポインタを乗せるとメニューが表示される）と、AddThisのカウンタを表示するコードは、以下のようなものです。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<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>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->

「<div class="addthis_toolbox addthis_default_style">」は、16x16ピクセルのボタンを並べて表示するという意味です。32x32ピクセルのボタンにするには、「<div class="addthis_toolbox addthis_default_style addthis_32x32_style">」とします。さらに自分で用意した画像を使う方法は、「AddThis - Help - AddThis Toolbox」の「Custom Images」にあります。

「<a class="addthis_button_preferred_1"></a>」の「preferred_1」の部分が、優先順位の一番高いサービスという意味になります。「preferred_2」が2番目で、「preferred_3」が3番目です。

指定したサービスのボタンを表示することもできます。例えば「はてな」のボタンを設置するならば、「addthis_button_」の後に「hatena」を付けて、「addthis_button_hatena」とします。このようにして表示できるサービスの一覧は、「AddThis - Service Directory - Service Codes」にあります。

「<a class="addthis_button_compact"></a>」というのは、小さなAddThisボタンを意味します。もし「addthis_button_compact」を「addthis_button_expanded」にすると、同じボタンが表示されますが、マウスポインタを上に乗せてもメニューが表示されず、クリックしたときにサービスの一覧が表示されるようになります。

「<a class="addthis_counter addthis_bubble_style"></a>」の「addthis_counter」はAddThisのカウンタを意味します。「addthis_bubble_style」というのは、噴出し形式でカウンタを表示するという意味です。これを指定しないと、AddThisボタンの上に大きなカウンタが表示されるようになります。

それ以外にも色々なボタンを表示できますが、詳しくは「Rendering with Link Decoration」をご覧ください。

▲ ▼

様々なサービスのカウンタを表示する基本的なコード †

上の例をさらに応用すると、Google+1、ツイート、Facebookいいねボタンをカウンタ付きで表示することもできます。以下のコードは、これらのボタンと、セパレータ、AddThisボタンとカウンタを表示する例です。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_facebook_like"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->

これ以外にも、「addthis_button_facebook_send」でFacebookの送信ボタン、「addthis_button_twitter_follow_native」でツイッターのフォローボタン、「addthis_button_tweetmeme」でTweetMemeボタンを表示できます。

ボタンのオプションを指定することもできます。Google+1のサイズを中、ツイートボタンの言語をja、Facebookをカウンタ表示（横幅を120px）として時のコードは、以下のようになります。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_tweet" tw:lang="ja"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:width="120"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->

▲ ▼

URLとタイトルを指定する †

ブックマークに追加するURLとタイトルを指定することもできます。その方法は、「AddThis - Help - AddThis Client API」と「AddThis - Help - URL & Title」にあります。

まずはSharing Configuration Optionsを使う方法を示します。ここでは、URLを「http://dobon.net/」、タイトルを「DOBON.NET」としています。

<script type="text/javascript">
var addthis_share = {
    url: "http://dobon.net/",
    title: "DOBON.NET"
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

次にAttribute-based Configurationによる方法を示します。この方法を使うと、個々のボタンの設定を個別に指定できます。

<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button" addthis:url="http://dobon.net/" addthis:title="DOBON.NET">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

addthis_toolboxにAttribute-based Configurationを設定することで、そこに含まれるすべてのボタンの設定を指定することもできます。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://dobon.net/" addthis:title="DOBON.NET">
<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>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->

▲ ▼

リストにないサービスを自分で追加する †

AddThisが用意していないサービスを自分で追加することもできます。その方法は、「AddThis - Help - Custom Services」にあります。

例えば、livedoorクリップを追加するには、次のようにします。

<script type="text/javascript">
var addthis_config = {
    services_custom: {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url}}&title={{title}}",
        icon: "http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif"}
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

「{{url}}」にはURLエンコードされたURLが、「{{title}}」にはURLエンコードされたタイトルが挿入されます。

livedoor、Yahoo! Japan、GREE、Buzzurl、newsing、イザ！、JUGEMのボタンを追加したコードは、以下のようになります。

<script type="text/javascript">
var addthis_config = {
    services_custom: [{
        name: "Y! JAPAN",
        url: "http://bookmarks.yahoo.co.jp/action/bookmark?u={{url}}&t={{title}};ei=UTF-8",
        icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
    }, {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url}}&title={{title}}",
        icon: "http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif"
    }, {
        name: "GREE",
        url: "http://gree.jp/?mode=share&act=write&url={{url}}&button_type=4&button_size=16",
        icon: "http://i.gree.jp/img/share/button/btn_logo_16.png"
    }, {
        name: "Buzzurl",
        url: "http://buzzurl.jp/config/add/confirm?url={{url}}&title={{title}}",
        icon: "http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif"
    }, {
        name: "newsing",
        url: "http://newsing.jp/nbutton?url={{url}}&title={{title}}",
        icon: "http://image.newsing.jp/common/images/newsingit/newsingit_s.gif"
    }, {
        name: "イザ！",
        url: "http://www.iza.ne.jp/bookmark/add/regist/back/{{url}}",
        icon: "http://www.iza.ne.jp/images/common/bookmark_icon02.gif"
    }, {
        name: "JUGEM",
        url: "http://b.jugem.jp/posturl={{url}}&title={{title}}",
        icon: "http://imaging.jugem.jp/icon/jugembookmark_add.gif"
    }]
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

▲ ▼

自分で追加したサービスをボタンに表示する †

「addthis_button_」の後にサービス名を付けることでボタンを設置できることは先に説明しましたが、自分で追加したサービスの場合、サービス名にはURLのドメインを指定します。例えば上のコードでlivedoorのボタンを表示するには、「addthis_button_clip.livedoor.com」という名前を使います。

<script type="text/javascript">
var addthis_config = {
    data_track_clickback: false,
    services_custom: {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url}}&title={{title}}",
        icon: "http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif"
    }
}
</script>
<a class="addthis_button_clip.livedoor.com"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

▲ ▼

コンパクトメニューに表示するサービスを設定する †

AddThisのアイコンにマウスをのせたときに表示されるコンパクトメニューに指定したボタンを表示するには、"services_compact"というオプションを使用します。

例えば、コンパクトメニューに「お気に入り、印刷、はてな、Yahoo! JAPAN、livedoor、GREE、Buzzurl、イザ！、もっと見る」を表示するには、以下のようにします。

<script type="text/javascript">
var addthis_config = {
    services_custom: [{
        name: "Y! JAPAN",
        url: "http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?u={{url}}&t={{title}};ei=UTF-8",
        icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
    }, {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url}}&title={{title}}",
        icon: "http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif"
    }, {
        name: "GREE",
        url: "http://gree.jp/?mode=share&act=write&url={{url}}&button_type=4&button_size=16",
        icon: "http://i.gree.jp/img/share/button/btn_logo_16.png"
    }, {
        name: "Buzzurl",
        url: "http://buzzurl.jp/config/add/confirm?url={{url}}&title={{title}}",
        icon: "http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif"
    }, {
        name: "newsing",
        url: "http://newsing.jp/nbutton?url={{url}}&title={{title}}",
        icon: "http://image.newsing.jp/common/images/newsingit/newsingit_s.gif"
    }, {
        name: "イザ！",
        url: "http://www.iza.ne.jp/bookmark/add/regist/back/{{url}}",
        icon: "http://www.iza.ne.jp/images/common/bookmark_icon02.gif"
    }, {
        name: "JUGEM",
        url: "http://b.jugem.jp/posturl={{url}}&title={{title}}",
        icon: "http://imaging.jugem.jp/icon/jugembookmark_add.gif"
    }],
    services_compact: "favorites,print,hatena,bookmarks.yahoo.co.jp,clip.livedoor.com,gree.jp,buzzurl.jp,www.iza.ne.jp,more"
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

なおservices_compactに指定したサービスが全て確実に表示されるということはないようです。また、「email」は表示できませんでした。

▲ ▼

URLの末尾に追加されるフラグメントが付かないようにする †

AddThisのボタンを押してブックマークに登録すると、そのURLは実際のURLの末尾に「#.TlKAA773HHI.favorites」のような余計な文字列（フラグメント）が付いたものになってしまいます。これは、AddThisの機能であるClick Trackingを有効にするためのものらしいです。

このフラグメントが付かないようにするには、「AddThis - Help - Click Tracking」にあるように、data_track_clickbackオプションを使用してClick Trackingを無効にします。

ただし、私が試した限りでは、pubidを指定しないとフラグメントは消せませんでした。よって、ユーザー登録しないとできないようです。

以下のコードのpubidはでたらめなものになっていますので、ご自分のpubidに変更してください。

<script type="text/javascript">
var addthis_config = {
    data_track_clickback: false
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class="addthis_button">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxxxxxxxxx"></script>

なお私の試した限りでは、このようにしても「email」ボタンを押した時はメーラーにフラグメントが付けられたURLが入力されてしまいました。

▲ ▼

コメント †

▲ ▼

ページ情報
カテゴリ : インターネット作成日 : 2011-09-02 (金) 21:45:34 作成者 : DOBON! 最終編集日 : 2011-09-03 (土) 03:08:52 最終編集者 : DOBON!

DoboWiki