世界を旅して暮らしたい放浪エンジニアブログ

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

今回はGatsbyJSで構築したサイトに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>
    ・・・
   )
 }

表示するボタンは以下のようになります。

GatsbyJS - SNSボタン

香港生活を綴ったブログに設置しています。そちらもご確認ください。

香港生活を綴ったブログを始めます

※ OGPタグについては今回触れませんが、OGPの設定は忘れずにしておきましょう。

最後に

今回はSNSのシェアボタンを設置しました。react-shareのおかげで簡単に導入できますね!

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts