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>
</>
)
}
import { SocialShareButtons } from '../../components/SocialShareButton.tsx';
...
---
...
<SocialShareButtons title={post.Title} url={getPostFullLink(post)} client:load/>
...
client:load
を忘れるとただアイコンが並ぶだけになってしまうので、注意してください。
urlを参照する際に、既存の getPostLink
では相対パスしか取得できないので、URLフルパスを取得できるようにしましょう。現段階では特別にハッシュタグなどをつけるつもりもないので、こんな感じでよいかなと思います。
export const getPostFullLink = (post: Post) => {
return new URL(getPostLink(post), import.meta.env.SITE).toString();
}
まとめ
自分でブログを書いたあとにシェアする!がとてもやりやすくなって良かったです。
XのAPIを使うのが面倒になった(と思っている)ので、デプロイされたら勝手にツイートする。までは手をかけたくないな〜なんて思っていました。ちょうどよい塩梅です。
Reactのコンポーネントをシュッと作って一部分だけ載せられるAstroはとても便利だなぁと思いました。