よしかわーるど

プログラミングで世界を変える

gatsbyで作ったサイトにシェアボタンを導入する

どうも, よしかわです.

gatsbyで作っている本サイトですが, シェアボタンを導入しましたので, 報告します.

導入

npm install react-share
components/Share.js
import React from "react";
import PropTypes from "prop-types";
import {
  FacebookShareButton,
  GooglePlusShareButton,
  LinkedinShareButton,
  TwitterShareButton,
  TelegramShareButton,
  RedditShareButton,
  FacebookShareCount,
  GooglePlusShareCount,
  LinkedinShareCount,
  RedditShareCount,
  FacebookIcon,
  TwitterIcon,
  TelegramIcon,
  GooglePlusIcon,
  LinkedinIcon,
  RedditIcon
} from "react-share";

import "./share.css";

const iconSize = 48;
const filter = count => (count > 0 ? count : "");
const renderShareCount = count => (
  <div className="share-count">{filter(count)}</div>
);

const Share = ({ socialConfig, tags }) => (
  <div className="social-links">
    <FacebookShareButton url={socialConfig.config.url}>
      <FacebookIcon round size={iconSize} />
      <FacebookShareCount url={socialConfig.config.url}>
        {count => renderShareCount(count)}
      </FacebookShareCount>
    </FacebookShareButton>
    <TwitterShareButton
      url={socialConfig.config.url}
      title={socialConfig.config.title}
      via={socialConfig.twitterHandle.split("@").join("")}
      hashtags={tags}
    >
      <TwitterIcon round size={iconSize} />
    </TwitterShareButton>
    <GooglePlusShareButton url={socialConfig.config.url}>
      <GooglePlusIcon round size={iconSize} />
      <GooglePlusShareCount url={socialConfig.config.url}>
        {count => renderShareCount(count)}
      </GooglePlusShareCount>
    </GooglePlusShareButton>
    <LinkedinShareButton
      url={socialConfig.config.url}
      title={socialConfig.config.title}
    >
      <LinkedinIcon round size={iconSize} />
      <LinkedinShareCount url={socialConfig.config.url}>
        {count => renderShareCount(count)}
      </LinkedinShareCount>
    </LinkedinShareButton>
    <RedditShareButton
      url={socialConfig.config.url}
      title={socialConfig.config.title}
    >
      <RedditIcon round size={iconSize} />
      <RedditShareCount url={socialConfig.config.url}>
        {count => renderShareCount(count)}
      </RedditShareCount>
    </RedditShareButton>
    <TelegramShareButton url={socialConfig.config.url}>
      <TelegramIcon round size={iconSize} />
    </TelegramShareButton>
  </div>
);

Share.propTypes = {
  socialConfig: PropTypes.shape({
    twitterHandle: PropTypes.string.isRequired,
    config: PropTypes.shape({
      url: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired
    })
  }).isRequired,
  tags: PropTypes.arrayOf(PropTypes.string)
};
Share.defaultProps = {
  tags: []
};

export default Share;
share.css
.social-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	margin: 15px 0;
}

.social-links > div {
	margin: 5px 15px;
	cursor: pointer;
}

.share-count {
	text-align: center;
}

あとは, GraphQLとJavaScriptを少し書けば終了.

参考文献

Social Share button for Gatsby Blog Pages