- 追加された行はこの色です。
- 削除された行はこの色です。
#title(様々なシェア、ブックマークボタン(Google+1、twitter、facebook、はてななど)を表示する)
#contents
*様々なシェア、ブックマークボタン(Google+1、twitter、facebook、はてななど)を表示する [#x7d67ba4]
ここでは、自分のブログやサイトに設置できる様々なブックマークボタンやシェアボタン(共有ボタン)を紹介します。なお記事に掲載されているボタンの画像は画像だけで、実際には機能しないことをご了承ください。(横のメニューに表示されているブックマークボタンは機能します。)
**Google +1 ボタン [#za99c703]
#ref(google_plusone3.png)
Google+1ボタン(プラスワンボタン)については、「[[Google +1 ボタンを表示する>./Google+1]]」で詳しく説明します。
**twitter ツイートボタン [#r4b46017]
#ref(twitter2.png)
twitterのツイートボタンについては、「[[twitter ツイートボタンを表示する>./Tweet]]」で詳しく説明します。
**facebookのいいねボタン [#ze07e9a7]
#ref(facebook7.png)
facebookのいいねボタンについては、「[[facebook いいねボタンを表示する>./FacebookLike]]」で詳しく説明します。
**はてなブックマークボタン [#l60a58de]
#ref(hatena4.png)
はてなブックマークボタンについては、「[[はてなブックマークボタンを表示する>./Hatena]]」で詳しく説明します。
**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(グリー デベロッパーセンター)>https://docs.developer.gree.net/ja/platform/connect/socialfeedback]]」に設置方法があります。
**Delicious Save Buttons [#a25bc185]
Deliciousの「Save this on Delicious」ボタンの設置方法は、「[[Delicious>https://del.icio.us/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>
}}
#ref(delicious1.png)
**LinkedIn Share Button [#cd89224d]
#ref(linkedin1.png)
LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Buttonは、「[[Share Plugin Generator | LinkedIn Developer Network>https://developer.linkedin.com/plugins/share]]」でコードの取得ができます。
基本的なコードは、以下のようになります。
#prescroll(wrap=true){{
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
}}
**Tumblr共有ボタン/フォローボタン [#oede49a0]
Tumblr共有ボタンとフォローボタンは、「[[Buttons | Tumblr>https://www.tumblr.com/buttons?language=ja_JP]]」でコードの取得ができます。
共有ボタンの基本的なコード(JavaScript)は、以下のようになります。
#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>
}}
**Messenger Connect Sharing badge [#g92b386d]
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を表示するコードは、以下のようになります。
#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://img.wlxrs.com/$Live.SN.MessengerBadge/icon16wh.png" alt="Share with Messenger" /></a>
}}
アイコンの色は、白以外にオレンジも用意されており、オレンジにする場合は画像ファイル名の「wh」を「or」に置き換えます。
&ref(http://img.wlxrs.com/$Live.SN.MessengerBadge/icon16wh.png);
&ref(http://img.wlxrs.com/$Live.SN.MessengerBadge/icon16or.png);
#ref(live1.png)
**reddit.comボタン [#abdabb32]
[[reddit.com>http://www.reddit.com]]というソーシャルニュースサイトのボタンを設置する方法が「[[reddit.com: reddit用ボタン>http://www.reddit.com/buttons/]]」で説明されています。
**複数ブックマークに対応したサービス [#abe04c6a]
上記で紹介した以外にも世界中にはブックマークサービスが山のようにあります。それらのボタンをすべて設置するのは困難です。多くのブックマークサービスに対応したいが、設置するのが面倒という時は、これらのサービスをまとめて提供してくれるサービスを利用すると便利です。以下にそのようなサービスを紹介します。
***AddThis [#w283ca45]
#ref(addthis7.png)
一番有名で、機能も豊富なのは、AddThisです。AddThisについては、「[[AddThisボタンを表示する>./AddThis]]」で詳しく説明します。
***AddToAny [#m1d3b526]
#ref(addtoany1.png)
AddToAnyもAddThisと同様のサービスを提供しています。AddToAnyについては、「[[AddToAnyボタンを表示する>./AddToAny]]」で詳しく説明します。
***ShareThis [#oc95e3ef]
ShareThisも海外のサービスです。「[[Sharing Widget, Sharing Button, Sharing Plugin - ShareThis>http://sharethis.com/]]」でコードを取得できます。私が試した限りでは、ユーザー登録しない使えないようでした。
**終了したサービス [#ue5080d9]
終了したサービスは、「[[廃止されたシェア、ブックマークボタン>./trash]]」に移しました。
**コメント [#bc085a91]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2017-01-28 (土) 01:41:46,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2017-01-31 (火) 02:31:45,DOBON!)