jsSocialsで、はてなブックマークボタンを設置してみたらなんか捗った
個人ブログを作っていると、ソーシャルボタンが欲しくなりますよね。
とはいえ、イチから作るのはめんどくさい。
そんな時は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もやりたい。