はじめに

中野区在住の中野です。

Gatsby.jsでShareButtonComponentを作成したのでメモを残しておきます。

Gatsby.jsにShareButtonを実装する

  • パッケージのインストール
  • Componentの作成
  • 使い方

パッケージのインストール

npm install react-share react-icons --save

Componentの作成

  • authorsiteUrl を 外から渡す必要がある
    • 今回は gatsby-theme-blog-core/post-query.js をシャドーイングして対応している
    • Queryの編集方法についてはこちらに書いています
import React from 'react';
import {
FacebookShareButton,
FacebookIcon,
TwitterShareButton,
TwitterIcon
} from 'react-share';
const ShareButton = ({author, siteUrl, slug, title}) => {
const via = author + '_jp'
const url = siteUrl + slug
const size = 64
return (
<>
<div>
<FacebookShareButton url={ url }>
<FacebookIcon size={ size } round />
</FacebookShareButton>
<TwitterShareButton title={ title } via={ via } url={ url }>
<TwitterIcon size={ size } round />
</TwitterShareButton>
</div>
</>
);
};
export default ShareButton;

使い方

  • 実際に post.js ではQueryを変更し authorsiteUrl を取得してComponentにわたすようにしています
import ShareButton from 'ShareButtonのパス'
const Post = ({
data: {
post,
site: {
siteMetadata: { author, siteUrl },
},
},
}) => (
<ShareButton author={ author } siteUrl={ siteUrl } slug={ post.slug } title={ post.title } />
)
export default Post

さいごに

他にもいくつかシェアボタン作る方法はあるみたいです

\ Share /

全人類同時接続数No.1!バトルロイヤルゲームを生き残れ!

中野区在住の中野です。大阪生まれ大阪育ちですが就職のタイミングで上京しました。食いっぱぐれないようにすることをモットーに生存戦略を常に考えている元ネトゲ廃人現フルリモートwebエンジニア。Twitterでメンターとして駆け出しエンジニアたちをサポートしています。最近の関心事はDDDとScrum。いずれ起業することを考えてプロダクトを作成中。このブログでは生存戦略を考える上で試行錯誤した内容を記録していきます。