如何在 React JS 中將 Image-Url 分享到 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- 還沒找到

嘗試的事情：嘗試使用 componentDidMount 中的 createElement 和 setAttribute 動態地將存儲在狀態中的 {imageUrl} 添加到元標記中，它沒有在 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>

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 是什么，我imageurl可以添加到元og:image標簽中。