はてなブックマークボタン（バーティカルタイプ）の設置例
本稿では、バーティカルタイプの、はてなブックマークボタンのソースコードの取得と、HTML5ドキュメントへの記述例を掲載しています。
はてなブックマークボタンのコードの取得。
- 1.ボタンのタイプを選びましょう
- ブックマーク数の表示をバーティカル（バルーン）タイプにするので、画面右側のボタンを選択します。
- 2.ボタンの設定をしましょう
- ページのアドレス
- 空欄でOKです。はてなブックマークボタンを掲載するページのURLは自動で取得してくれます。
- ページのタイトル
- 空欄でOKです。はてなブックマークボタンを掲載するページのタイトルはtitle要素より自動で取得してくれます。
- ブックマーク数
- 表示（バーティカル）を選択します。
- 表示言語
- 日本語（デフォルトの位置）を選択します。
設定が終わりましたら、「3.ボタンを確認しましょう」にコードが表示されます。
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
取得したはてなブックマークのコードをHTML5ドキュメントに記述します。
HTML5ドキュメント記述例）
取得したはてなブックマークのコードをHTML5ドキュメントの、ボタンを表示したい場所に記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</footer>
</body>
</html>