PrismCube
【Next.js】シェアボタンを設置する

【Next.js】シェアボタンを設置する

1 min read
Next.js React
Table of Contents

ライブラリ

react-share を使用します。
インストール

Terminal window
yarn add react-share

実装

まずはインポートします。
今回は Twitter, Facebook, Line, Hatenaを使用します。

import {
  TwitterShareButton,
  FacebookShareButton,
  LineShareButton,
  HatenaShareButton,
  TwitterIcon,
  FacebookIcon,
  LineIcon,
  HatenaIcon,
} from 'react-share'

後は設置したい箇所に、下記のように記載するだけです。

<TwitterShareButton url="https://prism-cube.com" title="ページタイトル">
  <TwitterIcon size={30} round={true} />
</TwitterShareButton>


<FacebookShareButton url="https://prism-cube.com" quote="ページタイトル">
  <FacebookIcon size={30} round={true} />
</FacebookShareButton>


<LineShareButton url="https://prism-cube.com" title="ページタイトル">
  <LineIcon size={30} round={true} />
</LineShareButton>


<HatenaShareButton url="https://prism-cube.com" title="ページタイトル">
  <HatenaIcon size={30} round={true} />
</HatenaShareButton>