javascript - How to implement share to twitter with react js

Question

I want to let users share images from my website to twitter.

I used this module react-share to implement this.But it doesn't give an option to share images.

My code looks likes this.

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>

Please help me fix this on how to share images to twitter.

Answer 1

react-share不支持图片上传。你只能用TwitterShareButton分享 url、title 和 hashtags 。添加 url 时将显示页面的主图像。

您的图标也丢失了，这就是您添加图标的方法。

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

Answer 2

请添加<TwitterIcon>您的代码

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

Answer 3

您不能使用此小部件将丰富的内容分享到 twitter，唯一的方法是将您的图像托管在静态 url 上并通过共享该 urlTwitterShareButton

示例 react-share 代码片段位于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://stackoverflow.com/"
            >
             
              <TwitterIcon size={32} round />
            </TwitterShareButton>    

</div>
       )
    }
 }

这是一个非常好的工具。