【React】ブログにSNSシェアボタンを作る。

2023/1/9

2023/1/16

このブログにSNSシェアボタンを設置したかったので、調べた方法まとめておこうと思います。

今回はReactで利用できる「react-share」というライブラリを使用して作成していきます。

ライブラリのインストールする
SNSシェアボタンのコンポーネントを作る
「react-share」で利用できるAPI一覧
おまけ：Tailwind CSSのボタンデザイン例
まとめ

ライブラリのインストールする

$ npm i react-share

SNSシェアボタンのコンポーネントを作る

import React from "react";
import {
	FacebookIcon,
	FacebookShareButton,
	HatenaIcon,
	HatenaShareButton,
	TwitterIcon,
	TwitterShareButton
} from "react-share";


export default function ShareButtons({url, title}) {

	return (
		<div>

			{/* Twitter */}
			<TwitterShareButton url={url} title={title}>
				<TwitterIcon size={32} round={true} />
			</TwitterShareButton>

			{/* Facebook */}
			<FacebookShareButton url={url} title={title}>
				<FacebookIcon size={32} round={true} />
			</FacebookShareButton>

			{/* Hatena */}
			<HatenaShareButton url={url} title={title}>
				<HatenaIcon size={32} round={true} />
			</HatenaShareButton>
		</div>
	)
}

コンポーネントのurlにはシェアされるURL、titleにはシェアされるテキストがそれぞれ記載されます。

またhashtagsでハッシュタグを指定するなどもできます。

Twitterボタン

{/* Twitter */}
<TwitterShareButton url={url} title={title}>
	<TwitterIcon size={32} round={true} />
</TwitterShareButton>

Facebookボタン

{/* Facebook */}
<FacebookShareButton url={url} title={title}>
	<FacebookIcon size={32} round={true} />
</FacebookShareButton>

はてなブックマークボタン

{/* Hatena */}
<HatenaShareButton url={url} title={title}>
	<HatenaIcon size={32} round={true} />
</HatenaShareButton>

「react-share」で利用できるAPI一覧

Share buttons（SNSボタン）

Share counts（SNSでのシェア数）

Icons（SNSのアイコン）

おまけ：Tailwind CSSのボタンデザイン例

export default function SnsShareButtons({url, title}: Props) {

	return (
		<div className="flex gap-2">
			{/* Twitter */}
			<div className={"w-1/2 bg-[#00aced] rounded-lg"}>
				<TwitterShareButton url={url} title={title} className={"w-full"}>
					<div className="flex items-center justify-center py-4">
						<TwitterIcon size={40} round={false} />
						<div className="text-white">Twitterでシェアする</div>
					</div>
				</TwitterShareButton>
			</div>

			{/* Facebook */}
			<div className={"w-1/2 bg-[#3b5998] rounded-lg"}>
				<FacebookShareButton url={url} title={title} className={"w-full"}>
					<div className="flex items-center justify-center py-4">
						<FacebookIcon size={40} round={true} />
						<div className="text-white">Facebookでシェアする</div>
					</div>
				</FacebookShareButton>
			</div>
		</div>
	)
}