[Gatsby]react-shareでシェアボタンを設置する

July 27th, 2020

プラグインのインストール

yarn add react-share

コンポーネントの作成

src/components/share-buttons.tsx 
import React, { Children } from 'react'
import {
  FacebookShareButton,
  TwitterShareButton,
  LineShareButton,
  WeiboShareButton,
  FacebookIcon,
  TwitterIcon,
  LineIcon,
  WeiboIcon
} from 'react-share';

type Props = {
  url: string
}

const Component: React.FC<Props> = ({ url }) => {
  return (
    <div>
      <FacebookShareButton url={url}>
        <FacebookIcon round={true} />
      </FacebookShareButton>
      <TwitterShareButton url={url}>
        <TwitterIcon round={true} />
      </TwitterShareButton>
      <LineShareButton url={url}>
        <LineIcon round={true} />
      </LineShareButton>
      <WeiboShareButton url={url}>
        <WeiboIcon round={true} />
      </WeiboShareButton>
    </div>
  )
}

export default Component

記事URLの取得

シェアボタンに渡す記事URLの取得で詰まりました。 この記事を参考にしつつ試行錯誤して、最終的にgatsby-config.jsで設定したsiteUrlをtemplate側のQueryで取ってくる方法に落ち着きました。gatsby-config.jsの中で環境変数にアクセスできるようなのでdevelopment/productionの切り替えもここで対応しました。

gatsby-config.js 
module.exports = {
  siteMetadata: {
    title: 'Gatsby Contentful starter',
    siteUrl: process.env.SITE_URL
  },
  pathPrefix: '/gatsby-contentful-starter',
.env.development 
SITE_URL='http://localhost:8000'
.env.production 
SITE_URL='https://condescending-albattani-ef42f9.netlify.app'

※.env.productionはGitHubに上げていないのでNetlify上で環境変数に設定しました

ボタン設置

templates/blog-post.js 
const siteUrl = get(this.props, 'data.site.siteMetadata.siteUrl')
.
.
.
<ShareButtons url={`${siteUrl}/${post.slug}`} />

スタイルの修正

そのままでは少し不恰好なのでスタイルを修正します。CSSモジュールでスタイルを適用し、ボタンの間隔を広げます。

src/components/share-buttons.module.css 
.button {
  margin: 5px;
}

スタイルが適用されるようにコンポーネントを修正します。同時にボタンサイズも変更してみます。ボタンサイズの変更は＊＊Iconのsizeプロパティで変更します。

src/components/share-buttons.tsx 
const styles = require('./share-buttons.module.css')

type Props = {
  url: string
}

const Component: React.FC<Props> = props => {
  const size = 32;
  return (
    <div className={styles.shareButtons}>
      <FacebookShareButton className={styles.button} url={props.url}>
        <FacebookIcon round={true} size={size} />
      </FacebookShareButton>
      <TwitterShareButton className={styles.button} url={props.url}>
        <TwitterIcon round={true} size={size}/>
      </TwitterShareButton>
      <LineShareButton className={styles.button} url={props.url}>
        <LineIcon round={true} size={size}/>
      </LineShareButton>
      <WeiboShareButton className={styles.button} url={props.url}>
        <WeiboIcon round={true} size={size}/>
      </WeiboShareButton>
    </div>
  )
}