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

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

react-share のインストール

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

bash
yarn add react-share

コンポーネントの設置

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

JS部分
import {
  FacebookIcon,
  FacebookShareButton,
  TwitterIcon,
  TwitterShareButton,
} from "react-share"
HTML部分
  <FacebookShareButton url={url} title={post.frontmatter.title}>
    <FacebookIcon size={50} round />
  </FacebookShareButton>
  <TwitterShareButton
    url={url}
    title={post.frontmatter.title}
    via="Kill_In_Sun"
    related={["Kill_In_Sun", "GatsbyJS"]}
    hashtags={post.frontmatter.tags}
  >
    <TwitterIcon size={50} round />
  </TwitterShareButton>

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

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

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

TwitterShareButtonのプロパティ

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

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

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

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

やってみて思ったこと

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

/ 以上