Как поделиться Image-Url для Facebook, Twitter и Instagram в React JS

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 - еще не найти

Вещи: пытался динамически добавлять {imageUrl}, который хранится в состоянии, в метатеги, используя createElement и setAttribute в componentDidMount, который не обновлял это изображение в facebook но могу добавить это изображение в og: image в head-> meta tags. Пожалуйста, предоставьте мне какое-нибудь решение. Это было бы очень полезно.

           <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

Ответ, который я реализовал, следующий. Предположим, что URL-адрес Facebook

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

Вы можете добавить динамический URL-адрес c к атрибуту imageurl, и сканеры Facebook будут go до https:example.com/imageurl=https://imageurl.url.com. Затем вы должны извлечь параметры запроса и добавить imageurl -URI и, наконец, вернуть его из getInitialProps, если вы используете NEXT JS.

Независимо от того, что может извлечь URI извлечения из imageurl добавлен в метатег og:image.