nygardk / react-share Goto Github PK
View Code? Open in Web Editor NEWSocial media share buttons and share counts for React
License: MIT License
Social media share buttons and share counts for React
License: MIT License
It seems that none of the share counts are working... In my console I'm also not seeing any external http requests of any sort that would load that number.
I recently tried to get an ad approved on Facebook and got a warning because "it includes outdated facebook brand assets". I believe it might be due to the Facebook share button that comes with react-share but am not entirely sure.
I was wondering if anyone else ran into this problem
Hi, I started to use this plugin for sharing our posts on facebook from our website.
Everything is going well on desktop. When I share on mobile I can go 2 ways (see picture of new tab in mobile browser). I can share post without problems, when I log into facebook webpage. But when I choose to go with native app, I loose share title, description and also picture.
Is this bug or missing feature? Or is it completely unavailable?
I have to integrate Google analytics and i am trying to add an attribute data-ga='click_btn_fb' in the code <FacebookShareButton url={shareUrl} title={title} picture={picture} className="shareIcn"> <FacebookIcon size={32} **data-ga={dataga}** round /> </FacebookShareButton>
But it is taking only size,round attributes.How can i customize it and add the data attribute to the icons?
Hi,
I was wondering if we could add a default message or link back to the website that originally referred the url.
In share-buttons.jsx
there is a function createShareButton
which makes use of React.createClass()
This is deprecated behaviour now and should be changed to classes that extend React.Component
I was running into this issue a lot when using brunch v2.3.0
and babel-brunch v5.1.2
. First maximum call stack size exceeded
was being thrown on importing core-js
or regenerate
from babel-polyfill
(would change between the two frequently). It eventually turned out that the issue was with the jsonp
import.
The solution was to use brunch v2.4.x
with babel-brunch v6.0.x
. Note that brunch v2.5.x-v2.8.1 (current head)
still had the issue present. I'm not exactly sure why in my digging, but if I have more time later I will update this.
This is probably a particularly rare bug to come across (and possibly exceeding the scope of this repo), so if you want to just immediately close it that's fine. It just seems note-worthy in case anyone else comes searching for it.
I display the Share buttons as part of a modal and would like to automatically close the modal if the user has succesfully share the page on Twitter / FB, etc. I was wondering if there would be any way to add a callback prop to the share buttons which is called when one of the share popups closes.
From what I know it should be possible to share at least multiple images with Facebook.
So allowing to pass an array to the url
props could be interesting for those cases.
The same as the title
For now i just can share links or messages with parameter, i used the meta parameter in html header
<meta property="og:image" content="path-to-my-image.png">
But it doesn't work, then I tried to edit the share-button.js with no results either
Anyone knows how to do that or a video or any media?
Thanks in advice 👍
Hi, just wondering if there are any plans to add Instagram in the near future? Thanks!
Error occurred when I run demo, then click on Facebook share button.
Uncaught TypeError: Cannot read property 'matches' of null at getParent (<anonymous>:13:19) at blockWindow (<anonymous>:23:81) at window.open (<anonymous>:34:9) at windowOpen (utils.js:33) at windowOpenBound (share-buttons.jsx:47) at ShareButton._this.onClick (share-buttons.jsx:52) at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69) at executeDispatch (EventPluginUtils.js:85) at Object.executeDispatchesInOrder (EventPluginUtils.js:108) at executeDispatchesAndRelease (EventPluginHub.js:43)
Is it possible to pass a message to the component to prepend the link on share?
Hi,
I'm currently using react-share to add icon to share face/twitter/etc. page. The problem is that I have multiple page where I need a Youtube Icon like the others. I don't need to be able to share on Youtube, just the icon.
Could you add the youtube Icon to react-share?
I use Google App Engine for my website, and it uses npm version 2.14.4. But this package supports npm3, so warning message comes out when installing this package.
npm WARN engine [email protected]: wanted: {"node":">=4.0.0","npm":">=3.0.0"} (current: {"node":"4.1.2","npm":"2.14.4"})
The className attribute of ShareButtons doesn't seem to have any effect on the rendered component.
Here is a snippet extracted from my code that illustrates the problem. First my jsx:
<GooglePlusShareButton
url="http://www.google.ch/"
className="my-awesome-class">
<Button>
<i className="fa fa-fw fa-lg fa-google-plus" />
</Button>
</GooglePlusShareButton>
And the rendered component:
<div class="SocialMediaShareButton SocialMediaShareButton--google-plus" data-reactid=".0.2.0.1.2.0:$366.1:$0.0.1.4.2">
<button type="button" class="btn btn-default" data-reactid=".0.2.0.1.2.0:$366.1:$0.0.1.4.2.0">
<i class="fa fa-fw fa-lg fa-google-plus" data-reactid=".0.2.0.1.2.0:$366.1:$0.0.1.4.2.0.0"></i>
</button>
</div>
The same problem also appears in the demo code. I checked on both Chrome (47.0.2526.106, x64) and Safari (9.0.2).
I am using react-share in my web app, everything is working fine except G+ count.
I am getting below error:
Uncaught TypeError: Cannot read property 'metadata' of undefined
onSuccessdata @ share-count-getters.js:66
Hi, wondering if anyone else noticed this?
I have also found this info on stackoverflow.
assert.js:137 Uncaught AssertionError: twitter.text
Because right now they don't work on iOS 10.3.1
I haven't had the time to debug this using the Safari Developer Tools, as I'm on mostly working on Linux.
after updating to 1.9.1 i got this error and facebook share count doesn't show.
share-count-getters.js:32 Uncaught TypeError: Cannot read property 'share_count' of undefined
Uncaught TypeError: Cannot read property 'metadata' of undefined(…)
share-count-getters.js 67
xhr.onload = function onSuccessdata() {
var data = JSON.parse(this.responseText);
callback(!!data ? data.result.metadata.globalCounts.count : undefined);
};
data.result is undefined
According to this stackoverflow post, it's possible to give an URL to sharer.php in order to embed it.
I tried and it's working, will open PR
I added Telegram and Whatsapp share buttons. please checkout my PR.
I think facebook sharer.php accepts title and description query params, besides using the og:title og:description meta data from the crawled page. Any reason why they were omitted?
cc-ing @NickDueber-minted.
Hi,
The counter is only updated on componentDidMount
(Invoked once, only on the client). When we change prop url
, the counter is not updated.
Maybe, we need update counter on componentWillReceiveProps
or componentWillUpdate
.
Thanks
Can it be styled to resemble a share button? Beside the width and height, the icon does not receive any styles.
Hi, I am having an issue with an async problem. For my use case I have an element on the site that gets turned into an image and saved to a 3rd party storage site and then returns a url for the image. But I need to react-share popup not open until it successfully returns the url. I tried using beforeOnClick but the social share popup box opens before the promises for the beforeOnClick have finished. Is there a way to make sure the beforeOnClick returns data before the pop up box opens?
Hello, sometimes when I request Facebook counts, I get this error :
{
"error": {
"message": "(#4) Application request limit reached",
"type": "OAuthException",
"is_transient": true,
"code": 4,
"fbtrace_id": "E+h93KlSgIM"
}
}
Is there a way to add an api key to extends or control the limit ?
Hello, thanks for this nice component.
I tried using it inside meteor, but got awkward errors(meteor/meteor#7839) cause by platform.js(bestiejs/platform.js#109)
After looking trough the react-share code i wondered why it even needs platform.js.
As far as I can see you basically only use it to check if ie < 11.
ie < 11 aren't supported any more anyways(lts has stopped and usage is below < 0.4 %), so eventually it would make sense to just also drop supporting them.
Would you accept a pr on this(drop platform.js and ie < 11 checks)?
Regards,
Lukas
Version: react-share 1.8.0
Error text:
Uncaught Invariant Violation: findComponentRoot(..., .0.$=10.1.0.0.1.1.0.0.0.0.0.$flipbook-2.6.0.3.0.4.$icons-twitter): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID``.
Partial example:
Page.js:
import React from 'react';
import Icons from './Icons';
const Page = React.createClass({
render: {
return (
<div>
<Icons />
</div>
);
}
});
export default Page;
Icons.js:
import React from 'react';
//
import { ShareButtons, ShareCounts, generateShareIcon } from 'react-share';
//
const {
FacebookShareButton,
GooglePlusShareButton,
LinkedinShareButton,
TwitterShareButton,
PinterestShareButton,
VKShareButton
} = ShareButtons;
//
const FacebookIcon = generateShareIcon('facebook');
const TwitterIcon = generateShareIcon('twitter');
const GooglePlusIcon = generateShareIcon('google');
const LinkedinIcon = generateShareIcon('linkedin');
const PinterestIcon = generateShareIcon('pinterest');
const VKIcon = generateShareIcon('vk');
const Icons = React.createClass({
render() {
const title = 'Example';
const shareUrl = 'http://www.example.com';
//
return (
<div className="icons">
<div className="Demo__some-network">
<FacebookShareButton
key="icons-fb"
url={shareUrl}
title={title}
className="Demo__some-network__share-button">
<FacebookIcon
size={32}
round />
</FacebookShareButton>
</div>
<div className="Demo__some-network">
<TwitterShareButton
key="icons-twitter"
url={shareUrl}
title={title}
className="Demo__some-network__share-button">
<TwitterIcon
size={32}
round />
</TwitterShareButton>
</div>
<div className="Demo__some-network">
<GooglePlusShareButton
key="icons-gp"
url={shareUrl}
className="Demo__some-network__share-button">
<GooglePlusIcon
size={32}
round />
</GooglePlusShareButton>
</div>
</div>
);
}
});
export default Icons;
I saw you're currently working on the Pinterest sharing feature as well.
Any updates on this? :)
How is the title prop being used for the facebook share? Looks like only url is being used for the constructing the popup url. I believe facebook figures out the title from the page's og:title or title metadata from their cache OR crawling the page again if no hit in their cache for this page.
I can create PR to change the doc but wanted to be sure before.
Let me know please and thanks,
previous issue is fixed but i got a new error.
Mixed Content: The page at 'https://www.zerocho.com/category/jQuery/post/57b356d4d841141500b31e1e' was loaded over HTTPS, but requested an insecure script 'http://graph.facebook.com/?id=https://www.zerocho.com/category/jQuery/post/57b356d4d841141500b31e1e&callback=__jp0'. This request has been blocked; the content must be served over HTTPS.
I think it's because of difference in http and https.
can you change http://graph.facebook.com to //graph.facebook.com in order to support both http and https?
Hi,
I just updated to 1.13.1 (thanks ! 👍 ), but I still get the warnings. The code pulled from npm seems to not have been updated. Is this me ?
How can I customize the card that is shared using Twitter with react-share
? Twitter suggests using HTML meta
tags for configuring and adding images to their share cards. For example, I'm trying to use the "summary_large_image" card type, as described here: https://dev.twitter.com/cards/types/summary-large-image
So I basically want to add these meta tags to my page:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
To make this work with react using react-share
, I am doing the following:
import {Component} from "react";
import Helmet from "react-helmet";
import {ShareButtons, generateShareIcon} from "react-share";
import styles from "./test.css";
class Test extends Component {
render() {
const title = "I wanna share this!";
const {
TwitterShareButton,
} = ShareButtons;
const TwitterIcon = generateShareIcon('twitter');
const url = this.getShareUrl();
return (
<div className={styles.shareHeader}>
<Helmet
meta={[
{"name": "twitter:card", "content": "summary_large_image"},
{"name": "twitter:title", "content": "Parade of Fans for Houston’s Funeral"},
{"name": "twitter:image", "content": "http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"}
]}
/>
<div className={styles.socialShares} style={{display: 'flex'}}>
<TwitterShareButton url={url}
title={title}
hashtags={['test', 'test2']}
>
<TwitterIcon size={32}/>
</TwitterShareButton>
</div>
)
}
}
export default Explorer;
but the sharing page that appears after clicking the Twitter button doesn't have any of the information from my meta tags. How can I pass this information to react-share
?
I think the solution here would also solve a similar problem with Facebook's sharing page, which uses the OpenGraph meta tags.
I see the share counts being static.Is there a way to increment share count after each successful share?
Thanks in advance
Hey guys,
I started digging in your code to implement an email sharing button, and it seems like there's some work in there already for an email button.
Is this in the works or was it abandoned?
npm install fails for this reason.
Also, the package should not rely on any globally installed packages, and can instead point to the executables in node_modules/./bin
.
A cursory glance at the package.json file shows that the following modules are expected to be installed globally:
These should either be added to the package.json, or installing these modules should be explained in the readme. (with the former being much more preferable)
react 15.2.0 makes following error messages. I think this package needs to follow link (Actually, not only this package, but also all packages that depend on react, including mine)
warning.js:44 Warning: Unknown props `url`, `opts` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in div (created by ShareButton)
in ShareButton (created by Constructor)
in Constructor (created by Post)
in div (created by Post)
in article (created by Post)
in div (created by Post)
in Post (created by Connect(Post))
in Connect(Post) (created by Connect(Connect(Post)))
in Connect(Connect(Post)) (created by RouterContext)warning @
warning.js:44 Warning: Unknown prop `getCount` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in div (created by SocialMediaShareCount)
in SocialMediaShareCount (created by Unknown)
in Unknown (created by Post)
in div (created by ShareButton)
in ShareButton (created by Constructor)
in Constructor (created by Post)
in div (created by Post)
in article (created by Post)
in div (created by Post)
in Post (created by Connect(Post))
in Connect(Post) (created by Connect(Connect(Post)))
in Connect(Connect(Post)) (created by RouterContext)
Hi, In my Facebok share never got picture show up when Im sharing, anyone have this issue?
Hi ~
Facebook share button is not working, did I make any mistake?
<FacebookShareButton url={url} title={title}>
<FacebookIcon size={32} round />
</FacebookShareButton>
When we want to dynamically populate our meta tags, which are parsed by our social media bots like Twitter/Facebook/etc, it often takes a couple seconds for those tags to be generated. This is because we are using a solution, as outlined in this post:
in which case we need to wait for an html file that contains our metatags to be uploaded to and S3 bucket before react-share triggers the provided url to be parsed by our social media bots. But react-share immediately triggers the social media bots to parse the provided url when the button is clicked.
To solve this problem, I think we need an ability to override the onClick
event handler function in a way that will prevent react-share from parsing the url until we are sure that our html file has been uploaded. The most reasonable way that I can see to do this is to override the onClick
handler, and call this.onClick
inside of our custom onClick
handler when our metatags are ready to be parsed.
Also, here is a useful SO post that outlines some ideas about overriding the event handler function of a react component:
That post summarizes this issue in that we'll need to customize the ShareButton
component to accept a custom onClick
event handler, because React's "one-way data-flow" doesn't allow us to bind handlers outside of the child component.
How can i pass og:image to share buttons ?
i have the next error when i try to include react-share in my app, all compile fine and if i go to another routes where no is loading this library works fine, but when i include it crash.
TypeError: util.inherits is not a function
i am using webpack dev server with webpack 2. i am mocked the next modules
note: i tried to mock utils so because util is not defined in not node env.
node: {
fs: "empty",
child_process: "empty",
},
Facebook now supports adding one (!) hashtag to the user's message, via the hashtag parameter. This is unfortunately only documented to work via the SDK but actually also works with sharer.php.
See here for SDK docs:
https://developers.facebook.com/docs/sharing/reference/share-dialog
Try this link:
https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse&hashtag=%23yolo
method api vk - likes.getList
I'm interested that how to draw the svg to fit to rect or circle
Why is title
a required prop in FacebookShareButton? I rendered a facebook share button and it gave me an error
warning.js:36 Warning: Failed propType: Required prop `title` was not specified in `CreatedButton`
At first I count make out what i did wrong in my code and upon further investigation i figured it out.
I just wanna know what was the purpose behind keeping the title prop as required in the FacebookShareButton
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.