SNSのシェアボタン・リンクを設置

ブログ

Gatsby

SEO

各SNSへのシェアボタンやSNSアカウントへのリンクを設置します。

できればGatsbyのプラグインを有効に利用して、実装できないか調査します。

SNSシェアボタンを設置

react-shareのプラグインを利用しました。
https://github.com/nygardk/react-share

上記をnpmでインストールします。

npm install react-share --save

シェアボタンを実装する箇所で以下のコードを追加します。

import {
	  FacebookShareButton,
	  GooglePlusShareButton,
	  LinkedinShareButton,
	  TwitterShareButton,
	  FacebookIcon,
	  TwitterIcon,
	  GooglePlusIcon,
	  LinkedinIcon,
} from 'react-share';

<FacebookShareButton url={postUrl}>
    <FacebookIcon size={32} round />
</FacebookShareButton>
<GooglePlusShareButton url={postUrl}>
    <GooglePlusIcon size={32} round />
</GooglePlusShareButton>
<LinkedinShareButton url={postUrl}>
    <LinkedinIcon title={post.frontmatter.title} size={32} round />
</LinkedinShareButton>
<TwitterShareButton title={post.frontmatter.title} via="koshihonmushi" url={postUrl}>
    <TwitterIcon size={32} round />
</TwitterShareButton>

上記指定でシェアボタンが表示されます。

urlには記事のURLを指定します。
titleには記事のタイトルを指定します。