はてなブックマークボタン(バーティカルタイプ)の設置例

本稿では、バーティカルタイプの、はてなブックマークボタンのソースコードの取得と、HTML5ドキュメントへの記述例を掲載しています。


はてなブックマークボタンのコードの取得。


はてなブックマークボタン作成ページ 450px×397pxに縮小して表示しています。

はてなブックマークボタン作成ページへアクセスします。


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>

上記のHTML5ドキュメント