Как реализовать поделиться в твиттере с реагировать JS

Question

Я хочу позволить пользователям обмениваться изображениями с моего сайта в Twitter.

Для этого я использовал этот модуль реагирующий обмен. Но он не дает возможности обмениваться изображениями.

Мой код выглядит так.

import { ShareButtons, ShareCounts, generateShareIcon, } from 'react-share';

const {
    FacebookShareButton,
    GooglePlusShareButton,
    LinkedinShareButton,
    TwitterShareButton,
    PinterestShareButton,
    VKShareButton,
} = ShareButtons;

<TwitterShareButton
    url={shareUrl}
    title={title}
    className="shareBtn col-md-1 col-sm-1 col-xs-1">
    <a className="twitter"><i className="fa fa-twitter" aria-hidden="true"></i></a>
</TwitterShareButton>

Пожалуйста, помогите мне исправить это как поделиться изображениями в твиттере.

Answer 1

Пожалуйста, добавьте <TwitterIcon> в вашем коде

<TwitterShareButton
        url={shareUrl}
        title={title}
        className="Demo__some-network__share-button">
        <TwitterIcon
          size={32}
          round />
      </TwitterShareButton>

Answer 2

response-share не поддерживает загрузку изображений. Вы можете делиться только URL, заголовком и хэштегами с TwitterShareButton. Главное изображение страницы будет показано при добавлении URL.

Также ваша иконка отсутствует, вот как вы можете добавить иконку.

<TwitterShareButton url={url} title={title}>
    <button className="btn btn-circle">
        <i className="fab fa-twitter"> </i>
    </button>
</TwitterShareButton>

Answer 3

Вы не можете делиться богатым контентом в твиттере с помощью этого виджета, единственный способ - разместить изображение на статическом URL и поделиться этим URL через TwitterShareButton

Пример кода кода реакции-обмена на https://samvikshana.weebly.com/blog/react-share-social-share-widgets

Answer 4

Правильный ответ заключается в том, что вам нужно передать дочерний элемент (значок) в ShareButton, а также ИМПОРТИРОВАТЬ его.

Пример:

    import React, { Component } from "react";
    import {
      TwitterShareButton,
      TwitterIcon,
    } from "react-share";
    class Quotes extends Component {
    
     render() {
return( <div>
     <TwitterShareButton
              title="Hello"
             url="https://stackru.com/"
            >
             
              <TwitterIcon size={32} round />
            </TwitterShareButton>    

</div>
       )
    }
 }

Это очень хороший инструмент.