ソーシャルボタンを react-share で実現すると楽話

知っている人は知っているので、それほど目新しい話ではないのだけど、react-share を導入したら、楽にソーシャルボタンを実現できたので、書いておきます。 ただ、サクっと導入できたかというと、実はそうではなくて、恥ずかしながらハマりました。

ということで、同じように「あれ？動かない」という人もいるかと思い、ネットに残しておきます。みんなも、取るに足らなそうだなと思うことでも書いておくといいと思います。

通常、React 系のサイトにて、ソーシャルボタン (シェアボタン) を導入しようとすると、手っ取り早いのが公式のライブラリを読み込んで、任意の位置の必要な div タグを書き、それを React コンポーネントとしてくるむということになると思います。

でも、react-share を使うとそれらの作業が不要になり、用意されているコンポーネントを使えばいいため、大変とりまわしがしやすいです。サイトはこちら。

• nygardk/react-share: Social media share buttons and share counts for React

このサイトのフッター部分にデフォルトのままの状態で配置してあるので、まあこんな感じで設置が出来ると思ってください。

react-share のウリとしては、設置のしやすさと、豊富なソーシャルサービスサポートにあります。また、様々なサービスを共通のインターフェースで利用できるようにコンポーネントが作られているので、ソーシャルボタンを一つ増やすとかも楽に行えます。また、カウント機能もあり、独自のカウントスタイルの実現もできます。

インストールは、いつものように、npm にて行えます。

$ npm i react-share

今回は、Facebook と Twitter だけサポートしたので、

import {
  FacebookShareButton,
  TwitterShareButton
} from 'react-share';

という感じに import 文を書き、Example にしたがって以下のように書くと、、、

<FacebookShareCount url={ ここにシェアしたい URL を入れます } />

なんと、何も表示されませんでした！

ちゃんとドキュメントを読むと、アイコンを以下のように別途指定する必要があるそうです。
単純なところではまってしまいました。

<FacebookShareButton url={ ここにシェアしたい URL を入れます }>
    <FacebookIcon size={ ここにサイズを入れます } round />
</FacebookShareButton>

ということで、出来上がったのが、以下のコンポーネントです。各ページにて import して使います。

import React from 'react'
import { 
    FacebookShareButton, 
    FacebookIcon,
    TwitterShareButton, 
    TwitterIcon
} from 'react-share'

const config = {
    via: 'kara_d',
    size: 32
}

interface SocialProps {
    url: string
    title: string
    size?: number
    via?: string
}

export class Social extends React.Component<SocialProps, {}> {
    shouldComponentUpdate() {
        return false;
    }
    render() {
        return (
        <div className="social-buttons">
            <h2 className="title">SOCIAL</h2>
            <div className="buttons">
                <FacebookShareButton url={this.props.url}>
                    <FacebookIcon size={this.props.size ? this.props.size : config.size} round />
                </FacebookShareButton>
                <TwitterShareButton url={this.props.url} title={this.props.title} via={this.props.via ? this.props.via : config.via}>
                    <TwitterIcon size={this.props.size ? this.props.size : config.size} round />
                </TwitterShareButton>
            </div>
        </div>
        )
    }
}

という小ネタでした。