GatsbyサイトにSNSシェアボタンを設置する

9755 ワード
gatsby React React テキストリンク

はじめに

こんにちは。今期のアニメって何が面白いのでしょうか、優等生はマストでしょうか、クール初めは忙しくなりますね、筆者です

さて、今回はGatsbyサイトにSNSシェアボタンを追加したので記事にしました。
これから追加する方いらっしゃいましたら、ぜひ参考にしてくださいませ！

方針

SNSのシェアボタンのコンポーネンがまとまっているライブラリのreact-shareを使用して設置していこうと思います。

$ npm show react-share

[email protected] | MIT | deps: 2 | versions: 65
Social media share buttons and share counts for React.
https://github.com/nygardk/react-share#readme

keywords: react, component, react-component, social, media, social-media, share, button, count

dist
.tarball: https://registry.npmjs.org/react-share/-/react-share-4.4.0.tgz
.shasum: cabbf2111d7a907a888ab4d89d08410329efd5ee
.integrity: sha512-POe8Ge/JT9Ew9iyW7CiYsCCWCb8uMJWqFl9S7W0fJ/oH5gBJNzukH0bL5vSr17KKG5h15d3GfKaoviI22BKeYA==
.unpackedSize: 853.1 kB

dependencies:
classnames: ^2.2.5 jsonp: ^0.2.1

maintainers:
- nyde <[email protected]>

dist-tags:
latest: 4.4.0

published 4 months ago by nyde <[email protected]>

GatsbyサイトにSNSシェアボタンを設置する

1. react-shareのインストール

私はnpmなのでこちら↓

$ npm install react-share

yarnの方はこちら↓

$ yarn add react-share

1.1. インストール有無を確認

無事インストールされました 

$ npm ls --depth=0 | grep react-share
├── [email protected]

2. コンポーネントを作成

以下のようなコンポーネントを作成しました。

今回作成したボタンは、以下の4つです。お好みで追加したり削除したりしてください
1. Facebook
2. LINE
3. Twitter
4. はてな

/src/components/ShareButtonList.js
import {
  FacebookIcon,
  FacebookShareButton,
  HatenaIcon,
  HatenaShareButton,
  LineIcon,
  LineShareButton,
  TwitterIcon,
  TwitterShareButton
} from 'react-share'

import React from 'react'
import styled from '@emotion/styled'

const Wrapper = styled.div`
  display: flex;
  padding-bottom: 24px;
`

const ButtonWrapper = styled.div`
  padding-right: 12px;
`

const ShareButtonList = ({title, url}) => {
  return (
    <Wrapper>
      <ButtonWrapper>
        <FacebookShareButton url={url}>
          <FacebookIcon size={40} round />
        </FacebookShareButton>
      </ButtonWrapper>

      <ButtonWrapper>
        <LineShareButton url={url} >
          <LineIcon size={40} round />
        </LineShareButton>
      </ButtonWrapper>

      <ButtonWrapper>
        <TwitterShareButton title={title} url={url} >
          <TwitterIcon size={40} round />
        </TwitterShareButton>
      </ButtonWrapper>

      <ButtonWrapper>
        <HatenaShareButton url={url} >
          <HatenaIcon size={40} round />
        </HatenaShareButton>
      </ButtonWrapper>
    </Wrapper>
  )
}

export default ShareButtonList

3. 記事ページで2で作成したコンポーネントを挿入

/src/templates/post.js
  return (
    <Layout>
      <Hero title={title} image={heroImage} height={'50vh'} />
      <Container>
        <ContentWrapper>
          <div>
+            <ShareButtonList title={title} url={`https://example.com/${slug}`} />
            <PostDetails />
            <PageBody body={body} />
          </div>
        </ContentWrapper>
      </Container>
    </Layout>
  )

4. gatsby developで確認する

表示されました！

おわりに

あまりスタイルの調整はせず、flexで横並びにしたくらいで、すごく簡単に設置できました！
皆さんもぜひ設置してみてはいかがでしょうか

それでは！