react-shareで簡単にSNSシェアボタン

August 02, 2021

react で作られた web アプリケーションに、簡単に SNS シェアボタンを設置できる「react-share」の紹介です。

react-share とは？

ウェブサイトを育てる上で、SNS からの流入ユーザーは無視できません。SNS 上での投稿がサイト訪問への呼び水になりますし、いわゆる「バズる」現象も、そのほとんどが SNS での投稿が発端になります。ユーザーが SNS での記事共有に手間がかかる状態では、こうした SNS による爆発力を味方につけることができません。

react-shareを使うと、ウェブサイトに簡単に SNS シェアボタンを設置できます。対応している SNS も、下記のように多岐に渡ります。

Twitter
Facebook
Hatena
Line
Pinterest
LinkedIn
Tumblr
Email

etc…

なお、react-shareを利用できるウェブサイトは、以下に限られます。

react を用いた SPA によって構築されたウェブサイト。
react を用いた SSG(静的サイトジェネレーター)によって構築されたウェブサイト。

react-share の使い方

まずは、ウェブサイトにreact-shareを追加します。
ブログ記事のレンダリングを行っている箇所で、react-share をインポートします。

import {} from "react-share"

ここで、共有ボタンを設置したい SNS ごとに、xxxxButton、xxxxIconをインポートしておきます。

import {
  TwitterIcon,
  TwitterShareButton,
  LineShareButton,
  LineIcon,
  HatenaShareButton,
  HatenaIcon,
} from "react-share"

そして、以下のように書くだけで、ボタンが設置されます！

<div>
  <TwitterShareButton url={url} title={title}>
    <TwitterIcon size={32} />
  </TwitterShareButton>
  <LineShareButton url={url} quote={title}>
    <LineIcon size={32} />
  </LineShareButton>
  <HatenaShareButton url={url} quote={title}>
    <HatenaIcon size={32} />
  </HatenaShareButton>
</div>

なお、以下のように round=true にすることで、丸型のアイコンにすることもできます。

<TwitterShareButton url={url} title={title}>
  <TwitterIcon round={true} size={32} />
</TwitterShareButton>

SNS ボタンは SNS ごとに異なる仕様を実装する必要があり、複数 SNS 対応は面倒なのですが、react-shareを使うだけで簡単に対応できます。