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

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

（更新: ） · 2分で読める
Tech

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

react-shareを入れる

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

Terminal window
> 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 を忘れるとただアイコンが並ぶだけになってしまうので、注意してください。

テンプレートディレクティブの概要
docs.astro.build

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

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

まとめ

自分でブログを書いたあとにシェアする！がとてもやりやすくなって良かったです。 XのAPIを使うのが面倒になった(と思っている)ので、デプロイされたら勝手にツイートする。までは手をかけたくないな〜なんて思っていました。ちょうどよい塩梅です。 Reactのコンポーネントをシュッと作って一部分だけ載せられるAstroはとても便利だなぁと思いました。

関連記事