olahol / react-social Goto Github PK

View Code? Open in Web Editor NEW

177.0 177.0 60.0 112 KB

Simple React components for social buttons (Facebook, Twitter and Pinterest) and social counts.

JavaScript 44.67% HTML 55.33%

react-social's People

Contributors

Stargazers

Watchers

Forkers

sugarshin burtyish ruiramos tarkanlar alexsugak jprincipe gsuveti ionutleustean dayalone guria jbq askaza moonion mbarszcz bartekgruszka kkotlarski xmaximin hinderberg x1ting thespacedojo 360i vitaliy-kovalenko maxs15 arvinkx uidu-org efernandesng dstuecken lintiff liazidiamine thefoxjob yumewang cortesa riverkanies ryanbooals linkesch rnevius nbsw dinukadesilva faithlife ievagr dlakata gimdongwoo dmorton-eab roma-so exdeniz vget98 zdavis ufirstgroup vlkurtin rteran huokedu alexcg16 winstonmhango brij2006patel abdulsalamalmahdi senfrot isabella232

react-social's Issues

Upgrade to React 14.X

Problem when sharing to Google Plus

I don't know why but it seems that I can't get the google url to work when the url parameter is encoded.

Check for yourself:

Unfortunatly as the lib encodes the url, I'm in the case where it does not work.

Am I the only one having this problem?

Message prop not working on Facebook Button

The message prop seems to work on Twitter but not Facebook. Any advice?

<FacebookButton appId="..........." url="www.google.com" message='Message goes here'>

<TwitterButton url="www.google.com" message='Message goes here'>

Unknown prop `sharer` on <span> tag

drop warning that sharer is unknown prop

import ReactSocial from 'react-social';
const { FacebookButton, TwitterButton } = ReactSocial;
<FacebookButton
            element={'span'}
            url={url}
            sharer
            className={s.fb}
            appId={sharing.facebook.app_id}
            windowOptions={['status=0', 'toolbar=0', 'width=480', 'height=350']}
          >

warning.js:36 Warning: Unknown prop sharer on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Question: Is it possible to share a blob in place of an image?

I want to use this library as my main social sharing but what I want to share outside of the url and an image url, I also want to share a blob or a HTML5 canvas dataUrI to facebook or whatever social network? Just curious if it is possible using this library?

Question - How to get Likes Count?

How to get Likes Count at Facebook Page?

Problem with server rendering

warning.js:45 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

warning @ warning.js:45
getInternalInstanceReadyForUpdate @ ReactUpdateQueue.js:34
ReactUpdateQueue.enqueueSetState  @ ReactUpdateQueue.js:181
ReactComponent.setState @ ReactComponent.js:65
(anonymous function) @ react-social.js:143
(anonymous function) @ ?callback=jsonp_1463407624090_466&url=http%3A%2F%2F127.0.0.1%3A3000%2Fpagina%2Fcronologia-dos-acont…:1

[email protected]

Pinterest Share going to in.pinterest.com/ instead of uk.pinterest.com/

got error Cannot read property 'matches' of null

i got this error when use it : Cannot read property 'matches' of null.
How can i fixed it? thanks.

ButtonGroup

I think of a ButtonGroup component that is capable of displaying all the buttons you want with just one single component. Because usually you want to share the same url with the same message at one time. So what you basically can do with a button group would be something like that:

render() {
  const url = "https://github.com/olahol/react-socia", message = "So cool!";
  const buttonsToShow = [{
       button: 'Facebook',
       style: BUTTON_WITH_COUNTER,
       appId: 'my-facebook-app-id'
    }, {
       button: 'Google',
       style: BUTTON_WITHOUT_COUNTER
    }, {
       button: 'Reddit'
    }
  ];

  return (
    <div className="btn-group">
      <ButtonGroup url={url} message={message} buttons={buttonsToShow} />
    </div>
  )
}

url and message are directly passed down to every button props since it is always the same. appId is only passed if available and needed. And there can be a button style that can display a button itself or one with a couter.

What do you guys think of that approach?

Instagram, Odnoklassniki, my world - Mail.ru social buttons needed

Hello! Great Repo!
I`m need a buttons:

for instagam;
for social network ok.ru;
for social network my world - Mail.ru;

So, later i'd try fork and realise it.

donreach.com share count API, limit of 1000 API requests per hour

We regret to inform you that due to a massive rise in popularity of our service we've had to implement a rate limit of 1000 API requests per hour. If you require more requests please contact us to discuss premium or dedicated options.

In most cases, this is not a problem.. but an issue.

Element could also be react component

I tried feeding the share buttons a React component (a custom button) rather than just the string name of a html tag.
It works perfectly. props get passed down and the component gets rendered nicely.

However react raised a PropType warning, since the validation requires a string.

warning.js:45 Warning: Failed propType: Invalid prop `element` of type `function` supplied to `FacebookButton`, expected `string`.

This should be easy to fix by adding function to the possible PropTypes.

Integrate Whatsapp

What do you think about integrating Whatsapp? I can make a PR :)

Structuring and ES6

How about structuring the components into separate files?

I'd go with this directory structure:

- index.js
- lib
| jsonp.js
| - Components
| | - Facebook
| | | - FacebookButton
| | | | - facebookbutton.js
| | | | - index.js
| | | - FacebookCount
| | | | - facebookcount.js
| | | | - index.js
| | - Xing
| | | - XingButton
| | | | - xingbutton.js
| | | | - index.js

.. and so on. What do you think?

The more buttons and functions, the more unmaintainable it will be with one single file in future.

It would also be nice to have different example styles for the buttons (with optional FontAwesome icons for instance). This would lead to an easier integration for new react users.

I'd also propose to switch to ES6 syntax in that step.

The web server reported a gateway time-out error

I don't why i can't use it
Is there place that i can check my quota
If i do over the limit of request where i can upgrade my account

Remove React warnings for PropTypes and createClass

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

React.__spread is deprecated

Had this error with react 15.0.1

React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.

window.open(url, target)

Hi,
Is it possible to pass a prop target to define target type. I want pop up instead of new window.
I saw on the code here
if (typeof result === "object") { var url = result[0] var target = result[1] } else { var url = result var target = "_blank" } window.open(url, target);
Thanks

Unknown props `message', `appId`, `_open` on <a> tag. Remove these props from the element.

