share image on social network using react.js react-share

Question

I am trying to share images and video on social media ( mostly FB,twitter,linkedIn )in reactjs app , have added react-helmet for the same but still unable to share image below is the link which i am referring and my code.

https://medium.com/camperstribe/react-social-media-integration-with-react-share-and-react-helmet-84d9def6a445

Above solution is not working

import React from "react";
import { Helmet } from "react-helmet";
// import { useLocation } from "react-router-dom";
export default function HelmetMetaData(props) {


  // let location = useLocation();
  let quote = props.quote !== undefined ? props.quote : "";

  let title =
    props.title !== undefined
      ? props.title
      : "CampersTribe - World is yours to explore";
  let image =
    props.image !== undefined
      ? props.image
      : "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80";
  let description =
    props.description !== undefined
      ? props.description
      : "CampersTribe lets you experience the camping culture. We discover the hidden gems in the nearby to help you connect with nature & yourself by learning in the woods, on the riverbank under the open sky." +
        "Trust us, its million dollars experience to ride away from city life, pitch a tent, do campfire and endless talk!" +
        "So, join us on this voyage, and explore the beauty and miracle of being yourself!";
  let hashtag = props.hashtag !== undefined ? props.hashtag : "#camperstribe";
  return (
    <Helmet>
      <title>{title}</title>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="csrf_token" content="" />
      <meta property="type" content="website" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      />
      <meta name="msapplication-TileColor" content="#ffffff" />
      <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
      <meta name="theme-color" content="#ffffff" />
      <meta name="_token" content="" />
      <meta name="robots" content="noodp" />
      <meta property="title" content={title} data-react-helmet="true"/>
      <meta property="quote" content={quote} data-react-helmet="true"/>
      <meta name="description" content={description} data-react-helmet="true"/>
      <meta property="image" content={image} data-react-helmet="true"/>
      <meta property="og:locale" content="en_US" />
      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} />
      <meta property="og:quote" content={quote} />
      <meta property="og:hashtag" content={hashtag} />
      <meta property="og:image" content={image} data-react-helmet="true"/>
      <meta property="og:image:secure_url" content={image} data-react-helmet="true"/>
      <meta content="image/*" property="og:image:type" data-react-helmet="true"/>
      <meta property="og:site_name" content="CampersTribe" />
      <meta property="og:description" content={description} />{" "}
    </Helmet>
  );
}

i have created helmetMetaData component and calling in top of my social share component

 return (
    <div className="app-content content">
      <HelmetMetaData />

 <FacebookShareButton
                            windowWidth="800"
                            windowHeight="500"
                            url={
                              "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
                            }
                            quote={"test sharing"}
                            image={
                              "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
                            }
                            imageURL={
                              "https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
                            }
                            // hashtag="#camperstribe"
                            // className={classes.socialMediaButton}
                          >
                            <FacebookIcon size={36} />
                          </FacebookShareButton>
)

but not working only getting url and title on facebook share dialog, anybody knows how to share image on social media in reactjs?

Answer 1

I know it's an old question, but try to insert image meta tag directly into public/index.html. As it said in this issue: adding meta on client side dynamically does not work. Crawlers (fb, tw, etc) can see only static html. And it seems like FacebookShareButton doesn't have image as an optional prop.