react-shareで作るSNSシェア機能

2021.05.04

2021.05.06

Category:programming

SNSシェア機能をブログに追加したので手順を残したいと思います。

今回はSNSシェア機能を簡単に実装できるライブラリであるreact-shareを使いました。

以下よりインストールできます。

yarn add react-share

npm i react-share

インストールが完了したら、実装したい場所に実装したいものをインポートします。

今回私はTwitterとFacebookのシェア機能を実装したかったため、以下のようにそれぞれのShareButtonとIconをインポートしました。

(TwitterやFacebookの他にLINEなど様々な種類のものを実装できるため詳しくはreact-shareをご確認ください。)

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

あとはShareButtonにシェアしたいもののURL等を追加すればOKです。

他にもハッシュタグやIconの簡単なスタイル変更もできるため詳しくはreact-shareを要チェック。

 
 export function SnsShare(props) {
  const { url, title } = props;
  return (
   <div className="text-center">
     <ul className="flex justify-end sm:mr-4">
       <li className="px-2 sm:hover:opacity-75">
        <TwitterShareButton
         url={url}
         title={title}
        >
         <TwitterIcon size={32} round />
        </TwitterShareButton>
       </li>
       <li className="px-2 sm:hover:opacity-75">
        <FacebookShareButton
         url={url}
        >
        <FacebookIcon size={32} round />
        </FacebookShareButton>
       </li>
     </ul>
   </div>
  );
 }
 

これで最低限のシェア機能としては完成です。

続いてTwitterシェアに表示される画像やタイトルの設定方法。

設定方法といってもとても簡単で、実装したい場所のheadタグ内にmeta情報を追加するだけです。

私はNext.jsでブログを開発しているため、以下をインポートします。

 
 import Head from "next/head";
 

あとはHead内にmeta情報の追加。

Twitterに表示される画像の大きさが小さい方が良い場合は content="summary" に。

 
 <Head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta
   property="og:url"
    content="URL"
  />
  <meta property="og:title" content="タイトル" />
  <meta property="og:description" content="説明" />
  <meta property="og:image" content="画像URL" />
 </Head>
 

これで完了ですがTwitterに反映されるまで時間がかかります。

もしちゃんと実装できてるかチェックしたい場合は、公式ページ(Card Validator)に記事のURLを入力してチェックしてみて下さい。

React Next.js