0

I am using navigator.share to pin image from reactjs app to Pinterest. But it only saves image and no description is there. On desktop i am able to save image and description using URI schema as

<a 
            data-pin-do="buttonBookmark" 
            data-pin-lang="en"
            href={`https://www.pinterest.com/pin/create/button/?url=${url}&medial=${imageUrl}&description=${desc}`}
/>

But on mobile when i use same code, it only saved image. Therefore, i tried to use navigator.share but still it only saved image without any description.

I did like this

  const handleNativeShare = async ({ title, url, image, text }) => {


    if (typeof window !== undefined) {
      if (typeof navigator !== undefined) {
        if (navigator.share) {

          const blob = await fetch(image).then((response) => response.blob());
          let name=Date.now()+"-"+title+".png"
          let file = new File([blob], name, { 
            type: blob.type, lastModified: Date.now() 
          });

          let shareData = {
            text, 
            url,
            title,
            files: [file],

          };
            navigator.share(shareData)
            .then(() =>handleShare())
            .catch((err) => console.log("Error sharing", err));
          }
          else{
            alert("Share not supported by this browser")
          }
      }
    }
  }

But on mobile, it saves only image and no description or title or URL.
enter image description here

Nadir Hussain
  • 31
  • 1
  • 3

1 Answers1

0

I found a solution for this by using react-share, PinterestShareButton and passing required arguments.

    <PinterestShareButton url={imageUrl} media={imageUrl} description= 
  {pinterestDescription}>
    <Image src={Pinterest} /> 
    Pinterest
    </PinterestShareButton>
Nadir Hussain
  • 31
  • 1
  • 3