ShareButton/AddThis のバックアップの現在との差分(No.4)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
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)
追加された行はこの色です。
削除された行はこの色です。
#title(AddThisボタンを表示する)

#contents

-[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]]

*AddThisボタンを表示する [#bba4befe]

#ref(../addthis7.png)

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

#column(補足){{
ここで紹介しているコードは古いものです。しかし、現在でも使用はできるようです。現在のシステムでは、基本的には、ログインしてボタンを作成する方法がメインのようです（自分でコードをカスタマイズする方法の説明が大幅に削除されてしまったようで、ヘルプが非常に分かりにくいです）。ちなみに、ここで紹介しているコードの「http://s7.addthis.com/js/250/addthis_widget.js」の部分は、現在では「//s7.addthis.com/js/300/addthis_widget.js」となっています。また、「<script ...」のコードは、</body>の直前に記述するとされています。
}}

**最も基本的なコード [#u12a931e]

基本的なコードは、「[[AddThis - Help - Default Code>https://www.addthis.com/help/default-code]]」で説明されています。それは、以下のようなものです。
基本的なコードは、「[[AddThis - Help - Default Code>https://www.addthis.com/help/default-code]]」（リンク切れ、現在ではこのコードの説明は無し）で説明されています。それは、以下のようなものです。

#prescroll{{
<!-- 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 -->
}}

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

#ref(../addthis3.png)

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

#ref(../addthis7.png)

**ボタンを設置する基本的なコード [#v06c5c32]

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

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

#ref(../addthis1.png)

#prescroll{{
<!-- 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>https://www.addthis.com/help/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>http://www.addthis.com/services/list]]」にあります。

「<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>https://www.addthis.com/help/client-api#rendering-decoration]]」をご覧ください。
それ以外にも色々なボタンを表示できますが、詳しくは「[[Rendering with Link Decoration>https://www.addthis.com/help/client-api#rendering-decoration]]」（リンク切れ）をご覧ください。

**様々なサービスのカウンタを表示する基本的なコード [#aca6432b]

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

#ref(../addthis2.png)

#prescroll{{
<!-- 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）として時のコードは、以下のようになります。

#ref(../addthis8.png)

#prescroll{{
<!-- 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とタイトルを指定する [#td650fb2]

ブックマークに追加するURLとタイトルを指定することもできます。その方法は、「[[AddThis - Help - AddThis Client API>http://www.addthis.com/help/client-api#configuration-sharing]]」と「[[AddThis - Help - URL & Title>http://www.addthis.com/help/url-and-title]]」にあります。

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

#prescroll{{
<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による方法を示します。この方法を使うと、個々のボタンの設定を個別に指定できます。

#prescroll{{
<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を設定することで、そこに含まれるすべてのボタンの設定を指定することもできます。

#prescroll{{
<!-- 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 -->
}}

**リストにないサービスを自分で追加する [#oee216d8]

AddThisが用意していないサービスを自分で追加することもできます。その方法は、「[[AddThis - Help - Custom Services>http://www.addthis.com/help/custom-services]]」にあります。
#column(注意){{
AddThis 3.0 からは、カスタムサービスはコンパクトメニューにデフォルトで表示されないそうです。
}}

AddThisが用意していないサービスを自分で追加することもできます。その方法は、「[[AddThis - Help - Custom Services>http://www.addthis.com/help/custom-services]]」（リンク切れ）にあります。

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

#ref(../addthis4.png)

#prescroll{{
<script type="text/javascript">
var addthis_config = {
    services_custom: {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        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のボタンを追加したコードは、以下のようになります。

#prescroll{{
<script type="text/javascript">
var addthis_config = {
    services_custom: [{
        name: "Y! JAPAN",
        url: "http://bookmarks.yahoo.co.jp/action/bookmark?u={{url&#x7d;&#x7d;&t={{title&#x7d;&#x7d;;ei=UTF-8",
        icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
    }, {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        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&#x7d;&#x7d;&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&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        icon: "http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif"
    }, {
        name: "newsing",
        url: "http://newsing.jp/nbutton?url={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        icon: "http://image.newsing.jp/common/images/newsingit/newsingit_s.gif"
    }, {
        name: "イザ！",
        url: "http://www.iza.ne.jp/bookmark/add/regist/back/{{url&#x7d;&#x7d;",
        icon: "http://www.iza.ne.jp/images/common/bookmark_icon02.gif"
    }, {
        name: "JUGEM",
        url: "http://b.jugem.jp/posturl={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        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>
}}

**自分で追加したサービスをボタンに表示する [#n0758776]

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

#ref(../addthis6.png)

#prescroll{{
<script type="text/javascript">
var addthis_config = {
    data_track_clickback: false,
    services_custom: {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        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>
}}

**コンパクトメニューに表示するサービスを設定する [#t2b124e1]

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

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

#ref(../addthis5.png)

#prescroll{{
<script type="text/javascript">
var addthis_config = {
    services_custom: [{
        name: "Y! JAPAN",
        url: "http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?u={{url&#x7d;&#x7d;&t={{title&#x7d;&#x7d;;ei=UTF-8",
        icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
    }, {
        name: "livedoor",
        url: "http://clip.livedoor.com/clip/add?link={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        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&#x7d;&#x7d;&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&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        icon: "http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif"
    }, {
        name: "newsing",
        url: "http://newsing.jp/nbutton?url={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        icon: "http://image.newsing.jp/common/images/newsingit/newsingit_s.gif"
    }, {
        name: "イザ！",
        url: "http://www.iza.ne.jp/bookmark/add/regist/back/{{url&#x7d;&#x7d;",
        icon: "http://www.iza.ne.jp/images/common/bookmark_icon02.gif"
    }, {
        name: "JUGEM",
        url: "http://b.jugem.jp/posturl={{url&#x7d;&#x7d;&title={{title&#x7d;&#x7d;",
        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の末尾に追加されるフラグメントが付かないようにする [#qbbd1427]

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

このフラグメントが付かないようにするには、「[[AddThis - Help - Click Tracking>http://www.addthis.com/help/clickbacks#disabling]]」にあるように、data_track_clickbackオプションを使用してClick Trackingを無効にします。

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

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

#prescroll{{
<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が入力されてしまいました。

**XHTML validにする [#adc95e34]

「[[AddThis - Help - AddThis Client API>https://www.addthis.com/help/client-api]]」の「[[Valid XHTML>https://www.addthis.com/help/client-api#valid-xhtml]]」（リンク切れ）に説明があります。

**コメント [#z0f30b23]

#comment

//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-02 (金) 21:45:34,DOBON!,2011-09-05 (月) 01:38:41,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-02 (金) 21:45:34,DOBON!,2017-01-31 (火) 01:49:05,DOBON!)
▲ ▼
DoboWiki
