LoginSignup
4
2

More than 3 years have passed since last update.

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

Posted at

はじめに

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

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

方針

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

$ npm show react-share

react-share@4.4.0 | 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 <klaus.nygard@gmail.com>

dist-tags:
latest: 4.4.0

published 4 months ago by nyde <klaus.nygard@gmail.com>

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

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

私はnpmなのでこちら↓

$ npm install react-share

yarnの方はこちら↓

$ yarn add react-share

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

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

$ npm ls --depth=0 | grep react-share
├── react-share@4.4.0

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

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

今回作成したボタンは、以下の4つです。お好みで追加したり削除したりしてください:pray:
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で確認する

表示されました!

1.png

おわりに

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

それでは!

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2