[JS]ソーシャルボタンを簡単に追加できるJavaScript

bloggerの機能として付いているソーシャルボタンは
gmailに送るとかg+に送るとかあまり使えたもんじゃないので、ガッと簡単に追加できれば嬉しいな、ということで探した結果、楽ちんに追加できるJavaScriptを発見したので紹介します。

Social Media Buttonsという名前のプロジェクトでgithubに上がっていますが面倒な事はおまかせで、表示させたい部分にちょこっとソースを書き込むだけでOKです。
うちのブログにも設置してみました。

上のリンク先にも書いていますがmd5.jsとsmb.jsをロードするだけで下準備は完了です。

と書くだけでは意味がないので、bloggerでの利用を想定した設置方法を。
上記の2つのファイルを、githubから直接ロードするようにします。

<script type="text/javascript" src="https://raw.github.com/clown/smb/master/md5.js"></script>
<script type="text/javascript" src="https://raw.github.com/clown/smb/master/smb.js"></script>

これをbloggerのレイアウトでHTMLを直接編集してheadタグ内に入れます。どこでも大丈夫だと思いますが、困ったら一番最後にでも入れましょう。</head>で検索するとすぐに分かると思います。ちなみにウィジェットを展開したHTMLで修正を行います。

次に、実際に表示させたい部分に表示用のコードを書きます。

smb.show(smb.twitter);

上のコードだけで、twitterのソーシャルボタンが表示されます。「|」で連結すれば、複数のソーシャルボタンを一括で表示できるらしいですが、表示順≠記述順なので、一つ一つ書く方をオススメします。

smb.show(smb.twitter);
smb.show(smb.facebook);
smb.show(smb.tumblr);
smb.show(smb.hatena);
smb.show(smb.delicious);

HTMLの直接編集はバックアップを取って、いつでも戻せる状態にしてから、ガシガシやりましょう！


github: Social Media Buttons