Next.jsで記事下に SNSシェアボタンを作る

Web制作

Next.js

microCMS

2024/10/10このページはPRを含みます

完成系イメージ

以下のようにX、Facebook、はてなブックマークを追加している。

SNSコンポーネントを作成する

まずはSNSコンポーネントを作成する。SNSディレクトリを作成し、index.tsxとndex.module.cssを作成し、以下のように作成した。

import Image from "next/image";
import styles from "./index.module.css";

type Props = {
  id: string;
  title: string;
};

export const Share: React.FC<Props> = (props) => {
  const { id, title } = props;

  if (!id || !title) {
    return null;
  }

  const twitterLink = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
    title
  )}&url=https://monaka496.com/blog/${id}/`;　//URLは自分のサイトに置き換える
  const facebookLink = `https://www.facebook.com/sharer.php?u=https://monaka496.com/blog/${id}/`; //URLは自分のサイトに置き換える
  const hatenaLink = `https://b.hatena.ne.jp/entry/https://monaka496.com/blog/${id}/`; //URLは自分のサイトに置き換える

  return (
    <div className={styles.share}>
      <h3 className={styles.sharetitle}>記事をシェアする</h3>
      <ul className={styles.shareul}>
        <li>
          <a
            href={twitterLink}
            className={`${styles.sharebutton} ${styles.sharex}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_x.svg"　//アイコンは適宜用意
              alt="Xでシェアする"
              className={styles.icon}
              width={16}
              height={16}
            />
            ポストする
          </a>
        </li>
        <li>
          <a
            href={facebookLink}
            className={`${styles.sharebutton} ${styles.sharefb}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_facebook.svg"　//アイコンは適宜用意
              alt="Facebookでシェアする"
              className={styles.icon}
              width={16}
              height={16}
            />
            シェアする
          </a>
        </li>
        <li>
          <a
            href={hatenaLink}
            className={`${styles.sharebutton} ${styles.sharehatena}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src="/icon_hatena.svg"　//アイコンは適宜用意
              alt="はてなブックマークする"
              className={styles.icon}
              width={16}
              height={16}
            />
            ブックマークする
          </a>
        </li>
      </ul>
    </div>
  );
};

export default Share;

続いてCSSは以下のようにした。microCMSブログのデザインを参考にしている。

.share {
  background-color: #f7f7fc;
  border-radius: 5px;
  margin-top: 40px;
  padding: 24px;
}
.sharetitle {
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 16px;
  text-align: center;
}
.shareul {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sharebutton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  width: 200px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.sharebutton:hover {
  background-color: #f0f0f0;
}
.sharex {
  border: 1px solid #0f1419;
  color: #0f1419;
}
.sharefb {
  border: 1px solid #1877f2;
  color: #1877f2;
}
.sharehatena {
  border: 1px solid #00a4de;
  color: #00a4de;
}
.icon {
  display: block;
}

@media (max-width: 768px) {
  .shareul {
    flex-direction: column;
    gap: 0px;
  }

  .sharebutton {
    font-size: 12px;
    margin-bottom: 16px;
    margin-left: 0;
    width: 100%;
  }
}

articleコンポーネントで呼び出し

記事表示部分で呼び出す。自分はarticleコンポーネントを利用しているので、そちらに以下を追加した

import SNS from "../SNS";

（中略）

{/* SNSを表示 */}
<SNS id={data.id} title={data.title} />

まとめ

今回やっていることは、各記事ごとのIDを取得し、それを各SNSのシェアリンクに埋め込むことで記事ごとのシェアボタンを作成していた。URLはBaseURLのように置き換えてもよいが、そこまで変更することもないと思い、自分のサイトは直書きしているが適宜置き換えてほしい。

Next.js＋ヘッドレスCMSではじめる！かんたんモダンWebサイト制作入門高速で、安全で、運用しやすいサイトのつくりかた

Amazon 楽天市場 Yahoo!ショッピング

記事をシェアする

Next.jsで記事下に SNSシェアボタンを作る

目次

完成系イメージ

SNSコンポーネントを作成する

articleコンポーネントで呼び出し

まとめ

記事をシェアする

関連記事

Next.jsで作ったサイトにGoogleアドセンスの広告を追加した

Next.jsで記事のリッチリザルト対応をする（JSON-LD）

【SSGform】お問い合わせフォームのスパム対策をする

【SSGform】Next.jsで構築したサイトにお問い合わせフォームを設置する