When following the example using React 15, I'm getting this error message:

Unknown props message',appId,_open` on tag. Remove these props from the element.

Facebook count

Facebook count not working.
I think need to use https://graph.facebook.com/?id=
not api.facebook.com

GooglePlusButton is not working

Redirecting to https://plus.google.com/up/error/?etype=ad and it is show the error that The requested URL was not found on this server

Implement prop isPopup ?

React-social is a good package.
I think you should implement prop isPopup, and if isPopup == true, then open new popup window instead open new tab.
Example: http://www.rapidtables.com/web/html/link/html-link-new-window.htm

Add instagram share

Shouldn't the app_id for Facebook be settable?

It seems the app_id is hardcoded:

react-social/react-social.js

Line 249 in f4fd7c3

+ "app_id=145634995501895"

From what I've read, this should be set per app, not hardcoded.

Integrate more platforms

Just an idea,
We can use this source to integrate more platforms. https://github.com/esvit/angular-social/tree/master/src/scripts

I am going to work on google plus and share when i have done

media props is not working on facebook

when i pass the url of media it does'nt show media on shared post on facebook.
<FacebookButton
url={location}
appId={facebookAppId}
title={data.SingleCampaign ? data && data.SingleCampaign.Name : ""}
message={data.SingleCampaign ? data && data.SingleCampaign.Description : ""}
media={"https://s3.ap-south-1.amazonaws.com/isupportcause/uploads/campaign/banner/isupportimg_1585918590583.jpeg"}
>

Truncate Twitter text automatically?

Hi,

var msg = this.props.message === "" ?
        this.props.url : this.props.message + " " + this.props.url;

The url is shortened by twitter automatically and the size is always 23, so it makes sense to automatically truncate the message with a limit of (140 - 24) I think

Pocket

Hi,

It seems it's possible to share to pocket and have a count.
I've also seen donreach supports a count for pocket.

https://getpocket.com/publisher/button

It would be nice to support Pocket as well

Default prop URL

Receiving an error for url when not provided.

Warning: Failed propType: Invalid prop `url` of type `object` supplied to `MyComponent`, expected `string`.

Consider window.location.href:
https://github.com/olahol/react-social/blob/master/react-social.js#L87

Media for FB and TW

Hi man,

thank you for this component! But, how works the Media for FB and TW?

If I'm trying something like this:

var media = "http://someUrl.com/imageName.png";
...
<FacebookButton url={url} media={media}>
    FB share
</FacebookButton>

nothing happen there. Can you help me, how include the image there? Thank you!

facebook share button requires app id?

I chose to use this package because when I originally went through the example and implemented it, it just worked (for facebook and twitter). Now however, it is acting like it expects and facebook app id. Does this require an app id? If so, why no mention in example. If not, why am I getting the error?

when I click the fb button it renders a fb error: Invalid App ID: 0
url: https://www.facebook.com/dialog/feed?app_id=undefined&display=popup&caption=&link=http%3A%2F%2Flocalhost%3A3000%2Fcommunities%2F1%2Fposts%2F231&redirect_uri=https%3A%2F%2Fwww.facebook.com%2F

React 16 compatibility

Hi there,

after a 2 minute investigation (i.e. plz take this with a grain of salt), it seems to me that react-social is incompatible with React 16 because it uses the deprecated React.createClass

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

cheers
JL

React.renderToString error: react-social uses jsonp and requires a browser environment

Hi, how are you.
I´m having some trouble using this component with React.renderToString.
I get this error:

error: uncaughtException: react-social uses jsonp and requires a browser environment

from this line i guess:

[...]
  if (typeof document === "undefined" || typeof window === "undefined") {
    throw new Error("react-social uses jsonp and requires a browser environment");
  }
[...]

Is there a way to get this working?
Thanks!

TwitterButton fails on iOS

Hi, just tried using the TwitterButton component and it works fine on desktop browsers, however I see that on a iPhone it directs to a mobile.twitter.com side with the embedded message in the URL, but all I see on the phone is the Twitter Home page with the list of Tweets on the account. No compose tweet UI pops up like on Desktop.

Is this a known issue?