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/