X(旧 Twitter)へのポストボタンを Next.js で作ったブログに設置

まとめ

• X(旧 Twitter)へのポストボタンを Next.js で作ったブログに設置した
• ボタンを押すことで、X にポストできるようになった

実装

ウェブサイトにツイートボタンを追加する方法 を参考に設置しようと思っていたのですが、X ではなく Twitter のデザインだったので今回は利用しませんでした。

XShareButton の作成

下記の配色・デザインを参考に実装しました。

• ウェブサイトにツイートボタンを追加する方法 の ポスト ボタンのデザイン
• ホーム / X の おすすめユーザー の フォロー ボタンのデザイン

components/SocialButtons/XShareButton.tsx

import styles from "@/components/SocialButtons/XShareButton.module.scss";
import Link from "next/link";

export default function XShareButton({
  title,
  url
}: {
  title: string;
  url: string;
}) {
  return (
    <Link
      href={`https://twitter.com/intent/tweet?text=${title}&url=${url}`}
      className={styles.xShareButtonWrapper}
      target="_blank"
    >
      <svg
        viewBox="0 0 1200 1227"
        xmlns="http://www.w3.org/2000/svg"
        role="none"
        className={styles.xShareButtonIcon}
      >
        <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
      </svg>
      <span className={styles.xShareButtonLabel}>
        ポスト
      </span>
    </Link>
  );
}

components/SocialButtons/XShareButton.module.scss

.xShareButtonWrapper {
  align-items: center;
  background-color: #eff3f4;
  border-radius: 3px;
  display: inline-flex;
  height: 58px;
  justify-content: center;
  padding: 0 18px 0 16px;

  &:hover {
    background-color: #d7dbdc;
    text-decoration: none;
  }
}

.xShareButtonIcon {
  height: 21px;
  width: 20px;
}

.xShareButtonLabel {
  color: #0f1419;
  font-family: Helvetica Neue LT,Helvetica Neue,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12px;
  line-height: 24px;
  margin-left: 8px;
}

XShareButtonComponent の呼び出し

はてなブックマークボタンを 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;
}

参考

• ウェブサイトにツイートボタンを追加する方法
• ホーム / X