「Webサイトに共有ボタンを配置する」はシリーズになっています。
- ツイートボタン
- はてなブックマークボタン ←イマココ
はじめに
Webサイトにはてなブックマークボタンを配置する方法を紹介します。
はてなブックマークボタンのHTML
はてなブックマークボタンのHTMLを配置するのみです。
<a href="https://b.hatena.ne.jp/entry/"
class="hatena-bookmark-button"
data-hatena-bookmark-layout="basic-label-counter"
data-hatena-bookmark-lang="ja"
title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/v4/public/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>
このHTMLをWebサイトに表示すると、以下のボタンが表示されます。
ボタンを押下すると、はてなブックマークの共有画面が開きます。
| はてブボタン | 共有画面 |
|---|---|
 |
 |
class="hatena-bookmark-button" を付けることで bookmark_button.js がはてなブックマークボタンと認識し、ボタンが表示されます。
記事のURLは自動的に取得され、明示的に指定する必要がありません。
そのためHTMLを動的に構築する必要がなく、実装が楽です。
JSの読み込み
bookmark_button.js を非同期で読み込むのみです。
おわりに
これでWebサイトにはてなブックマークボタンを配置できました！