CODEWITHSUNDEEP
javascripthtmlreactjsnpm
user11869519
user11869519

Reputation:

How to share images and description on Twitter and Facebook using `react-share` package?

This is my helmet code for this one.

<Helmet>
  <meta property="og:image" content={shareImg} />
  <meta property="og:image:secure_url" content={shareImg} />
</Helmet>

This code snippet for Twitter and Facebook share buttons.

<li>
  <TwitterShareButton
    url={shareURL}
    title={shareTitle}
    className="social-icons"
  >
    <TwitterIcon size={24} />
  </TwitterShareButton>
</li>
<li>
  <FacebookShareButton
    url={shareURL}
    quote={shareTitle}
    className="social-icons"
>
    <FacebookIcon size={24} />
  </FacebookShareButton>
</li>

But it is not working. It would be great if anyone can help this issue.

Upvotes: 2

Views: 3655

Answers (1)

jP_
jP_

Reputation: 151

In order for Facebook and Twitter to show a preview of your page incl. images, title etc. you will need to have server-side-rendering.

You can accomplish that by leveraging libraries such as NextJS, build it yourself with a NodeJS server or to make it super simple & quick you can use www.prerender.io. It will crawl your pages & will serve a server-side-rendered page to all crawlers and social media platforms.

Upvotes: 4

Related Questions