时间戳

首页 > 解决方案 > 如何在 React JS 中将 Image-Url 分享到 Facebook、Twitter 和 Instagram

javascript - 如何在 React JS 中将 Image-Url 分享到 Facebook、Twitter 和 Instagram

问题描述

我有一个页面，用户可以在其中上传他们的图像并使用一个 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- 还没找到

尝试过的事情：尝试使用 componentDidMount 中的 createElement 和 setAttribute 动态地将存储在状态中的 {imageUrl} 添加到元标记中，它没有在 facebook 中更新此图像，但能够将此图像添加到 og:image 中的 head->meta 标记中。请为我提供一些解决方案。这将是一个很大的帮助。

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

标签： javascriptreactjstwitterinstagramshare

解决方案

我实施的答案如下。假设 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，getInitialProps如果您使用的是 NEXT JS，则最后返回它。

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

推荐阅读