これは何？
Gatsby の blog starter で、share ボタンを追加する方法です。
下記のライブラリを使用します。
確認環境
$ gatsby --version
Gatsby CLI version: 4.4.0
Gatsby version: 4.5.2ライブラリをインストール
$ npm install --save react-shareshare ボタンの一覧コンポーネント作成
src/components/shareButtonList.js
import React from "react"
import {
FacebookIcon,
FacebookShareButton,
TwitterIcon,
TwitterShareButton,
LineIcon,
LineShareButton,
} from "react-share"
const ShareButtonList = ({ title, url, description }) => {
const iconSize = 32
return (
<>
<h3>SHARE</h3>
<div className="social-links">
<div className="social-links__icon">
<TwitterShareButton url={url} title={title}>
<TwitterIcon round size={iconSize} />
</TwitterShareButton>
</div>
<div className="social-links__icon">
<FacebookShareButton url={url} quote={description}>
<FacebookIcon round size={iconSize} />
</FacebookShareButton>
</div>
<div className="social-links__icon">
<LineShareButton url={url} quote={description}>
<LineIcon round size={iconSize} />
</LineShareButton>
</div>
</div>
</>
)
}
export default ShareButtonListblog テンプレートにコンポーネントを設定
src/templates/blog-post.js
import ShareButtonList from "../components/shareButtonList"
...
<ShareButtonList
title={post.frontmatter.title}
url={`${data.site.siteMetadata.siteUrl}/${post.fields.slug}`}
description={post.excerpt}
/>
/* footerの上あたりに追加してください */
<footer>
<Bio />
</footer>ここで、表示するデータが足りない場合、pageQuery に追加してください。
私の場合、↓ を追加しました。
- site.siteMetadata.siteUrl
- markdownRemark.fields.slug
CSS を追加
src/style.css
/* share button list */
.social-links {
margin-bottom: 40px;
}
.social-links__icon {
display: inline;
margin-right: 10px;
}おわりに
React で CSS の設定方法が何種類かありそうなので、また調べたいと思います。