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

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

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

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

https://github.com/nygardk/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なのでこちら↓

```sh
$ npm install react-share
```

yarnの方はこちら↓

```sh
$ 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. はてな

```js:/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で作成したコンポーネントを挿入

```diff:/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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86984/11741b9b-9a70-faa8-2e6b-e20761eb9fa3.png)

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

それでは！