SNSのシェアボタンを作る為のURL&パラメータメモ
この記事は賞味期限切れです。（更新から1年が経過しています）
ソーシャルブックマークサービスやソーシャルネットワークサービスが巷に多く溢れる昨今、
ページの下部にシェアボタンを追加しているサイトを目にすることも多くなってきました。
ほとんどのサービスがブログパーツとしてコードを配布していますが、勿論仕様もまちまちです。
そこでちょっと備忘録としてまとめておきます。
シェアボタンについて
よくブログ記事の下部に設置されている連中ですね。
基本的にどのサービスも共有用のURLが用意されていて、
そこにシェアしたいURLとタイトルをパラメータで添えてアクセスします。
（サービスによってはタイトルを自動的に取得しに行くタイプの物もあります）
配布されているコードをコピー＆ペーストすれば簡単に設置出来ますが、
コードの内容やボタンのデザイン等がサイトにそぐわなかったり、
メンテナンスの都合等で制作者が自分でつくりこみたいケースもあります。
そういった場合は下記にまとめたURLとパラメータをa要素に記述してやります。
パラメータについて
- [url]
- シェアしたいページのURL
- [title]
- シェアしたいページのタイトル
※渡すURLとタイトルは、きちんとURLエンコードしてあげましょう。
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>
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
https://www.google.com/bookmarks/mark?op=add&bkmk=[url]&title=[title]
例
[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共に修正しました
コメント