【Gatsby】ブログに SNS シェアボタンを設置した

2023/01/18

Gatsby

今年はアクセス数を増やしていきたいと思っているので、 SNS シェアボタンを設置してみた

実装するにあたって、以下の記事を参考にした

コード

同じ Gatsby 製なのに書き方が違っていたので、一応参考として載せておく

src/components/share-button-list.js

import React from "react"
import {
  FacebookIcon,
  FacebookShareButton,
  HatenaIcon,
  HatenaShareButton,
  LineIcon,
  LineShareButton,
  TwitterIcon,
  TwitterShareButton,
  PocketIcon,
  PocketShareButton
} from "react-share"

const ShareButtonList = ({ title, url }) => {
  return (
    <>
      <h2>SNS でシェアする</h2>
      <div
        style={{
          display: `flex`,
          margin: `12px 0`
        }}
      >
        <div style={{ paddingRight: `12px` }}>
          <TwitterShareButton title={title} url={url} >
            <TwitterIcon size={60} round />
          </TwitterShareButton>
        </div>

        <div style={{ paddingRight: `12px` }}>
          <FacebookShareButton url={url}>
            <FacebookIcon size={60} round />
          </FacebookShareButton>
        </div>

        <div style={{ paddingRight: `12px` }}>
          <LineShareButton url={url} >
            <LineIcon size={60} round />
          </LineShareButton>
        </div>

        <div style={{ paddingRight: `12px` }}>
          <PocketShareButton url={url} >
            <PocketIcon size={60} round />
          </PocketShareButton>
        </div>

        <div style={{ paddingRight: `12px` }}>
          <HatenaShareButton url={url} >
            <HatenaIcon size={60} round />
          </HatenaShareButton>
        </div>
      </div>
    </>
  )
}

export default ShareButtonList