#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]]」で詳しく説明します。 **Tumblrボタン [#oede49a0] #ref(tumblr1.png) 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> }} 上のように「data-notes」が「right」の時は、カウンターがボタンの右に表示されます。「data-notes」を「top」にすると上、「none」にすると表示されなくなります。 **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 src="//platform.linkedin.com/in.js" type="text/javascript"> lang: ja_JP</script> <script type="IN/Share" data-counter="top"></script> }} 「data-counter」を「right」にするとカウンターが右に表示され、「data-counter」属性を削除するとカウンターが表示されなくなります。 **Pocketボタン [#y780ad9c] #ref(pocket1.png) Pocketボタンのコードは、「[[Pocket for Publishers: Pocket Button>https://getpocket.com/publisher/button]]」で取得できます。基本的なコードは、以下のようになります。 #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> }} 「data-pocket-count」が「vertical」の時は、カウンターがボタンの上に表示されます。「horizontal」の時は右、「none」の時は表示されません。 保存するURLを指定する場合は、「data-save-url」属性を使用します。 **LINEで送るボタン [#uc532744] #ref(line1.png) LINEで送るボタンのコードは、「[[設置方法|LINEで送るボタン>https://media.line.me/howto/ja/]]」で取得できます。基本的なコードは、以下のようになります。 #prescroll(wrap=true){{ <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> }} LINEで送る機能を、単純なリンクのみで作成することもできます。「http://dobon.net/」という文字列をLINEで送るリンクは、以下のようなコードで作成できます。 #prescroll(wrap=true){{ <a href="http://line.me/R/msg/text/?http%3A%2F%2Fdobon.net%2F">LINEで送る</a> }} **Pinterestの保存ボタン [#o8b7e9be] #ref(pinterest1.png) Pinterestの保存ボタン(及びフォローボタン)のコードは、「[[Pinterest Developers>https://developers.pinterest.com/tools/widget-builder/?type=pinit&buttonType=anyImage]]」で取得できます。基本的なコードは、以下のようになります。 まず、ボタンを表示されたいところに、以下のコードを記述します。 #prescroll(wrap=true){{ <a data-pin-do="buttonBookmark" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/"></a> }} そして、</body>タグの直前に、以下のコードを記述します。 #prescroll(wrap=true){{ <script async defer src="//assets.pinterest.com/js/pinit.js"></script> }} ページのURLを「http://dobon.net/」、イメージのURLを「http://dobon.net/banner/dt3.gif」、説明を「DOBON.NET」とし、カウンターをボタンの上に表示するコードは、以下のようになります(</body>タグの直前に記述するコードは、上と同じです)。 #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> }} **reddit.comボタン [#abdabb32] #ref(reddit1.png) [[reddit.com>http://www.reddit.com]]というソーシャルニュースサイトのボタンを設置する方法が「[[reddit.com: reddit用ボタン>http://www.reddit.com/buttons/]]」で説明されています。 ボタンは何種類かありますが、そのうち、評価数の表示と、評価の投稿ができるボタンのコードは、以下のようになります。 #prescroll(wrap=true){{ <script type="text/javascript" src="//www.redditstatic.com/button/button1.js"></script> }} **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{{ #prescroll(wrap=true){{ <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(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-31 (火) 02:31:45,DOBON!) #pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:03:45,DOBON!,2017-02-08 (水) 02:08:08,DOBON!) |