• 追加された行はこの色です。
  • 削除された行はこの色です。
#title(様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する)

#contents

*様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する [#x7d67ba4]

ここでは、自分のブログやサイトに設置できる様々なブックマークボタンやシェアボタン（共有ボタン）を紹介します。なお記事に掲載されているボタンの画像は画像だけで、実際には機能しないことをご了承ください。（横のメニューに表示されているブックマークボタンは機能します。）

**Google +1 ボタン [#za99c703]

#ref(google_plusone1.png)
#ref(google_plusone3.png)

Google+1ボタン（プラスワンボタン）については、「[[Google +1 ボタンを表示する>./Google+1]]」で詳しく説明します。

**twitter ツイートボタン [#r4b46017]

#ref(twitter1.png)
#ref(twitter2.png)

twitterのツイートボタンについては、「[[twitter ツイートボタンを表示する>./Tweet]]」で詳しく説明します。

**facebookのいいねボタン [#ze07e9a7]

#ref(facebook3.png)
#ref(facebook7.png)

facebookのいいねボタンについては、「[[facebook いいねボタンを表示する>./FacebookLike]]」で詳しく説明します。

**はてなブックマークボタン [#l60a58de]

#ref(hatena1.png)
#ref(hatena4.png)

はてなブックマークボタンについては、「[[はてなブックマークボタンを表示する>./Hatena]]」で詳しく説明します。

**Yahoo!ブックマークに登録ボタン [#e3d2ed5a]
**Tumblrボタン [#oede49a0]

#ref(yahoo1.png)
#ref(tumblr1.png)

Yahoo!ブックマークに登録ボタンについては、「[[Yahoo!ブックマークに登録ボタンを表示する>./YahooJapan]]」で詳しく説明します。
Tumblrボタン（及び、投稿ボタン、フォローボタン）は、「[[Buttons | Tumblr>https://www.tumblr.com/buttons?language=ja_JP]]」でコードの取得ができます。

**Diggボタン [#zd40974e]
共有ボタンの基本的なコード（JavaScript）は、以下のようになります。

#ref(digg1.png)
#prescroll(wrap=true,}}=｝｝){{
<a class="tumblr-share-button" data-color="blue" data-notes="right" href="https://embed.tumblr.com/share"></a>
<script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://assets.tumblr.com/share-button.js";ajs.parentNode.insertBefore(js,ajs);｝｝(document, "script", "tumblr-js");</script>
}}

海外のサイトではよく見るDiggボタンは、「[[Integrate: The Digg Button | Digg About>http://about.digg.com/downloads/button/smart]]」で設置方法が説明されています。
上のように「data-notes」が「right」の時は、カウンターがボタンの右に表示されます。「data-notes」を「top」にすると上、「none」にすると表示されなくなります。

基本的なコードは、以下のようなものです。
**LinkedIn Share Button [#cd89224d]

#prescroll{{
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Wide Button -->
<a class="DiggThisButton DiggWide"></a>
<!-- Medium Button -->
<a class="DiggThisButton DiggMedium"></a>
<!-- Compact Button -->
<a class="DiggThisButton DiggCompact"></a>
<!-- Icon Button -->
<a class="DiggThisButton DiggIcon"></a>
}}
#ref(linkedin1.png)

このコードを書くと、上記の画像のように、4つのボタンが表示されますので、必要なものだけを残します。
LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Buttonは、「[[Share Plugin Generator | LinkedIn Developer Network>https://developer.linkedin.com/plugins/share]]」でコードの取得ができます。

例えば、Compactボタンで「http://dobon.net/」のボタンを設置する場合は以下のようなコードになります。
基本的なコード（言語が日本語で、カウンターを上に表示）は、以下のようになります。

#prescroll{{
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<!-- Compact Button -->
<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=http%3A//dobon.net/"></a>
#prescroll(wrap=true){{
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: ja_JP</script>
<script type="IN/Share" data-counter="top"></script>
}}

**mixiチェックボタンとイイネ!ボタン [#nd78a154]
「data-counter」を「right」にするとカウンターが右に表示され、「data-counter」属性を削除するとカウンターが表示されなくなります。

これらのボタンを作成するには、登録が必要です。設置方法は、「[[mixiチェック&#160;<<&#160;mixi Developer Center (ミクシィ デベロッパーセンター)>http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/]]」と「[[イイネ！ボタン&#160;<<&#160;mixi Developer Center (ミクシィ デベロッパーセンター)>http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/]]」に説明があります。
**Pocketボタン [#y780ad9c]

**GREE いいね!ボタン [#s909ac83]
#ref(pocket1.png)

「[[Social Feedback - GREE Developer Center（グリー デベロッパーセンター）>https://docs.developer.gree.net/ja/platform/connect/socialfeedback]]」に設置方法があります。
Pocketボタンのコードは、「[[Pocket for Publishers: Pocket Button>https://getpocket.com/publisher/button]]」で取得できます。基本的なコードは、以下のようになります。

**Delicious Save Buttons [#a25bc185]

Deliciousの「Save this on Delicious」ボタンの設置方法は、「[[Tools &#8211; Delicious>https://delicious.com/tools]]」にあります。

''以下の機能は、廃止されたようです。''

さらに登録者数やその日にちの推移のグラフも表示できます。コードは、「[[Tagometer on Delicious>http://www.delicious.com/help/tagometer]]」で取得できます。基本的なコードは、以下のようになります。

#prescroll{{
<script type="text/javascript">
    if (typeof window.Delicious == "undefined") window.Delicious = {};
</script>
<script src="http://static.delicious.com/js/d2-blogbadge.js"></script>
#prescroll(wrap=true,}}=｝｝){{
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);｝｝(document,"pocket-btn-js");</script>
}}

#ref(delicious1.png)
「data-pocket-count」が「vertical」の時は、カウンターがボタンの上に表示されます。「horizontal」の時は右、「none」の時は表示されません。

**LinkedIn Share Button [#cd89224d]
保存するURLを指定する場合は、「data-save-url」属性を使用します。

#ref(linkedin1.png)
**LINEで送るボタン [#uc532744]

LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Buttonは、「[[Share Button | LinkedIn Developer Network>http://developer.linkedin.com/plugins/share-button]]」でコードの取得ができます。
#ref(line1.png)

基本的なコードは、以下のようになります。
LINEで送るボタンのコードは、「[[設置方法｜LINEで送るボタン>https://media.line.me/howto/ja/]]」で取得できます。基本的なコードは、以下のようになります。

#prescroll(wrap=true){{
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
<div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja" ></div>
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>
}}

**Tumblr共有ボタン/フォローボタン [#oede49a0]
LINEで送る機能を、単純なリンクのみで作成することもできます。「http://dobon.net/」という文字列をLINEで送るリンクは、以下のようなコードで作成できます。

Tumblr共有ボタンとフォローボタンは、「[[ボタン | Tumblr>http://www.tumblr.com/buttons?language=ja_JP]]」でコードの取得ができます。

共有ボタンの基本的なコード（JavaScript）は、以下のようになります。

#prescroll(wrap=true){{
<!-- このコードを、ページの</body>タグのすぐ前に追加してください。 -->
<script src="http://platform.tumblr.com/v1/share.js"></script>
<a href="http://line.me/R/msg/text/?http%3A%2F%2Fdobon.net%2F">LINEで送る</a>
}}

#prescroll(wrap=true){{
<!-- Put this tag wherever you want your button to appear -->
<span id="tumblr_button_abc123"></span>
**Pinterestの保存ボタン [#o8b7e9be]

<!-- Set these variables wherever convenient -->
<script type="text/javascript">
    var tumblr_link_url = "http://www.example.com/permalink/my-article";
    var tumblr_link_name = "My Awesome Article";
    var tumblr_link_description = "Lorem ipsum...";
</script>
#ref(pinterest1.png)

<!-- Put this code at the bottom of your page -->
<script type="text/javascript">
    var tumblr_button = document.createElement("a");
    tumblr_button.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent(tumblr_link_url) + "&name=" + encodeURIComponent(tumblr_link_name) + "&description=" + encodeURIComponent(tumblr_link_description));
    tumblr_button.setAttribute("title", "Share on Tumblr");
    tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
    tumblr_button.innerHTML = "Share on Tumblr";
    document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>
}}
Pinterestの保存ボタン（及びフォローボタン）のコードは、「[[Pinterest Developers>https://developers.pinterest.com/tools/widget-builder/?type=pinit&buttonType=anyImage]]」で取得できます。基本的なコードは、以下のようになります。

**Messenger Connect Sharing badge [#g92b386d]
まず、ボタンを表示されたいところに、以下のコードを記述します。

Windows Live Messenger Connect badgeを表示させる方法は、「[[Windows Live Messenger Connect Sharing>http://msdn.microsoft.com/en-us/live/ff796213.aspx]]」にあります。
#prescroll(wrap=true){{
<a data-pin-do="buttonBookmark" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/"></a>
}}

例えば「http://dobon.net/」のMessenger Connect Sharing badgeを表示するコードは、以下のようになります。
そして、</body>タグの直前に、以下のコードを記述します。

#prescroll(wrap=true){{
<a href="http://profile.live.com/badge?url=http%3A%2F%2Fdobon.net%2F" title="DOBON.NET"><img style="border-style:none; vertical-align:middle; margin-right:4px" src="http://js.live.net/static/img/SharingBadge16x16White.png" alt="Share with Messenger" /></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
}}

アイコンはサイズが22x22の画像も用意されており、それを使う場合は画像ファイル名の「16x16」を「22x22」に置き換えます。またアイコンの色は、白以外にオレンジも用意されており、オレンジにする場合は画像ファイル名の「White」を「Orange」に置き換えます。
ページのURLを「http://dobon.net/」、イメージのURLを「http：//dobon.net/banner/dt3.gif」、説明を「DOBON.NET」とし、カウンターをボタンの上に表示するコードは、以下のようになります（</body>タグの直前に記述するコードは、上と同じです）。

&ref(http://js.live.net/static/img/SharingBadge16x16White.png);
&ref(http://js.live.net/static/img/SharingBadge22x22White.png);
&ref(http://js.live.net/static/img/SharingBadge16x16Orange.png);
&ref(http://js.live.net/static/img/SharingBadge22x22Orange.png);
#prescroll(wrap=true){{
<a data-pin-do="buttonPin" data-pin-count="above" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fdobon.net%2F&media=http%3A%2F%2Fdobon.net%2Fbanner%2Fdt3.gif&description=DOBON.NET"></a>
}}

また、JavaScriptを使って表示するコードを「[[Messenger Connect sharing badge embed prototype>http://messengerconnectsharingbadge.mslivelabs.com/]]」で作成できます。

**reddit.comボタン [#abdabb32]

#ref(reddit1.png)

[[reddit.com>http://www.reddit.com]]というソーシャルニュースサイトのボタンを設置する方法が「[[reddit.com: reddit用ボタン>http://www.reddit.com/buttons/]]」で説明されています。

**複数ブックマークに対応したサービス [#abe04c6a]
ボタンは何種類かありますが、そのうち、評価数の表示と、評価の投稿ができるボタンのコードは、以下のようになります。

上記で紹介した以外にも世界中にはブックマークサービスが山のようにあります。それらのボタンをすべて設置するのは困難です。多くのブックマークサービスに対応したいが、設置するのが面倒という時は、これらのサービスをまとめて提供してくれるサービスを利用すると便利です。以下にそのようなサービスを紹介します。
#prescroll(wrap=true){{
<script type="text/javascript" src="//www.redditstatic.com/button/button1.js"></script>
}}

***AddThis [#w283ca45]
**mixiチェックボタンとイイネ!ボタン [#nd78a154]

#ref(addthis7.png)
これらのボタンを作成するには、登録が必要です。設置方法は、「[[mixiチェック&#160;<<&#160;mixi Developer Center (ミクシィ デベロッパーセンター)>http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/]]」と「[[イイネ！ボタン&#160;<<&#160;mixi Developer Center (ミクシィ デベロッパーセンター)>http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/]]」に説明があります。

一番有名で、機能も豊富なのは、AddThisです。AddThisについては、「[[AddThisボタンを表示する>./AddThis]]」で詳しく説明します。
**GREE いいね!ボタン [#s909ac83]

***AddToAny [#m1d3b526]
「[[Social Feedback - GREE Developer Center（グリー デベロッパーセンター）>https://docs.developer.gree.net/ja/platform/connect/socialfeedback]]」に設置方法があります。

#ref(addtoany1.png)
**Delicious Save Buttons [#a25bc185]

AddToAnyもAddThisと同様のサービスを提供しています。AddToAnyについては、「[[AddToAnyボタンを表示する>./AddToAny]]」で詳しく説明します。
Deliciousの「Save this on Delicious」ボタンの設置方法は、「[[Delicious>https://del.icio.us/tools]]」にあります。

***AddClips [#k143636e]
''以下の機能は、廃止されたようです。''

#ref(addclips1.png)
さらに登録者数やその日にちの推移のグラフも表示できます。コードは、「[[Tagometer on Delicious>http://www.delicious.com/help/tagometer]]」で取得できます。基本的なコードは、以下のようになります。

AddClipsは日本のサービスです。AddThisやAddToAnyと比べると機能や対応しているサービスの数でかなり劣り、さらに無料版では広告が表示されるのも大きなマイナスですが、日本のサービスに対応している利点があります（ただしその数はかなり少ないので、メリットは殆どありません）。

「[[AddClipsボタンをつくる - AddClips>http://www.addclips.org/create.htm]]」でコードを取得できます。ユーザー登録の必要はありません。

基本的なコードは、以下のようなものです。なおAddClipsIdはでたらめな文字列に変更しています。

#prescroll{{
<!-- AddClips Code START -->
#prescroll(wrap=true){{
<script type="text/javascript">
<!--
  AddClipsUrl    = location.href;
  AddClipsTitle  = document.title;
  AddClipsId = '0000000000000';
  AddClipsBcolor='#78BE44';
  AddClipsNcolor='#D1E9C0';
  AddClipsTcolor='#666666';
  AddClipsType='1';
  AddClipsVerticalAlign='middle'; 
  AddClipsDefault='bookmark'; 
// -->
</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js" charset="utf-8"></script>
<!-- AddClips Code END -->
    if (typeof window.Delicious == "undefined") window.Delicious = {};
</script>
<script src="http://static.delicious.com/js/d2-blogbadge.js"></script>
}}

***ShareThis [#oc95e3ef]
#ref(delicious1.png)

ShareThisも海外のサービスです。「[[Sharing Widget, Sharing Button, Sharing Plugin - ShareThis>http://sharethis.com/]]」でコードを取得できます。私が試した限りでは、ユーザー登録しない使えないようでした。
**Messenger Connect Sharing badge [#g92b386d]

**終了したサービス [#ue5080d9]
Windows Live Messenger Connect badgeを表示させる方法は、「[[Windows Live Messenger Connect Developer Guide, Version 4.1>http://msdn.microsoft.com/en-us/library/gg251990.aspx]]」にあります。

以下のサービスは残念ながら終了してしまいました。
例えば「http://dobon.net/」のMessenger Connect Sharing badgeを表示するコードは、以下のようになります。

-FC2 Bookmark 2011/2/16 サービス終了
-@niftyクリップ 2011/3/31 サービス終了

***Google バズボタン [#vd093181]

''2013/7/17 サービス終了''

#ref(buzz1.png)

Google バズボタンについては、「[[Googleバズボタンを表示する>./GoogleBuzz]]」で詳しく説明します。

***livedoor clip! ボタン [#q2f4ea1a]

''2012/10/10 サービス終了''

「[[livedoor クリップ - ブログに「clip!」ボタンを設定しよう！>http://clip.livedoor.com/guide/blog.html]]」に設置方法があります。

登録者数を表示する方法もあり、「[[livedoor クリップ まとめサイト - livedoor Wiki（ウィキ）>http://wiki.livedoor.jp/staff_clip/d/FrontPage]]」に説明があります。例えば、「http://dobon.net/」というURLを登録している人の数を表示するには、以下のようなコードを書きます。

#prescroll(wrap=true){{
<a href="http://clip.livedoor.com/clips/http://dobon.net/"><img src="http://image.clip.livedoor.com/counter/http://dobon.net/" style="border:none;" /></a>
<a href="http://profile.live.com/badge?url=http%3A%2F%2Fdobon.net%2F" title="DOBON.NET"><img style="border-style:none; vertical-align:middle; margin-right:4px" src="http://img.wlxrs.com/$Live.SN.MessengerBadge/icon16wh.png" alt="Share with Messenger" /></a>
}}

***Buzzurlブックマークアイコン [#nf88fcc6]
アイコンの色は、白以外にオレンジも用意されており、オレンジにする場合は画像ファイル名の「wh」を「or」に置き換えます。

''2014/9/30 サービス終了''
#ref(live1.png)

「[[Buzzurl [バザール] / ソーシャルブックマーク>http://buzzurl.jp/icongenerator]]」に設置方法があります。
**複数ブックマークに対応したサービス [#abe04c6a]

ブックマークユーザー数を表示する方法もあり、「[[ECナビ デベロッパー ネットワーク: API アーカイブ>http://labs.ecnavi.jp/developer/buzzurl/api/]]」で説明されています。例えば「http://dobon.net/」のブックマークユーザー数を画像で表示には、次のようなコードを書きます。
上記で紹介した以外にも世界中にはブックマークサービスが山のようにあります。それらのボタンをすべて設置するのは困難です。多くのブックマークサービスに対応したいが、設置するのが面倒という時は、これらのサービスをまとめて提供してくれるサービスを利用すると便利です。以下にそのようなサービスを紹介します。

#prescroll{{
<img src="http://api.buzzurl.jp/api/counter/v1/image?url=http%3A//dobon.net/" />
}}
***AddThis [#w283ca45]

***newsingピックアップボタン [#p4dce236]
#ref(addthis7.png)

''2013/5/23 機能廃止''
一番有名で、機能も豊富なのは、AddThisです。AddThisについては、「[[AddThisボタンを表示する>./AddThis]]」で詳しく説明します。

newsingのピックアップボタンは、「[[ピックアップボタン設置方法 - newsing（ニューシング）>http://newsing.jp/about/buttonhelp]]」に設置方法の説明があります。
***AddToAny [#m1d3b526]

***Evernoteサイトメモリーボタン [#dad2cfdd]
#ref(addtoany1.png)

''機能廃止''
AddToAnyもAddThisと同様のサービスを提供しています。AddToAnyについては、「[[AddToAnyボタンを表示する>./AddToAny]]」で詳しく説明します。

#ref(evernote1.png)
***ShareThis [#oc95e3ef]

Evernoteサイトメモリーボタンは、「[[サイトメモリーって何？ | Evernote Corporation>http://www.evernote.com/about/intl/jp/developer/sitememory/index.php#a_builder]]」でコードの取得ができます。
ShareThisも海外のサービスです。「[[Sharing Widget, Sharing Button, Sharing Plugin - ShareThis>http://sharethis.com/]]」でコードを取得できます。私が試した限りでは、ユーザー登録しない使えないようでした。

***MySpaceシェアボタン [#g1162972]
**終了したサービス [#ue5080d9]

''機能廃止？''
終了したサービスは、「[[廃止されたシェア、ブックマークボタン>./trash]]」に移しました。

「[[How to Add Share on MySpace to Your Site - MySpace Open Platform: Documentation Wiki>http://wiki.developer.myspace.com/index.php?title=How_to_Add_Share_on_MySpace_to_Your_Site]]」に設置方法があります。

***イザ！ブックマークアイコン [#w726d3f6]

''機能廃止？''

イザ！ブックマークアイコンは、「[[イザ！ヘルプ　｜　イザ！ブックマークアイコンの設置について>http://www.iza.ne.jp/help/owner_002.html]]」に設置方法の説明があります。

***JUGEMブックマーク登録ボタン [#efa86999]

''2012/4/19 サービス終了''

POOKMARK Airlinesのサービスが2010/4/15に終了し、JUGEMブックマークになったようです。JUGEMブックマーク登録ボタンは、「[[JUGEMブックマーク - ヘルプ | ブログやホームページにブックマーク登録ボタンを貼るには>http://b.jugem.jp/doc/help/buttons]]」に設置方法の説明があります。

POOKMARKは登録数を表示することができました。JUGEMブックマークでできるかは分かりません。ちなみにPOOKMARKで「http://dobon.net/」の登録数を表示するコードは、以下のようなものでした。

#prescroll{{
<img src="http://pookmark.jp/url/http://dobon.net/" />
}}

**コメント [#bc085a91]

#comment

//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2014-10-29 (水) 02:29:27,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2017-02-08 (水) 02:08:08,DOBON!)
▲ ▼
[ トップ ]   [ 新規 | 子ページ作成 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]