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

react-shareを用いて、このブログにシェアボタンを追加しました。これです。

react-shareを入れる

今回はreact-shareを使うので、それをインストールしましょう。

> npm install react-share

2024/5/19現在、 npm intall react して得られるのはv19のbeta版なため、もしもすでにreactが入っていてうまく動かない方は18系をバージョン指定してインストールすると良さそうです(僕はかかった)。ダウングレードをするのが難しい方は、--legacy-peer-deps しても動くかもしれないです。

コンポーネントを作って利用する

import React from 'react';

import {
  TwitterShareButton, XIcon,
  FacebookShareButton, FacebookIcon,
  HatenaShareButton, HatenaIcon
} from 'react-share';

interface Props {
  url: string;
  title: string;
}

export const SocialShareButtons: React.FC<Props> = (props) => {
  const { url, title } = props
  const buttonStyle = {
    padding: "4px",
    margin: "4px",
    alignItems: "center"
  };

  return (
    <>
      <HatenaShareButton url={url} style={buttonStyle}>
        <HatenaIcon round size={40} />
      </HatenaShareButton>
      <FacebookShareButton url={url} style={buttonStyle}>
        <FacebookIcon round size={40} />
      </FacebookShareButton>
      <TwitterShareButton url={url} title={title} style={buttonStyle}>
        <XIcon size={40} round />
      </TwitterShareButton>
    </>
  )
}

SocialShareButton.tsx

import { SocialShareButtons } from '../../components/SocialShareButton.tsx';
...
---
...
<SocialShareButtons title={post.Title} url={getPostFullLink(post)} client:load/>
...

[slug].astro

client:load を忘れるとただアイコンが並ぶだけになってしまうので、注意してください。

Template Directives Reference

https://docs.astro.build

urlを参照する際に、既存の getPostLink では相対パスしか取得できないので、URLフルパスを取得できるようにしましょう。現段階では特別にハッシュタグなどをつけるつもりもないので、こんな感じでよいかなと思います。

export const getPostFullLink = (post: Post) => {
  return new URL(getPostLink(post), import.meta.env.SITE).toString();
}

blog-helperr.ts

まとめ

自分でブログを書いたあとにシェアする！がとてもやりやすくなって良かったです。

XのAPIを使うのが面倒になった(と思っている)ので、デプロイされたら勝手にツイートする。までは手をかけたくないな〜なんて思っていました。ちょうどよい塩梅です。

Reactのコンポーネントをシュッと作って一部分だけ載せられるAstroはとても便利だなぁと思いました。