I am working on adding social sharing buttons using Next.js 13 and react-share. Seems pretty simple however regardless of what I do it's not working. When clicking the TwitterShareButton below the only things that show are the url and title within TwitterShareButton aka www.coolsite.com. What am I doing wrong?
import { TwitterShareButton } from "react-share";
import Head from "next/head";
<Head>
<title>Cool Title</title>
<meta name="description" content="Cool Description" />
<meta property="og:image" content="https://placehold.jp/150x150.png" />
<meta property="og:title" content="Cool Title" />
<meta property="og:description" content="Cool Description" />
<meta name="twitter:card" content="Cool" />
<meta name="twitter:site" content="Cool" />
<meta name="twitter:title" content="Cool Title" />
<meta name="twitter:description" content="Cool Description" />
<meta name="twitter:image" content="https://placehold.jp/150x150.png" />
</Head>;
export default function Share() {
return (
<div>
<TwitterShareButton
url="https://www.coolsite.com"
title="Now that site is cool."
>
Share on Twitter
</TwitterShareButton>
</div>
);
}