はじめに

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サイトにはてなブックマークボタンを配置できました！

参考リンク

はてなブックマークボタンの作成・設置について