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

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

▲ ▼

Google +1 ボタン †

google_plusone1.png

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

▲ ▼

twitter ツイートボタン †

twitter2.png

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

▲ ▼

facebookのいいねボタン †

facebook3.png

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

▲ ▼

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

hatena1.png

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

▲ ▼

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

yahoo1.png

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

▲ ▼

mixiチェックボタンとイイネ!ボタン †

これらのボタンを作成するには、登録が必要です。設置方法は、「mixiチェック << mixi Developer Center (ミクシィ デベロッパーセンター)」と「イイネ！ボタン << mixi Developer Center (ミクシィ デベロッパーセンター)」に説明があります。

▲ ▼

GREE いいね!ボタン †

「Social Feedback - GREE Developer Center（グリー デベロッパーセンター）」に設置方法があります。

▲ ▼

Delicious Save Buttons †

Deliciousの「Save this on Delicious」ボタンの設置方法は、「Tools – Delicious」にあります。

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

さらに登録者数やその日にちの推移のグラフも表示できます。コードは、「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>
delicious1.png
▲ ▼

LinkedIn Share Button †

linkedin1.png

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

Tumblr共有ボタン/フォローボタン †

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

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

<!-- このコードを、ページの</body>タグのすぐ前に追加してください。 -->
<script src="http://platform.tumblr.com/v1/share.js"></script>

<!-- Put this tag wherever you want your button to appear -->
<span id="tumblr_button_abc123"></span>

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

<!-- 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>
▲ ▼

Messenger Connect Sharing badge †

Windows Live Messenger Connect badgeを表示させる方法は、「Windows Live Messenger Connect Developer Guide, Version 4.1」にあります。

例えば「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://img.wlxrs.com/$Live.SN.MessengerBadge/icon16wh.png" alt="Share with Messenger" /></a>

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

fileicon16wh.png fileicon16or.png

▲ ▼

reddit.comボタン †

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

▲ ▼

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

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

▲ ▼

AddThis †

addthis7.png

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

▲ ▼

AddToAny †

addtoany1.png

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

▲ ▼

AddClips †

addclips1.png

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」でコードを取得できます。私が試した限りでは、ユーザー登録しない使えないようでした。

▲ ▼

終了したサービス †

終了したサービスは、「廃止されたシェア、ブックマークボタン」に移しました。

▲ ▼

コメント †


▲ ▼
ページ情報
[ トップ ]   [ 新規 | 子ページ作成 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]