Gatsbyブログにreact-shareでSNSシェアボタンを設置する
今回は、Gatsbyで作られたブログにSNSシェアボタンを導入したいと思います。 SNS関連のライブラリはいくつかありますが、今回はreact-shareを利用します。
前提条件
gatsbyでブログ環境を作成済
※今回の記事はこのブログにSNSシェアボタンを導入した際の情報を公開するため、ファイル名がgatsby-starter-netlify-cmsで作られたもの前提となっています。自作もしくは他スターターを利用の方は、適宜ファイル名を読み替えてください。
ライブラリのインストール
下記コマンドでreact-shareをインストールしましょう。
FacebookやTwitterをはじめとしたSNSへのリンクボタンのコンポーネンがまとまっているライブラリです。
yarn add react-share投稿記事のテンプレートに追加
あとは投稿記事のテンプレートにシェアボタンのコンポーネントを配置するだけです。
このブログではFacebook,LINE,LinkedIn,Twitterの4種へのシェアボタンを追加します。
下記の例では、それらをまとめてSNSSectionというコンポーネントにしています。
// ...
import {
FacebookShareButton,
FacebookIcon,
LineShareButton,
LineIcon,
LinkedinShareButton,
LinkedinIcon,
TwitterShareButton,
TwitterIcon
} from 'react-share';
// SNSシェアボタンセクション
// title : 記事タイトル
// articleUrl : 記事URL
const SNSSection = ({title
, articleUrl}) => {
return (
<div>
<FacebookShareButton url={articleUrl}>
<FacebookIcon size={50} round />
</FacebookShareButton>
<LineShareButton url={articleUrl} >
<LineIcon size={50} round />
</LineShareButton>
<LinkedinShareButton url={articleUrl} >
<LinkedinIcon title={title} size={50} round />
</LinkedinShareButton>
<TwitterShareButton title={title} via="@inouetakumon" url={articleUrl} >
<TwitterIcon size={50} round />
</TwitterShareButton>
</div>
)
}あとはこのSNSSectionを投稿記事の好きな位置に配置するだけです。
同じくblog-post.jsのBlogPostTemplateに追記します。
さらに多少スタイルに手を加えることで、下記のようにシェアボタンが表示されます。
注意点
これで問題なく記事のシェアはできるのですがgatsby-starter-netlify-cmsで作った記事はデフォルトではURLに日本語が含まれる可能性があり、エンコードされたURLでSNSに投稿されてしまいます。
その場合はgatsby-starter-netlify-cmsのブログ記事のURLを指定できるようにするの記事を参考に、記事URLを自身で設定するのがオススメです。
まとめ
今回はreact-shareを使ってSNSへのシェアボタンをGatsbyブログに導入しました。
検索流入以外の導線を作るという意味ではSNSは非常に有効な手段といえるので、早いうちに導入するのがオススメです！