1. シェアボタンについて
2. Twitter
3. Facebook
4. Livedoorクリップ
5. はてなブックマーク
6. Delicious
7. Googleブックマーク
8. Yahoo!ブックマーク
9. おわりに

シェアボタンについて

よくブログ記事の下部に設置されている連中ですね。
基本的にどのサービスも共有用のURLが用意されていて、
そこにシェアしたいURLとタイトルをパラメータで添えてアクセスします。
（サービスによってはタイトルを自動的に取得しに行くタイプの物もあります）

配布されているコードをコピー＆ペーストすれば簡単に設置出来ますが、
コードの内容やボタンのデザイン等がサイトにそぐわなかったり、
メンテナンスの都合等で制作者が自分でつくりこみたいケースもあります。
そういった場合は下記にまとめたURLとパラメータをa要素に記述してやります。

パラメータについて

[url]

シェアしたいページのURL

[title]

シェアしたいページのタイトル

※渡すURLとタイトルは、きちんとURLエンコードしてあげましょう。

Twitter

URL

http://twitter.com/share?url=[url]&text=[title]

例

<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.example.com&title=SamplePageTitle" target="_blank">Share on Twitter !</a>

Facebook

url

http://www.facebook.com/sharer.php?u=[url]

例

<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.example.com" target="_blank">Share on Facebook !</a>

Livedoorクリップ

url

http://clip.livedoor.com/clip/add?link=[url]&title=[title]

例

<a href="http://clip.livedoor.com/clip/add?link=http%3A%2F%2Fwww.example.com&title=SamplePageTitle" target="_blank">Share on Livedoor Clip !</a>

はてなブックマーク

url

http://b.hatena.ne.jp/add?url=[url]

例

<a href="http://b.hatena.ne.jp/add?url=http%3A%2F%2Fwww.example.com" target="_blank">Share on Hatena !</a>

Delicious

url

http://www.delicious.com/save?url=[url]&title=[title]

例

<a href="http://www.delicious.com/save?url=http%3A%2F%2Fwww.example.com&title=SamplePageTitle" target="_blank">Share on Delicious !</a>

Googleブックマーク

url

例

[Share on Google Bookmark !][13]

Yahoo!ブックマーク

url

http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=[title]&u=[url]&ei=UTF-8

例

<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=SamplePageTitle&u=http%3A%2F%2Fwww.example.com&ei=UTF-8" target="_blank">Share on Yahoo! Bookmark !</a>

おわりに

静的HTMLにこれらのパーツを組み込む案件があったのでまとめてみました。
ただ、実際1ページずつ組み込んで行くのは非常に生産性が悪いので、
JavaScriptで一括して処理しました。
そちらもプラグインにでも昇華出来た折にはまとめたいと思います。

※「このサービスも追加してくれ！」等ありましたら是非に。

2010/09/07

はてなブックマークのURLに誤りがあったので記事・DEMO共に修正しました