はてなブックマークボタンを Next.js で作ったブログに設置

まとめ

• はてなブックマークボタンを Next.js で作ったブログに設置した
• どれくらいはてなブックマークされているか確認できるようになった

はてなブックマークボタン とは？

はてなブックマークボタンは、はてなブックマークが提供するソーシャルボタンです。 ボタンを利用すると、ユーザーはその場でページをブックマークすることができます。

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

はてなブックマークボタンの作成

はてなブックマークボタンの作成・設置について のページで、デザインを選びました。

1. ボタンのデザインを選びましょう

2. ボタンの設定をしましょう

• サイズ: 大きいボタン
• 表示言語: 日本語
• 保存する URL: ページの URL を使う

3. ボタンを確認しましょう

4. ページにコードを貼りましょう

生成されたコード。

<a
  href="https://b.hatena.ne.jp/entry/"
  class="hatena-bookmark-button"
  data-hatena-bookmark-layout="vertical-large"
  data-hatena-bookmark-lang="ja"
  title="このエントリーをはてなブックマークに追加"
>
  <img
    src="https://b.st-hatena.com/images/v4/public/entry-button/[email protected]"
    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>

実装

API Reference: Components | Next.js を参考に Next.js のコンポーネントを使う形に書き換えました。

components/SocialButtons/HatenaBookmarkButton.tsx

import Image from "next/image";
import Link from "next/link";
import Script from 'next/script';

export default function HatenaBookmarkButton() {
  return (
    <>
      <Link
        href="https://b.hatena.ne.jp/entry/"
        className="hatena-bookmark-button"
        data-hatena-bookmark-layout="vertical-large"
        data-hatena-bookmark-lang="ja"
        title="このエントリーをはてなブックマークに追加"
      >
        <Image
          src="https://b.st-hatena.com/images/v4/public/entry-button/[email protected]"
          alt="このエントリーをはてなブックマークに追加"
          width="20"
          height="20"
          style={{ border: 'none' }}
        />
      </Link>

      <Script
        type="text/javascript"
        src="https://b.st-hatena.com/js/bookmark_button.js"
        strategy="lazyOnload"
      />
    </>
  );
}

Script コンポーネントの strategy="lazyOnload"

はてなブックマークボタン といった、ソーシャルメディアのウィジェットなど、早期にロードする必要のないバックグラウンドスクリプトで使用します。 スクリプトは、ブラウザのアイドル時間中に HTML のクライアント側に挿入され、ページ上のすべてのリソースが取得された後にロードされます。

• 参考: Optimizing: Scripts | Next.js

HatenaBookmarkButton の呼び出し

X(旧 Twitter)へのポストボタンを Next.js で作ったブログに設置 - hene.dev で設置した X へのポストボタン も一緒に呼び出して表示するようにしました。

components/SocialButtons/index.tsx

import HatenaBookmarkButtonComponent from "@/components/SocialButtons/HatenaBookmarkButton";
import XShareButtonComponent from "@/components/SocialButtons/XShareButton";
import styles from "@/components/SocialButtons/index.module.scss";

export default function SocialButtons({
  title,
  url
}: {
  title: string;
  url: string;
}) {
  return (
    <div className={styles.SocialButtons}>
      <XShareButtonComponent title={title} url={url} />
      <HatenaBookmarkButtonComponent />
    </div>
  );
}

components/SocialButtons/index.module.scss

.SocialButtons {
  margin: 3rem 0;
  display: flex;
  flex-flow: row wrap;
  gap: 25px;
}

参考

• はてなブックマークボタンの作成・設置について
• API Reference: Components | Next.js
  • Optimizing: Scripts | Next.js