GatsbyJSにソーシャルボタンを追加する

ソーシャルボタンを追加したい！と思ったのでGatsbyJSで追加しました。

やったこと

• react-share導入
• シェアボタンコンポーネントの作成
• SiteConfigの追加
• テンプレートの変更

react-shareの導入

react-shareは、react向けの便利なライブラリです。
対応しているSNSは、
+ Facebook
+ Twitter
+ Telegram
+ Google+
+ Whatsapp
+ LinkedIn
+ Pinterest
+ VK
+ Odnoklassniki
+ Reddit
+ Tumblr
+ Mail.Ru
+ LiveJournal
+ Viber
+ Workplace
+ Line
+ Weibo
+ email
と非常に多いです。

npm install react-share --save

シェアボタンコンポーネントの作成

/component/Share/index.jsをつくります。

import React, { Component } from "react";
import {
  FacebookShareButton,
  TwitterShareButton,
  FacebookIcon,
  TwitterIcon,
  LineShareButton,
  LineIcon
} from "react-share";
import urljoin from "url-join";
import config from "../../../data/SiteConfig";
import "./SocialLinks.css";

class Share extends Component {
  render() {
    const { postNode, postPath, mobile } = this.props;
    const post = postNode.frontmatter;
    const url = urljoin(config.siteUrl, postPath);
    const iconSize = mobile ? 36 : 48;

    return (
      <div className="social-links">
        <TwitterShareButton url={url} title={post.title}>
          <TwitterIcon round size={iconSize} />
        </TwitterShareButton>
        <FacebookShareButton url={url} quote={postNode.excerpt}>
          <FacebookIcon round size={iconSize} />
        </FacebookShareButton>
        <LineShareButton url={url} quote={postNode.excerpt}>
          <LineIcon round size={iconSize} />
        </LineShareButton>
      </div>
    );
  }
}

export default Share;

SiteConfigの追加

続いてsiteConfig.jsの変更を行います。
siteUrlを追記

const siteConfig = {
  siteUrl: "https://corylog.com",
}
module.exports = siteConfig;

テンプレートの変更

import React from 'react'
import { Link, graphql } from 'gatsby'

import Layout from '../components/Layout'
import SEO from '../components/seo'

import rehypeReact from "rehype-react"
import Sample from "../components/Sample"
import Share from '../components/Share';

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "sample": Sample }
}).Compiler

class BlogPostTemplate extends React.Component {
  render() {
    const { slug } = this.props.pageContext;
    const post = this.props.data.markdownRemark
    const siteTitle = this.props.data.site.siteMetadata.title
    const { previous, next } = this.props.pageContext

    return (
      <Layout location={this.props.location} title={siteTitle}>
        <SEO title={post.frontmatter.title} description={post.excerpt} />
        <h1>{post.frontmatter.title}</h1>
        <p>
          {post.frontmatter.date}
        </p>
        <div>{renderAst(post.htmlAst)}</div>
        <hr/>

        <ul>
          <li>
            {previous && (
              <Link to={previous.fields.slug} rel="prev">
                ← {previous.frontmatter.title}
              </Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={next.fields.slug} rel="next">
                {next.frontmatter.title} →
              </Link>
            )}
          </li>
        </ul>
        <Share postPath={slug} postNode={post} />
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      htmlAst
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

動作確認