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もやりたい。

slont

金融ベンチャーでWebエンジニア

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.