ブログにシェアボタンを付ける

いまさらながら
「シェアボタンってどうやって作るんだっけ？」
ってなったので
facebookとtwitterを調べた。

http://www.facebook.com/sharer.php?u=[url]&t=[text]
http://twitter.com/share?url=[url]&text=[text]

こうゆうURLを作ればイイみたい。

ブログ用のスクリプトにするとこんな感じ

var createShareUrl = function(baseUrl, urlKey, textKey) {
    return baseUrl + '?' + urlKey + '=' + encodeURIComponent(location.href) + '&' + textKey + '=' + encodeURIComponent(document.title);
};

var createFacebookShareUrl = function() {
    return createShareUrl('http://www.facebook.com/sharer.php', 'u', 't') ;
};

var createTwitterShareUrl = function() {
    return createShareUrl('http://twitter.com/share', 'url', 'text') ;
};

あら簡単。
てことで記事詳細の下に
シェアボタンを追加してみました。

コード的にはこんな感じ。

<a class="share facebook">シェアする</a>
<a class="share twitter">ツイートする</a>
<script>
document.querySelector('a.share.facebook').href = createFacebookShareUrl();
document.querySelector('a.share.twitter').href = createTwitterShareUrl();
</script>

クラス名を"share facebook"にしたaリンクを置いておくと
jsがそこにシェアのURLを付けてくれます。

↓コレはちょっと色気付いてデザインいれました。いい感じ。