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.

Did you find any solution? – Skaranjit Aug 22 '17 at 07:46 — Skaranjit, Aug 22 '17 at 07:46

score 3 · Answer 1 · answered Jul 17 '17 at 14:15

3

Please add <TwitterIcon> in your code

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

answered Jul 17 '17 at 14:15

Yogen Darji

3,230
16
31

How to get the current url – Trect Oct 29 '19 at 14:59
I know it is super old, but... with window.location.href – Leonard Lepadatu Oct 30 '22 at 23:19

score 3 · Answer 2 · answered Apr 11 '19 at 20:15

3

react-share does not support image uploading. You can only share url, title and hashtags with TwitterShareButton. Main image of page will be showed when you add url.

Also your icon is missing, this is how you can add icon.

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

answered Apr 11 '19 at 20:15

Hassan Ajaz

613
8
15

that same method isn't working with Pinterest and Instagram share. – Dharmik Shah Nov 25 '22 at 07:17

Pavan · Answer 3 · 2018-01-19T04:44:23.283

1

You can not share rich content to twitter using this widget, only way is to host your image on static url and share that url via TwitterShareButton

Sample react-share code snippet at https://samvikshana.weebly.com/blog/react-share-social-share-widgets

edited Jan 19 '18 at 04:44

answered Jan 18 '18 at 16:31

Pavan

819
6
18

Al1 · Answer 4 · 2020-08-19T14:49:30.057

1

Correct answer is that you need to pass a child (Icon) to the ShareButton and also IMPORT it.

Example:

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

It's a very nice tool.

edited Aug 19 '20 at 14:49

answered Aug 19 '20 at 14:23

Al1

308
3
9

Could you provide a bit more context to your code, for example the imports. Also try to use the TwitterShareButton example to match the question. – P Fuster Aug 19 '20 at 14:32

How to implement share to twitter with react js

4 Answers4

Linked