Mach3.laBlog

SNSのシェアボタンを作る為のURL&パラメータメモ

この記事は賞味期限切れです。(更新から1年が経過しています)

ソーシャルブックマークサービスやソーシャルネットワークサービスが巷に多く溢れる昨今、
ページの下部にシェアボタンを追加しているサイトを目にすることも多くなってきました。
ほとんどのサービスがブログパーツとしてコードを配布していますが、勿論仕様もまちまちです。
そこでちょっと備忘録としてまとめておきます。

SNSのシェアボタンを作る為のURL&パラメータメモ

  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

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共に修正しました

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

SNSのシェアボタンのリンクを挿入するjQueryプラグイン | Mach3.laBlogd41d8cd98f00b204e9800998ecf8427e