jsSocialsで、はてなブックマークボタンを設置してみたらなんか捗った

プログラミング 2016年8月30日

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

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

そんな時は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もやりたい。