GatsbyJSブログにソーシャルシェアボタンを追加した
2020-05-11はじめに
おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!
今回はGatsbyJSブログの記事ページにSNS等のシェアボタンを追加します。
さまざまな人に見てもらいたいです!
GitHubのReadMeをみれば簡単に実装できます。
前提
このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。
パッケージのインストール
以下コマンドで[react-share]をインストールします。
npm install --save react-share
シェアボタンのコンポーネントを作る
[src/components/share.js]を新規作成し、コンポーネントを作成していきます。
今回は以下4つのシェアボタンを作ります。
- Line
ボタンに渡すpropsは実装したいシェアボタンの種類によっていろいろ違うので、GitHubのReadMeを見てください。
import React from "react";
import {
FacebookShareButton,
TwitterShareButton,
LineShareButton,
LinkedinShareButton,
FacebookIcon,
TwitterIcon,
LineIcon,
LinkedinIcon,
} from "react-share";
const Share = props => {
const articleTitle = props.title;
const articleUrl = props.url;
const articleDescription = props.description;
const iconSize = 32;
return (
<React.Fragment>
<h3>SHARE!!</h3>
<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} quote={articleDescription}>
<FacebookIcon round size={iconSize} />
</FacebookShareButton>
</div>
<div className="social-links__icon">
<LineShareButton url={articleUrl} quote={articleDescription}>
<LineIcon round size={iconSize} />
</LineShareButton>
</div>
<div className="social-links__icon">
<LinkedinShareButton url={articleUrl} quote={articleDescription}>
<LinkedinIcon round size={iconSize} />
</LinkedinShareButton>
</div>
</div>
</React.Fragment>
);
};
export default Share;
シェアボタンのコンポーネントを記事に挿入
[src/templates/blog-post.js]を以下のように修正します。
まずコンポーネントをインポート
import Share from "../components/share";
サイトのURL[siteUrl]と記事のURLの後ろ[slug]を取得
const siteUrl = data.site.siteMetadata.siteUrl;
const { slug, previous, next } = pageContext;
シェアボタンのコンポーネントをフッターの手前に挿入
以下propsでコンポーネントに渡す
- 記事タイトル
- 記事URL
- 記事概要
<Share
title={post.frontmatter.title}
url={`${siteUrl}${slug}`}
description={post.excerpt}
/>
<footer>
<Bio />
</footer>
スタイル調整
あとは好みのスタイルに調整します。
ついでにナビゲーションバーのスタイルも調整しました。
.social-links {
margin-bottom: 40px;
&__icon {
display: inline;
margin-right: 10px;
}
}
これでシェアボタンが実装できました!!
まとめ
今回はGatsbyJSブログの記事ページにSNS等のシェアボタンを追加しました。
自分もこのブログだけではなく、いろいろなSNSを用いて情報を発信していきたいと思います!
他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。
最後まで見ていただきありがとうございます!!