- 追加された行はこの色です。
- 削除された行はこの色です。
#title(様々なシェア、ブックマークボタン(Google+1、twitter、facebook、はてななど)を表示する)
#contents
*様々なシェア、ブックマークボタン(Google+1、twitter、facebook、はてななど)を表示する [#x7d67ba4]
ここでは、自分のブログやサイトに設置できる様々なブックマークボタンやシェアボタン(共有ボタン)を紹介します。なお記事に掲載されているボタンの画像は画像だけで、実際には機能しないことをご了承ください。(横のメニューに表示されているブックマークボタンは機能します。)
**Google +1 ボタン [#za99c703]
#ref(google_plusone1.png)
Google+1ボタン(プラスワンボタン)については、「[[Google +1 ボタンを表示する>./Google+1]]」で詳しく説明します。
**twitter ツイートボタン [#r4b46017]
#ref(twitter1.png)
twitterのツイートボタンについては、「[[twitter ツイートボタンを表示する>./Tweet]]」で詳しく説明します。
**facebookのいいねボタン [#ze07e9a7]
#ref(facebook3.png)
facebookのいいねボタンについては、「[[facebook いいねボタンを表示する>./FacebookLike]]」で詳しく説明します。
**はてなブックマークボタン [#l60a58de]
#ref(hatena1.png)
はてなブックマークボタンについては、「[[はてなブックマークボタンを表示する>./Hatena]]」で詳しく説明します。
**Google バズボタン [#vd093181]
#ref(buzz1.png)
Google バズボタンについては、「[[Googleバズボタンを表示する>./GoogleBuzz]]」で詳しく説明します。
**Yahoo!ブックマークに登録ボタン [#e3d2ed5a]
#ref(yahoo1.png)
Yahoo!ブックマークに登録ボタンについては、「[[Yahoo!ブックマークに登録ボタンを表示する>./YahooJapan]]」で詳しく説明します。
**Diggボタン [#zd40974e]
#ref(digg1.png)
海外のサイトではよく見るDiggボタンは、「[[Integrate: The Digg Button | Digg About>http://about.digg.com/downloads/button/smart]]」で設置方法が説明されています。
基本的なコードは、以下のようなものです。
#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>
}}
このコードを書くと、上記の画像のように、4つのボタンが表示されますので、必要なものだけを残します。
例えば、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>
}}
**livedoor clip! ボタン [#q2f4ea1a]
「[[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://clip.livedoor.com/clips/http://dobon.net/"><img src="http://image.clip.livedoor.com/counter/http://dobon.net/" style="border:none;" /></a>
}}
**mixiチェックボタンとイイネ!ボタン [#nd78a154]
これらのボタンを作成するには、登録が必要です。設置方法は、「[[mixiチェック << mixi Developer Center (ミクシィ デベロッパーセンター)>http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/]]」と「[[イイネ!ボタン << mixi Developer Center (ミクシィ デベロッパーセンター)>http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/]]」に説明があります。
**GREE いいね!ボタン [#s909ac83]
「[[Social Feedback - GREE Developer Center(グリー デベロッパーセンター)>http://developer.gree.co.jp/connect/plugins/sf]]」に設置方法があります。
**Buzzurlブックマークアイコン [#nf88fcc6]
「[[Buzzurl [バザール] / ソーシャルブックマーク>http://buzzurl.jp/icongenerator]]」に設置方法があります。
ブックマークユーザー数を表示する方法もあり、「[[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/">
<img src="http://api.buzzurl.jp/api/counter/v1/image?url=http%3A//dobon.net/" />
}}
**Delicious Save Buttons [#a25bc185]
Deliciousの「Bookmark this on Delicious」ボタンの設置方法は、「[["Bookmark this on Delicious" Buttons>http://www.delicious.com/help/savebuttons]]」にあります。
さらに登録者数やその日にちの推移のグラフも表示できます。コードは、「[[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>
}}
#ref(delicious1.png)
**newsingピックアップボタン [#p4dce236]
newsingのピックアップボタンは、「[[ピックアップボタン設置方法 - newsing(ニューシング)>http://newsing.jp/about/buttonhelp]]」に設置方法の説明があります。
**LinkedIn Share Button [#cd89224d]
#ref(linkedin1.png)
LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Buttonは、「[[Share Button | LinkedIn Developer Network>http://developer.linkedin.com/plugins/share-button]]」でコードの取得ができます。
基本的なコードは、以下のようになります。
#prescroll(wrap=true){{
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
}}
**Evernoteサイトメモリーボタン [#dad2cfdd]
#ref(evernote1.png)
Evernoteサイトメモリーボタンは、「[[サイトメモリーって何? | Evernote Corporation>http://www.evernote.com/about/intl/jp/developer/sitememory/index.php#a_builder]]」でコードの取得ができます。
**Tumblr共有ボタン [#oede49a0]
Tumblr共有ボタンは、「[[Tumblr共有ボタン | Tumblr>http://www.tumblr.com/docs/ja/share_button]]」でコードの取得ができます。
**MySpaceシェアボタン [#g1162972]
「[[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]
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/">
<img src="http://pookmark.jp/url/http://dobon.net/" />
}}
**複数ブックマークに対応したサービス [#abe04c6a]
上記で紹介した以外にも世界中にはブックマークサービスが山のようにあります。それらのボタンをすべて設置するのは困難です。多くのブックマークサービスに対応したいが、設置するのが面倒という時は、これらのサービスをまとめて提供してくれるサービスを利用すると便利です。以下にそのようなサービスを紹介します。
***AddThis [#w283ca45]
#ref(addthis7.png)
一番有名で、機能も豊富なのは、AddThisです。AddThisについては、「[[AddThisボタンを表示する>./AddThis]]」で詳しく説明します。
***AddToAny [#m1d3b526]
#ref(addtoany1.png)
AddToAnyもAddThisと同様のサービスを提供しています。AddToAnyについては、「[[AddToAnyボタンを表示する>./AddToAny]]」で詳しく説明します。
***AddClips [#k143636e]
#ref(addclips1.png)
AddClipsは日本のサービスです。AddThisやAddToAnyと比べると機能や対応しているサービスの数でかなり劣り、さらに無料版では広告が表示されるのも大きなマイナスですが、日本のサービスに対応している利点があります(ただしその数はかなり少ないので、メリットは殆どありません)。
「[[AddClipsボタンをつくる - AddClips>http://www.addclips.org/create.htm]]」でコードを取得できます。ユーザー登録の必要はありません。
基本的なコードは、以下のようなものです。なおAddClipsIdはでたらめな文字列に変更しています。
#prescroll{{
<!-- AddClips Code START -->
<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 -->
}}
***ShareThis [#oc95e3ef]
ShareThisも海外のサービスです。「[[Sharing Widget, Sharing Button, Sharing Plugin - ShareThis>http://sharethis.com/]]」でコードを取得できます。私が試した限りでは、ユーザー登録しない使えないようでした。
**終了したサービス [#ue5080d9]
以下のサービスは残念ながら終了してしまいました。
-FC2 Bookmark 2011/2/16 サービス終了
-@niftyクリップ 2011/3/31 サービス終了
**コメント [#bc085a91]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2011-09-04 (日) 00:55:20,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2011-09-05 (月) 03:37:53,DOBON!)