個人ブログを作っていると、ソーシャルボタンが欲しくなりますよね。


とはいえ、イチから作るのはめんどくさい


そんな時はjsSocialsが便利です。



jsSocialsの使い方

使い方は簡単。以下のように各ファイルを読みこませるだけ。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="jssocials.css" />
    <link rel="stylesheet" type="text/css" href="jssocials-theme-flat.css" />
</head>
<body>
    <div id="share"></div>

    <script src="jquery.js"></script>
    <script src="jssocials.min.js"></script>
    <script>
        $("#share").jsSocials({
            shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
        });
    </script>
</body>
</html>

https://github.com/slont/jssocials


あとは#shareのように指定した要素にシェアボタンが表示されます。


(何故か僕の環境下でカウントが表示されなかったため、ブログでは簡易版のボタンを表示して使っています。)


ところが、このjsSocials、たくさんのプラットフォームのボタンが用意されているんですが、はてブのがありません
これは日本人にとっては痛いですね。



はてブ用ボタンを用意しました

ソースは
GitHubに置いてあります。


使い方は変わらず、指定するSNSにhatenaを追加するだけです。表示サンプルは以下です。



ただ、はてブのカウント取得が上手くいかない(URLが間違っている?)ので、原因が分かり次第修正します。


まあ、ボタンのみで使う分には支障ないと思います。


余裕があればPocketもやりたい。