Facebook シェアボタンを配置したい

react.jsとnext.jsを使っています。
facebookのいいねボタンを配置したいです。
下記のリンクからコードを取得して貼り付けたのですがボタンがどこにも配置されません。
わかる人いましたらご教授お願いしたいです。

return (
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v12.0" nonce="T3FSC4A"></script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
)

行動規範の内容に同意します

回答1件

見たところリンク先から取得できるコードはあくまで素のHTML用で、Reactを使っている場合はそのまま貼り付けても動きません。
<script>に書いてあるスクリプトを読み込んでスタイルや機能をライクボタン用の要素に適用するコンポーネントを自作するか、ライブラリを使うとよいでしょう。

検索してみたらhttps://github.com/ZeroCho/react-fb-likeというまんまなライブラリがありました。
今知ったので詳しくは存じ上げませんが、READMEを読んだ限りではこんな感じで使うようです。

jsx
1import ReactFBLike from 'react-fb-like';
2
3<ReactFBLike
4  language="ja_JP"
5  appId="717589285046812"
6  version="v12.0"
7  href="https://developers.facebook.com/docs/plugins/"
8  layout="standard"
9  action="like"
10  share="true"
11/>