#title(AddThisボタンを表示する) #contents *AddThisボタンを表示する [#bba4befe] #ref(addthis3.png) [[AddThis>http://www.addthis.com/]]を利用すれば、世界中にある数々のソーシャルブックマークへの登録リンクを自分のサイトに簡単にまとめて設置できます。 **最も基本的なコード [#u12a931e] 基本的なコードは、「[[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 --> }} **ボタンを設置する基本的なコード [#v06c5c32] 「[[AddThis - Get Your Button>https://www.addthis.com/get-addthis]]」では、ボタンのカスタマイズなどを行い、コードを取得できます。このページはユーザー登録しないと表示できないようですが、コードはユーザー登録しなくても使用できるようです。 優先順位の高い4つのボタン（AdThisが決定する）と、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 --> }} 「<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]]」にあります。 **カウンターを設置する基本的なコード [#aca6432b] Google+1、ツイッター、Facebookボタンをカウンタ付きで表示することもできます。以下のコードは、これらのボタンと、はてなボタン、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> <a class="addthis_button_hatena"></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 --> }} **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> }} **リストにないサービスを自分で追加する [#oee216d8] 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}}&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> }} 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/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" }] } </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}}&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> }} **コンパクトメニューに表示するサービスを設定する [#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}}&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> }} 自分で追加したサービスを指定するには、そのサービスのURLのドメインを指定します。 なお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が入力されてしまいました。 **コメント [#z0f30b23] #comment //これより下は編集しないでください #pageinfo(,2011-09-02 (金) 21:45:34,DOBON!,2011-09-02 (金) 21:45:34,DOBON!) |
Site admin: DOBON!
PukiWiki 1.5.0 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.6.40. HTML convert time: 0.008 sec.