SNSシェア機能をブログに追加したので手順を残したいと思います。&nbsp;&nbsp;今回はSNSシェア機能を簡単に実装できるライブラリである<a href="https://github.com/nygardk/react-share">react-share</a>を使いました。以下よりインストールできます。&nbsp;&nbsp; yarn add react-share &nbsp;&nbsp;&nbsp; npm i&nbsp;react-share &nbsp;&nbsp;&nbsp;インストールが完了したら、実装したい場所に実装したいものをインポートします。&nbsp;今回私はTwitterとFacebookのシェア機能を実装したかったため、以下のようにそれぞれのShareButtonとIconをインポートしました。(TwitterやFacebookの他にLINEなど様々な種類のものを実装できるため詳しくは<a href="https://github.com/nygardk/react-share">react-share</a>をご確認ください。)&nbsp;<div style="background-color:#22272e;color:#adbac7;font-family:Menlo, Monaco, 'Courier New', monospace;font-size:14px;font-weight:normal;line-height:21px;" backgroundcolor="#22272e"><div>&nbsp;&nbsp;import {</div><div>&nbsp; &nbsp; TwitterShareButton,</div><div>&nbsp; &nbsp; FacebookShareButton,</div><div>&nbsp; &nbsp; TwitterIcon,</div><div>&nbsp; &nbsp; FacebookIcon,</div><div>&nbsp;} from "react-share";&nbsp;</div></div>&nbsp;&nbsp;&nbsp;あとはShareButtonにシェアしたいもののURL等を追加すればOKです。他にもハッシュタグやIconの簡単なスタイル変更もできるため詳しくは<a href="https://github.com/nygardk/react-share">react-share</a>を要チェック。&nbsp;<div style="background-color:#22272e;color:#adbac7;font-family:Menlo, Monaco, 'Courier New', monospace;font-size:14px;font-weight:normal;line-height:21px;" backgroundcolor="#22272e"><div>&nbsp;&nbsp;export function SnsShare(props) {</div><div>&nbsp; const { url, title } = props;&nbsp; return (<div>&nbsp;&nbsp; &lt;div className="text-center"&gt;</div><div>&nbsp;&nbsp; &nbsp;&nbsp;&lt;ul className="flex justify-end sm:mr-4"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&lt;li className="px-2 sm:hover:opacity-75"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;TwitterShareButton</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;url={url}</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;title={title}</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;TwitterIcon size={32} round /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/TwitterShareButton&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&lt;/li&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&lt;li className="px-2 sm:hover:opacity-75"&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;FacebookShareButton</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;url={url}</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;FacebookIcon size={32} round /&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/FacebookShareButton&gt;</div><div>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&lt;/li&gt;</div><div>&nbsp;&nbsp; &nbsp;&nbsp;&lt;/ul&gt;</div><div>&nbsp;&nbsp; &lt;/div&gt;</div><div>&nbsp; );</div><div>&nbsp;}&nbsp;</div></div></div>&nbsp;&nbsp;これで最低限のシェア機能としては完成です。&nbsp;&nbsp;続いてTwitterシェアに表示される画像やタイトルの設定方法。設定方法といってもとても簡単で、実装したい場所のheadタグ内にmeta情報を追加するだけです。&nbsp;&nbsp;私はNext.jsでブログを開発しているため、以下をインポートします。&nbsp;<div style="background-color:#22272e;color:#adbac7;font-family:Menlo, Monaco, 'Courier New', monospace;font-size:14px;font-weight:normal;line-height:21px;" backgroundcolor="#22272e"><div>&nbsp;&nbsp;import Head from "next/head";&nbsp;</div></div>&nbsp;&nbsp;&nbsp;あとはHead内にmeta情報の追加。Twitterに表示される画像の大きさが小さい方が良い場合は content="summary" に。&nbsp;<div style="background-color:#22272e;color:#adbac7;font-family:Menlo, Monaco, 'Courier New', monospace;font-size:14px;font-weight:normal;line-height:21px;" backgroundcolor="#22272e"><div>&nbsp;&nbsp;&lt;Head&gt;</div><div>&nbsp; &lt;meta name="twitter:card" content="summary_large_image" /&gt;</div><div>&nbsp; &lt;meta</div><div>&nbsp; &nbsp;property="og:url"</div><div>&nbsp; &nbsp; content="URL"</div><div>&nbsp; /&gt;</div><div>&nbsp; &lt;meta property="og:title" content="タイトル" /&gt;</div><div>&nbsp; &lt;meta property="og:description" content="説明" /&gt;</div><div>&nbsp; &lt;meta property="og:image" content="画像URL" /&gt;</div><div>&nbsp;&lt;/Head&gt;&nbsp;</div></div>&nbsp;&nbsp;これで完了ですがTwitterに反映されるまで時間がかかります。&nbsp;もしちゃんと実装できてるかチェックしたい場合は、<a href="https://cards-dev.twitter.com/validator">公式ページ(Card Validator)</a>に記事のURLを入力してチェックしてみて下さい。

M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z