はてなブックマークボタン(バーティカルタイプ)の設置例
本稿では、バーティカルタイプの、はてなブックマークボタンのソースコードの取得と、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>