Search code examples
javascriptreactjstwitterinstagramshare

How to share Image-Url to Facebook, twitter and Instagram in React JS

I have a page where the User can upload their image and edit it by using one Api.

Now using the image recieved, in the url format, needs to be shared in social media like Facebook, Twitter and Instagram.

Following are the Url used for social media redirect:

Facebook -https://www.facebook.com/sharer.php?u=${window.location.href}?imageurl=${imageUrl} Twitter- https://twitter.com/intent/tweet?url=${window.location.href}?imageurl=${imageUrl} Instagram- Yet to find one

Things Tried: Tried to add {imageUrl} which is stored in state to meta tags dynamically using createElement and setAttribute in componentDidMount, which did not update this image in facebook but able to add this image in og:image in head->meta tags. Kindly provide me with some solution. It would be a great help.

           <a
            data-pgaction-redirection="0"
            target="_blank"
            rel="noopener noreferrer"
            title={title}
            href=`{https://www.facebook.com/sharer.php?u=${window.location.href}? 
            imageurl=${this.state.imageUrl}}`
          >
           Facebook
          </a>
Solution

  • The annswer I implemented is the following. Assume the Facebook URL is

    https://www.facebook.com/sharer.php?u=https:example.com?imageurl=${this.state.imageUrl}}

    You can append the dynamic image URL to the imageurl attribute and facebook's crawlers will go to https:example.com/imageurl=https://imageurl.url.com. Then, you must extract the query parameters and append the imageurl-URI, and finally return it from getInitialProps if you are using NEXT JS.

    Whatever the extract URI from imageurl can me added to the meta og:image tag.