新しい、はてなブックマークを設置しました。

2012.03.13
はてなブックマーク
このブログである、WebBoard(ウェブボード)に設置している、はてなブックマークのボタンを、新しくしました。

新しいボタンになったことで、はてなにログインしている場合は、Twitterやmixi、Facebookへの同時投稿が可能となりました。また、はてなブックマークの非公開設定も、その場で出来るようになりました。
はてなをご利用の方は、お試し下さい。


□ 設置方法
はてなブックマークのボタン設置は、比較的容易でした。
ページにあるツールを利用するだけで、HTMLソースを取得できます。以下に、簡単な仕様をメモしたいと思います。
<a href="http://b.hatena.ne.jp/entry/[URL]" class="hatena-bookmark-button" data-hatena-bookmark-title="[TITLE]" data-hatena-bookmark-layout="[OPTION]" title="このエントリーをはてなブックマークに追加">
<img src="//media.tree-web.net/img/download1.svg" data-src="http://b.st-hatena.com/images/entry-button/button-only.gif" class="upimg lazy" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a
><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


□ URLとTITLE
URLとTITLE部分は、URLエスケープ処理しないで挿入します。ただし、ダブルクォート「"」とシングルクォート「'」は、エスケープした方が良いと思います。(HTMLタグと干渉するため)
また、文字コードを意識する必要がありませんでした。(UTF-8やShift-JIS、EUCなど)
クォートのエスケープは、以下の&と数値の組み合わせで行います。
ダブルクォート → &#34;
シングルクォート → &#39;

□ OPTION
ボタンのタイプを選ぶことが出来ます。ボタンタイプは、「standard」「vertical」「simple」の3種類があり、当ブログは、カウント数を表示しない「simple」にしています。

なお、JavaScriptのHTMLソースは、ページ内の一カ所に設置するだけでいいです。</BODY>の直前に設置すると良いと思います。
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


□ 参考画像
以前のはてなブックマークボタン
はてなブックマーク
新しくした、はてなブックマークボタン
はてなブックマーク

はてなブックマークボタンを押したときの、ポップアップ画面
はてなブックマーク
はてなブックマーク


□ 参考サイト
はてなブックマークボタンの作成・設置について

コメント投稿フォーム

 

フィギュア

最近

カテゴリ

カプセルトイ

初音ミク

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard

PICUP