DoboWiki
Top
> ShareButton/AddThis をテンプレートにして作成
ShareButton/AddThis をテンプレートにして作成
開始行:
#title(AddThisボタンを表示する)
#contents
-[[「様々なシェア、ブックマークボタン(Google+1、twitter...
*AddThisボタンを表示する [#bba4befe]
#ref(../addthis7.png)
[[AddThis>http://www.addthis.com/]]を利用すれば、世界中に...
#column(補足){{
ここで紹介しているコードは古いものです。しかし、現在でも...
}}
**最も基本的なコード [#u12a931e]
基本的なコードは、「[[AddThis - Help - Default Code>https...
#prescroll{{
<!-- ADDTHIS BUTTON BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
<!-- ADDTHIS BUTTON END -->
}}
このコードでは、以下のようなボタンが表示されます。
#ref(../addthis3.png)
ボタンの上にマウスポインタを乗せると、次のようなメニュー...
#ref(../addthis7.png)
**ボタンを設置する基本的なコード [#v06c5c32]
「[[AddThis - Get Your Button>https://www.addthis.com/get...
優先順位の高い4つのボタン(ユーザーに従って自動的に決定さ...
#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...
<!-- AddThis Button END -->
}}
「<div class="addthis_toolbox addthis_default_style">」は...
「<a class="addthis_button_preferred_1"></a>」の「preferr...
指定したサービスのボタンを表示することもできます。例えば...
「<a class="addthis_button_compact"></a>」というのは、小...
「<a class="addthis_counter addthis_bubble_style"></a>」...
それ以外にも色々なボタンを表示できますが、詳しくは「[[Ren...
**様々なサービスのカウンタを表示する基本的なコード [#aca6...
上の例をさらに応用すると、[[Google+1>../Google+1]]、[[ツ...
#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...
<!-- AddThis Button END -->
}}
これ以外にも、「addthis_button_facebook_send」でFacebook...
ボタンのオプションを指定することもできます。Google+1のサ...
#ref(../addthis8.png)
#prescroll{{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone" g:plusone:size="...
<a class="addthis_button_tweet" tw:lang="ja"></a>
<a class="addthis_button_facebook_like" fb:like:layout="b...
<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...
<!-- AddThis Button END -->
}}
**URLとタイトルを指定する [#td650fb2]
ブックマークに追加するURLとタイトルを指定することもできま...
まずはSharing Configuration Optionsを使う方法を示します。...
#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...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
次にAttribute-based Configurationによる方法を示します。こ...
#prescroll{{
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
addthis_toolboxにAttribute-based Configurationを設定する...
#prescroll{{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" addthi...
<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...
<!-- AddThis Button END -->
}}
**リストにないサービスを自分で追加する [#oee216d8]
#column(注意){{
AddThis 3.0 からは、カスタムサービスはコンパクトメニュー...
}}
AddThisが用意していないサービスを自分で追加することもでき...
例えば、livedoorクリップを追加するには、次のようにします。
#ref(../addthis4.png)
#prescroll{{
<script type="text/javascript">
var addthis_config = {
services_custom: {
name: "livedoor",
url: "http://clip.livedoor.com/clip/add?link={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
「{{url}}」にはURLエンコードされたURLが、「{{title}}」に...
livedoor、Yahoo! Japan、GREE、Buzzurl、newsing、イザ!、J...
#prescroll{{
<script type="text/javascript">
var addthis_config = {
services_custom: [{
name: "Y! JAPAN",
url: "http://bookmarks.yahoo.co.jp/action/bookmar...
icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
}, {
name: "livedoor",
url: "http://clip.livedoor.com/clip/add?link={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}, {
name: "GREE",
url: "http://gree.jp/?mode=share&act=write&url={{...
icon: "http://i.gree.jp/img/share/button/btn_logo...
}, {
name: "Buzzurl",
url: "http://buzzurl.jp/config/add/confirm?url={{...
icon: "http://buzzurl.jp.eimg.jp/static/image/api...
}, {
name: "newsing",
url: "http://newsing.jp/nbutton?url={{url}&#...
icon: "http://image.newsing.jp/common/images/news...
}, {
name: "イザ!",
url: "http://www.iza.ne.jp/bookmark/add/regist/ba...
icon: "http://www.iza.ne.jp/images/common/bookmar...
}, {
name: "JUGEM",
url: "http://b.jugem.jp/posturl={{url}}...
icon: "http://imaging.jugem.jp/icon/jugembookmark...
}]
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
**自分で追加したサービスをボタンに表示する [#n0758776]
「addthis_button_」の後にサービス名を付けることでボタンを...
#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={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}
}
</script>
<a class="addthis_button_clip.livedoor.com"></a>
<script type="text/javascript" src="http://s7.addthis.com...
}}
**コンパクトメニューに表示するサービスを設定する [#t2b124...
AddThisのアイコンにマウスをのせたときに表示されるコンパク...
例えば、コンパクトメニューに「お気に入り、印刷、はてな、Y...
#ref(../addthis5.png)
#prescroll{{
<script type="text/javascript">
var addthis_config = {
services_custom: [{
name: "Y! JAPAN",
url: "http://bookmarks.yahoo.co.jp/bookmarklet/sh...
icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
}, {
name: "livedoor",
url: "http://clip.livedoor.com/clip/add?link={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}, {
name: "GREE",
url: "http://gree.jp/?mode=share&act=write&url={{...
icon: "http://i.gree.jp/img/share/button/btn_logo...
}, {
name: "Buzzurl",
url: "http://buzzurl.jp/config/add/confirm?url={{...
icon: "http://buzzurl.jp.eimg.jp/static/image/api...
}, {
name: "newsing",
url: "http://newsing.jp/nbutton?url={{url}&#...
icon: "http://image.newsing.jp/common/images/news...
}, {
name: "イザ!",
url: "http://www.iza.ne.jp/bookmark/add/regist/ba...
icon: "http://www.iza.ne.jp/images/common/bookmar...
}, {
name: "JUGEM",
url: "http://b.jugem.jp/posturl={{url}}...
icon: "http://imaging.jugem.jp/icon/jugembookmark...
}],
services_compact: "favorites,print,hatena,bookmarks.y...
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
なおservices_compactに指定したサービスが全て確実に表示さ...
**URLの末尾に追加されるフラグメントが付かないようにする [...
AddThisのボタンを押してブックマークに登録すると、そのURL...
このフラグメントが付かないようにするには、「[[AddThis - H...
ただし、私が試した限りでは、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...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
なお私の試した限りでは、このようにしても「email」ボタンを...
**XHTML validにする [#adc95e34]
「[[AddThis - Help - AddThis Client API>https://www.addth...
**コメント [#z0f30b23]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-02 (金) 21...
終了行:
#title(AddThisボタンを表示する)
#contents
-[[「様々なシェア、ブックマークボタン(Google+1、twitter...
*AddThisボタンを表示する [#bba4befe]
#ref(../addthis7.png)
[[AddThis>http://www.addthis.com/]]を利用すれば、世界中に...
#column(補足){{
ここで紹介しているコードは古いものです。しかし、現在でも...
}}
**最も基本的なコード [#u12a931e]
基本的なコードは、「[[AddThis - Help - Default Code>https...
#prescroll{{
<!-- ADDTHIS BUTTON BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
<!-- ADDTHIS BUTTON END -->
}}
このコードでは、以下のようなボタンが表示されます。
#ref(../addthis3.png)
ボタンの上にマウスポインタを乗せると、次のようなメニュー...
#ref(../addthis7.png)
**ボタンを設置する基本的なコード [#v06c5c32]
「[[AddThis - Get Your Button>https://www.addthis.com/get...
優先順位の高い4つのボタン(ユーザーに従って自動的に決定さ...
#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...
<!-- AddThis Button END -->
}}
「<div class="addthis_toolbox addthis_default_style">」は...
「<a class="addthis_button_preferred_1"></a>」の「preferr...
指定したサービスのボタンを表示することもできます。例えば...
「<a class="addthis_button_compact"></a>」というのは、小...
「<a class="addthis_counter addthis_bubble_style"></a>」...
それ以外にも色々なボタンを表示できますが、詳しくは「[[Ren...
**様々なサービスのカウンタを表示する基本的なコード [#aca6...
上の例をさらに応用すると、[[Google+1>../Google+1]]、[[ツ...
#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...
<!-- AddThis Button END -->
}}
これ以外にも、「addthis_button_facebook_send」でFacebook...
ボタンのオプションを指定することもできます。Google+1のサ...
#ref(../addthis8.png)
#prescroll{{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone" g:plusone:size="...
<a class="addthis_button_tweet" tw:lang="ja"></a>
<a class="addthis_button_facebook_like" fb:like:layout="b...
<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...
<!-- AddThis Button END -->
}}
**URLとタイトルを指定する [#td650fb2]
ブックマークに追加するURLとタイトルを指定することもできま...
まずはSharing Configuration Optionsを使う方法を示します。...
#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...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
次にAttribute-based Configurationによる方法を示します。こ...
#prescroll{{
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
addthis_toolboxにAttribute-based Configurationを設定する...
#prescroll{{
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" addthi...
<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...
<!-- AddThis Button END -->
}}
**リストにないサービスを自分で追加する [#oee216d8]
#column(注意){{
AddThis 3.0 からは、カスタムサービスはコンパクトメニュー...
}}
AddThisが用意していないサービスを自分で追加することもでき...
例えば、livedoorクリップを追加するには、次のようにします。
#ref(../addthis4.png)
#prescroll{{
<script type="text/javascript">
var addthis_config = {
services_custom: {
name: "livedoor",
url: "http://clip.livedoor.com/clip/add?link={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
「{{url}}」にはURLエンコードされたURLが、「{{title}}」に...
livedoor、Yahoo! Japan、GREE、Buzzurl、newsing、イザ!、J...
#prescroll{{
<script type="text/javascript">
var addthis_config = {
services_custom: [{
name: "Y! JAPAN",
url: "http://bookmarks.yahoo.co.jp/action/bookmar...
icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
}, {
name: "livedoor",
url: "http://clip.livedoor.com/clip/add?link={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}, {
name: "GREE",
url: "http://gree.jp/?mode=share&act=write&url={{...
icon: "http://i.gree.jp/img/share/button/btn_logo...
}, {
name: "Buzzurl",
url: "http://buzzurl.jp/config/add/confirm?url={{...
icon: "http://buzzurl.jp.eimg.jp/static/image/api...
}, {
name: "newsing",
url: "http://newsing.jp/nbutton?url={{url}&#...
icon: "http://image.newsing.jp/common/images/news...
}, {
name: "イザ!",
url: "http://www.iza.ne.jp/bookmark/add/regist/ba...
icon: "http://www.iza.ne.jp/images/common/bookmar...
}, {
name: "JUGEM",
url: "http://b.jugem.jp/posturl={{url}}...
icon: "http://imaging.jugem.jp/icon/jugembookmark...
}]
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
**自分で追加したサービスをボタンに表示する [#n0758776]
「addthis_button_」の後にサービス名を付けることでボタンを...
#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={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}
}
</script>
<a class="addthis_button_clip.livedoor.com"></a>
<script type="text/javascript" src="http://s7.addthis.com...
}}
**コンパクトメニューに表示するサービスを設定する [#t2b124...
AddThisのアイコンにマウスをのせたときに表示されるコンパク...
例えば、コンパクトメニューに「お気に入り、印刷、はてな、Y...
#ref(../addthis5.png)
#prescroll{{
<script type="text/javascript">
var addthis_config = {
services_custom: [{
name: "Y! JAPAN",
url: "http://bookmarks.yahoo.co.jp/bookmarklet/sh...
icon: "http://i.yimg.jp/images/sicons/ybm16.gif"
}, {
name: "livedoor",
url: "http://clip.livedoor.com/clip/add?link={{ur...
icon: "http://parts.blog.livedoor.jp/img/cmn/clip...
}, {
name: "GREE",
url: "http://gree.jp/?mode=share&act=write&url={{...
icon: "http://i.gree.jp/img/share/button/btn_logo...
}, {
name: "Buzzurl",
url: "http://buzzurl.jp/config/add/confirm?url={{...
icon: "http://buzzurl.jp.eimg.jp/static/image/api...
}, {
name: "newsing",
url: "http://newsing.jp/nbutton?url={{url}&#...
icon: "http://image.newsing.jp/common/images/news...
}, {
name: "イザ!",
url: "http://www.iza.ne.jp/bookmark/add/regist/ba...
icon: "http://www.iza.ne.jp/images/common/bookmar...
}, {
name: "JUGEM",
url: "http://b.jugem.jp/posturl={{url}}...
icon: "http://imaging.jugem.jp/icon/jugembookmark...
}],
services_compact: "favorites,print,hatena,bookmarks.y...
}
</script>
<a href="http://www.addthis.com/bookmark.php?v=250" class...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
なおservices_compactに指定したサービスが全て確実に表示さ...
**URLの末尾に追加されるフラグメントが付かないようにする [...
AddThisのボタンを押してブックマークに登録すると、そのURL...
このフラグメントが付かないようにするには、「[[AddThis - H...
ただし、私が試した限りでは、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...
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en...
<script type="text/javascript" src="http://s7.addthis.com...
}}
なお私の試した限りでは、このようにしても「email」ボタンを...
**XHTML validにする [#adc95e34]
「[[AddThis - Help - AddThis Client API>https://www.addth...
**コメント [#z0f30b23]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-02 (金) 21...
ページ名:
▲
▼
[
トップ
] [
新規
|
子ページ作成
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]