2019.05.23

GatsbyJSで構築したサイトにSNSのシェアボタンを設置する方法

今回はGatsbyJSで構築したサイトにSNSのシェアボタンを設置する方法をまとめいきます。

GatsbyJS

フロントエンド

[ 目次 ]

はじめに
react-shareのインストール
SNSシェアボタンを設置
最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はGatsbyJSで構築したサイトに、SNSのシェアボタンを設置したいと思います。
nygardk/react-share を利用して簡単に組み込んでみましょう！

react-shareのインストール

■ npmを利用する場合

$ npm install react-share --save

■ yarnを利用する場合

$ yarn add react-share

SNSシェアボタンを設置

今回は以下のボタンを設置します。

Facebook
Twitter
Whatsapp
Line
Pocket

今回はボタンコンポーネントにurlを設定するだけです。
オプションについては、githubをご確認ください。

nygardk/react-share

現在のページのURLについては、props内のlocationを利用しています。

import {
  FacebookShareButton,
  FacebookIcon,
  TwitterShareButton,
  TwitterIcon,
  WhatsappShareButton,
  WhatsappIcon,
  LineShareButton,
  LineIcon,
  PocketShareButton,
  PocketIcon,
} from 'react-share';

const ArticleSection = ({ location, post, previous, next}) => {
  const shareUrl = location.href
  return (
    ・・・
    <FacebookShareButton url={shareUrl} className="mr-2">
      <FacebookIcon size={40} round />
    </FacebookShareButton>
    <TwitterShareButton url={shareUrl} className="mr-2">
      <TwitterIcon size={40} round />
    </TwitterShareButton>
    <WhatsappShareButton url={shareUrl} className="mr-2">
      <WhatsappIcon size={40} round />
    </WhatsappShareButton>
    <LineShareButton url={shareUrl} className="mr-2">
      <LineIcon size={40} round />
    </LineShareButton>
    <PocketShareButton url={shareUrl} className="mr-2">
      <PocketIcon size={40} round />
    </PocketShareButton>
    ・・・
   )
 }