React の react-share を使ってSNSシェアアイコンを設置した

ブログ記事を公開したときに、SNSへシェアすることがある。毎回SNSを開いてURLとタイトルを入れるのは面倒くさかったので、シェアボタンを設置した。

react-share のインストール

react-shareというものがあるみたいなので、こちらを使った。

bash: title=bash
1yarn add react-share
2

コンポーネントの設置

react-shareは、対応しているサービスがかなり多い。今回はFacebookとTwitterにする。 importするときは...Iconと...ShareButton両方使うと便利だった。

js: title=JS部分
1import {
2  FacebookIcon,
3  FacebookShareButton,
4  TwitterIcon,
5  TwitterShareButton,
6} from "react-share"
7
8

jsx: title=HTML部分
1  <FacebookShareButton url={url} title={post.frontmatter.title}>
2    <FacebookIcon size={50} round />
3  </FacebookShareButton>
4  <TwitterShareButton
5    url={url}
6    title={post.frontmatter.title}
7    via="Kill_In_Sun"
8    related={["Kill_In_Sun", "GatsbyJS"]}
9    hashtags={post.frontmatter.tags}
10  >
11    <TwitterIcon size={50} round />
12  </TwitterShareButton>
13

...ShareButton系コンポーネントの共通プロパティ

...ShareButton系コンポーネントには children と url というプロパティが必須になっている。

childrenには子要素を渡す。これがないと、設置しても何も表示されない。 urlは、たとえばシェアしたい記事のURLを指定する。今回はGraphQLで取得済みの値をそのまま渡した。

TwitterShareButtonのプロパティ

TwitterShareButtonコンポーネントはvia、related、hashtagsというプロパティがある。 このサンプルコードの場合、使ったときのイメージは下記のとおり。

• viaはシェア時に「@Kill_In_Sunより」という文がツイート末尾に追加される。
• relatedはツイート投稿後にフォローを推奨するツイッターアカウントを指定できる。
• hashtagsはシェア時にハッシュタグをツイート内に含めることができる。あまりタグが多いと140文字を超えやすいので注意が必要。今回はこのブログで使っているタグをそのまま流すことにした。

...Icon系コンポーネントの共通プロパティ

...Icon系のコンポーネントには size、roundを引数として渡した。sizeで大きさを指定し、roundはtrueを指定することでアイコンが丸くなる。

やってみて思ったこと

面倒臭がっていたわりにはパッケージをインストールしてコンポーネントを置くだけなので、もっと早くやっておけばよかったという気持ち。便利で使いやすい反面、アイコンの色合いがブログのデザインに対して浮いて見えるので、独自スタイルを使って拡張したほうがよさそう。

/ 以上