ShareButton のバックアップ(No.3)

Top > ShareButton

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

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

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

▲ ▼

Google +1 ボタン †

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

▲ ▼

twitter ツイートボタン †

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

▲ ▼

facebookのいいねボタン †

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

▲ ▼

はてなブックマークボタン †

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

▲ ▼

Google バズボタン †

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

▲ ▼

Yahoo!ブックマークに登録ボタン †

Yahoo!ブックマークに登録ボタンについては、「Yahoo!ブックマークに登録ボタンを表示する」で詳しく説明します。

▲ ▼

Diggボタン †

海外のサイトではよく見るDiggボタンは、「Integrate: The Digg Button | Digg About」で設置方法が説明されています。

基本的なコードは、以下のようなものです。

<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/」のボタンを設置する場合は以下のようなコードになります。

<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! ボタン †

「livedoor クリップ - ブログに「clip!」ボタンを設定しよう！」に設置方法があります。

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

<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>

▲ ▼

ブックマークユーザー数を表示する方法もあり、「ECナビデベロッパーネットワーク: API アーカイブ」で説明されています。例えば「http://dobon.net/」のブックマークユーザー数を画像で表示には、次のようなコードを書きます。

<img src="http://api.buzzurl.jp/api/counter/v1/image?url=http%3A//dobon.net/" />

▲ ▼

Delicious Save Buttons †

Deliciousの「Bookmark this on Delicious」ボタンの設置方法は、「"Bookmark this on Delicious" Buttons」にあります。

さらに登録者数やその日にちの推移のグラフも表示できます。コードは、「Tagometer on Delicious」で取得できます。基本的なコードは、以下のようになります。

<script type="text/javascript">
    if (typeof window.Delicious == "undefined") window.Delicious = {};
</script>
<script src="http://static.delicious.com/js/d2-blogbadge.js"></script>

▲ ▼

newsingピックアップボタン †

newsingのピックアップボタンは、「ピックアップボタン設置方法 - newsing（ニューシング）」に設置方法の説明があります。

▲ ▼

LinkedIn Share Button †

LinkedInは、海外で有名なSNSサイトです。LinkedInのShare Buttonは、「Share Button | LinkedIn Developer Network」でコードの取得ができます。

基本的なコードは、以下のようになります。

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>

▲ ▼

Evernoteサイトメモリーボタン †

Evernoteサイトメモリーボタンは、「サイトメモリーって何？ | Evernote Corporation」でコードの取得ができます。

▲ ▼

Tumblr共有ボタン †

Tumblr共有ボタンは、「Tumblr共有ボタン | Tumblr」でコードの取得ができます。

▲ ▼

MySpaceシェアボタン †

「How to Add Share on MySpace to Your Site - MySpace Open Platform: Documentation Wiki」に設置方法があります。

▲ ▼

イザ！ブックマークアイコン †

イザ！ブックマークアイコンは、「イザ！ヘルプ　｜　イザ！ブックマークアイコンの設置について」に設置方法の説明があります。

▲ ▼

JUGEMブックマーク登録ボタン †

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

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

<img src="http://pookmark.jp/url/http://dobon.net/" />

▲ ▼

Messenger Connect Sharing badge †

Windows Live Messenger Connect badgeを表示させる方法は、「Windows Live Messenger Connect Sharing」にあります。

例えば「http://dobon.net/」のMessenger Connect Sharing badgeを表示するコードは、以下のようになります。

<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>

アイコンはサイズが22x22の画像も用意されており、それを使う場合は画像ファイル名の「16x16」を「22x22」に置き換えます。またアイコンの色は、白以外にオレンジも用意されており、オレンジにする場合は画像ファイル名の「White」を「Orange」に置き換えます。

SharingBadge16x16White.png SharingBadge22x22White.png SharingBadge16x16Orange.png SharingBadge22x22Orange.png

また、JavaScriptを使って表示するコードを「Messenger Connect sharing badge embed prototype」で作成できます。

▲ ▼

reddit.comボタン †

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

▲ ▼

複数ブックマークに対応したサービス †

上記で紹介した以外にも世界中にはブックマークサービスが山のようにあります。それらのボタンをすべて設置するのは困難です。多くのブックマークサービスに対応したいが、設置するのが面倒という時は、これらのサービスをまとめて提供してくれるサービスを利用すると便利です。以下にそのようなサービスを紹介します。

▲ ▼

AddThis †

一番有名で、機能も豊富なのは、AddThisです。AddThisについては、「AddThisボタンを表示する」で詳しく説明します。

▲ ▼

AddToAny †

AddToAnyもAddThisと同様のサービスを提供しています。AddToAnyについては、「AddToAnyボタンを表示する」で詳しく説明します。

▲ ▼

AddClips †

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

「AddClipsボタンをつくる - AddClips」でコードを取得できます。ユーザー登録の必要はありません。

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

<!-- 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 †

ShareThisも海外のサービスです。「Sharing Widget, Sharing Button, Sharing Plugin - ShareThis」でコードを取得できます。私が試した限りでは、ユーザー登録しない使えないようでした。

▲ ▼

終了したサービス †

以下のサービスは残念ながら終了してしまいました。

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

▲ ▼

コメント †

▲ ▼

ページ情報
カテゴリ : インターネット作成日 : 2011-09-03 (土) 18:03:45 作成者 : DOBON! 最終編集日 : 2012-03-05 (月) 01:54:53 最終編集者 : DOBON!

DoboWiki