如何在React JS中分享图片链接到Facebook、Twitter和Instagram

Question

我有一个页面，用户可以上传他们的图片并使用一个API进行编辑。

现在需要以URL格式分享收到的图片至Facebook、Twitter和Instagram等社交媒体。

以下是用于社交媒体重定向的URL：

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- 尚未找到对应的URL。

已尝试的方法： 尝试在 componentDidMount 中使用 createElement 和 setAttribute 动态地将存储在状态中的 imageUrl 添加到 meta 标签中，但无法在 Facebook 中更新此图像，但可以将该图像添加到 head->meta 标签中的 og:image。 请提供一些解决方案。这将是一个很大的帮助。

           <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>

- Amrutha VS

---

如果你愿意尝试一个npm包，可以试试'react-share'包。 - pritam

Answer 1

我所实现的答案如下。假设Facebook的URL为：

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

您可以将动态图片URL附加到imageurl属性上，Facebook的爬虫将访问https:example.com/imageurl=https://imageurl.url.com。然后，您必须提取查询参数并附加imageurl-URI，最后，如果您正在使用NEXT JS，则从getInitialProps返回它。

无论从imageurl中提取的URI是什么，都可以添加到meta og:image标记中。

- Amrutha VS

---

Instagram的分享链接是什么？ - huykon225

无法工作！如何获取Instagram用户个人资料图片并在img标签HTML中显示？ - Mojtaba Darzi