フロントセンセイ

Gatsby（GatsbyJS）でSNSのSHAREを設置 | Gatsbyブログカスタマイズ

Webサイト高速化のための 静的サイトジェネレーター活用入門を通じて作成したこのブログのカスタマイズとして、記事ページにSNSのシェアボタンを設置しました。

仕様

プラグインを導入すれば手軽に対応が可能なため、仕様はプラグインに則ります。
個人的なカスタマイズは入れていません。

プラグイン（react-share）をインストール

さまざまなサイトで導入実績のあるreact-shareを利用します。
yarnでのインストールは以下の通り。

yarn add react-share

npmの場合は以下の通り。

npm install react-share

share.jsの作成

src/components/share.jsを新規作成します。

シェアボタンはいくつかありますが、ひとまず以下の4種類としました。

  • Facebook

  • Twitter

  • Line

  • Hatena

LineやHatenaまであって、すごいですよね。

他にも追加したい場合は、GitHubを確認の上、適宜対応ください。

import React from "react"
import {
  FacebookShareButton,
  TwitterShareButton,
  LineShareButton,
  HatenaShareButton,
  FacebookIcon,
  TwitterIcon,
  LineIcon,
  HatenaIcon,
} from "react-share"

const Share = props => {
  const articleTitle = props.title
  const articleUrl = props.url
  // const articleDescription = props.description // 現時点では未使用
  const iconSize = 40

  return (
    <div className="share">
      <p className="share__title">SHARE!</p>
      <div className="social-links">
        <div className="social-links__icon">
          <TwitterShareButton url={articleUrl} title={articleTitle}>
            <TwitterIcon round size={iconSize} />
          </TwitterShareButton>
        </div>
        <div className="social-links__icon">
          <FacebookShareButton url={articleUrl}>
            <FacebookIcon round size={iconSize} />
          </FacebookShareButton>
        </div>
        <div className="social-links__icon">
          <LineShareButton url={articleUrl} title={articleTitle}>
            <LineIcon round size={iconSize} />
          </LineShareButton>
        </div>
        <div className="social-links__icon">
          <HatenaShareButton url={articleUrl} title={articleTitle}>
            <HatenaIcon round size={iconSize} />
          </HatenaShareButton>
        </div>
      </div>
    </div>
  )
}

export default Share

blogpost-template.jsの編集

src/templates/blogpost-template.jsを編集します。

まず、上部で作成したShareをimportします。

import Share from "../components/share"

任意の箇所でShareコンポーネントを使います。

// Before
<div className="postbody">
  {documentToReactComponents(
    data.contentfulBlogPost.content.json,
    options
  )}
</div>

// After
<div className="postbody">
  {documentToReactComponents(
    data.contentfulBlogPost.content.json,
    options
  )}
</div>
<Share
  title={data.contentfulBlogPost.title}
  url={`${data.site.siteMetadata.siteUrl}${location.pathname}`}
  description={`${documentToPlainTextString(
    data.contentfulBlogPost.content.json
  ).slice(0, 70)}…`}
/>

urlの箇所でプロトコルを含めたドメインを挿入するため、下部のqueryに追記します。

// Before
export const query = graphql`
  query($id: String!) {
    contentfulBlogPost(id: { eq: $id }) {
      ...
      ...
      content {
        json
      }
    }
  }
`

// After
export const query = graphql`
  query($id: String!) {
    contentfulBlogPost(id: { eq: $id }) {
      ...
      ...
      content {
        json
      }
    }
    site {
      siteMetadata {
        siteUrl
      }
    }
  }
`

スタイル調整

CSSでスタイルを調整します。
SCSSではありますが、参考までに以下に示します。

// シェア
.share {
    margin-top: 3.5em;
    text-align: center;

    &__title {
        font-weight: bold;
        font-size: 18px;
        letter-spacing: 0.25em;
    }
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;

    &__icon:not(:last-child) {
        margin-right: 1em;
    }
}

参考サイト

▼GatsbyJSブログにソーシャルシェアボタンを追加した | のふのふろぐ
https://rpf-noblog.com/2020-05-11/gatsby-social-share/

関連記事