SNSシェア機能にタグを入れてちょっとだけ強化した

astro-notion-blogにreact-shareでシェアボタンを入れる

上記の記事で、記事にSNSシェア用のボタンを追加してみたのですが、このときは「記事タイトルとURLをシェアする」だけのシンプルなものになっていました。

今回はそのシェア機能をちょっとパワーアップさせた、というお話です。具体的には、記事ごとに自由にハッシュタグを設定できるようにしました。ブログカテゴリで使っているタグに限らず、任意のタグを使えるようになっています。

仕様の背景

記事に設定している「タグ」をそのままハッシュタグとして流用するのは手っ取り早いのですが、ブログの分類用タグとSNSで広げたいハッシュタグって、必ずしも同じ意図じゃないことが多くないですか？

SNSの拡散を意識してタグを作ると、今度はブログ側のタグが乱立してしまいそうだし、その逆にブログのカテゴリ用タグをそのまま使うと、ハッシュタグとしてはちょっとぼんやりしちゃう。

そこで、記事データにSNSシェア専用のハッシュタグを別で持たせることにしました。これなら柔軟に使い分けられますね。

実装概要

1. Notionデータベースにプロパティを追加

まず、記事データを管理しているNotionのデータベースに、SNS用ハッシュタグを格納するためのプロパティを追加しました。

プロパティ名: SocialShareHashtags
タイプ: テキスト

ここには、使いたいハッシュタグをカンマ区切りで入力しておきます。たとえば「astro,blog,javascript」みたいな感じ。

2. 型定義の更新 (`src/lib/interfaces.ts`)

アプリ側でもこのプロパティが使えるように、Post インターフェースに SocialShareHashtags を追加しました。

export interface Post {
  // ... (既存のプロパティ)
  SocialShareHashtags?: string; // Optionalな文字列型として追加

src/lib/interfaces.ts

3. Notionクライアントの改修 (`src/lib/notion/client.ts`)

Notion APIからデータを取ってくるときに、このプロパティもちゃんと拾えるように _buildPost を修正していきます。

function _buildPost(pageObject: responses.PageObject): Post {
  const prop = pageObject.properties;

  // ... (既存のプロパティの処理)

  return {
    // ... (既存のプロパティのマッピング)
    SocialShareHashtags: prop.SocialShareHashtags?.rich_text?.[0]?.plain_text || undefined,
  };
}

src/lib/notion/client.ts

4. 記事ページコンポーネントの修正 (`src/pages/posts/[slug].astro`)

記事ページのシェアボタンに、この新しいプロパティを渡すようにします。

---
// ... (略)
import { SocialShareButtons } from '../../components/ShareButton.tsx';

const post = await getPostBySlug(slug);
// ... (略)
---

<!-- ... (略) ... -->
<SocialShareButtons
  title={post.Title}
  url={getPostFullLink(post)}
  tags={post.Tags}
  socialShareHashtags={post.SocialShareHashtags} {/* ← これを追加！ */}
  client:load
/>
<!-- ... (略) ... -->

src/pages/posts/[slug].astro

5. シェアボタンコンポーネントの機能拡張 (`src/components/ShareButton.tsx`)

SocialShareButtons コンポーネント側で、渡された socialShareHashtags を使ってハッシュタグを生成します。
「#あでぃ工房」「#blog」は固定タグとして設定し、そこに記事ごとのハッシュタグをプラスする感じですね。

import React from 'react';
import type { SelectProperty } from '../lib/interfaces';
// ... (react-shareのimportなど) ...

interface Props {
  url: string;
  title: string;
  tags?: SelectProperty[];
  socialShareHashtags?: string; // 追加
}

export const SocialShareButtons: React.FC<Props> = (props) => {
  const { url, title, tags = [], socialShareHashtags } = props;
  // ...

  let generatedHashtags: string[] = [];
  if (socialShareHashtags) {
    // SocialShareHashtags があればそれをパース
    generatedHashtags = socialShareHashtags.split(',').map(tag => tag.trim()).filter(tag => tag);
  } else {
    // なければ従来のタグから生成
    generatedHashtags = tags
      .map(tag => tag.name.replace(/\\s+/g, '')) // 空白除去
      .filter(tag => tag);
  }

  // 固定ハッシュタグと結合
  const allHashtags = ['あでぃ工房', 'blog', ...generatedHashtags];

  return (
    <>
      <TwitterShareButton url={url} title={title} hashtags={allHashtags} style={buttonStyle}>
        <XIcon size={40} round />
      </TwitterShareButton>
    </>
  );
};

src/components/ShareButton.tsx

まとめ

これで記事ごとに自由にSNS用ハッシュタグを設定できるようになりました！

SocialShareHashtagsをNotion上でAI Autofillとかにしておけば、記事を書けば勝手に記事内容に沿ったキーワードを2〜3個をハッシュタグとしてシェアできる、とってもいい感じの構築ができます。これはもうNotionでブログを書くことができるastro-notion-blogの強みですね。

これでちょっとでもアクセスが増えてくれたらうれしいな。
せっかく書いてるし、読んでもらいたいですしね 🫶