slontが2016年8月30日に投稿(2016年9月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

slont

元金融エンジニア。メイン言語はJava, HTML, JavaScript, Python, Kotlinあたり。SECCONやCTF、NLP、機械学習に興味あり。金融日記購読4年。巷で話題の変態紳士。美女ソムリエ始めてました。 お仕事の依頼はTwitterからお願いします。

comments powered by Disqus
Back to top