Facebook Developer API in reactjs code

Question

I have two files in my project

index.html : contains 'app-container' where reactjs components mount
app.js : the file which has the react components

I want to use the facebook like and share button in my reactjs app. But I want them to appear only at certain points of time.

That is, I want to display them from reactjs's render() function, not permanently on my html page.

I proceeded the following way -

1.) I added the link to facebook javascript SDK on my index.html page.

2.) I added the code-plugin for like/share button in my render method.

<div class="fb-share-button" data-href="http://localhost:3000/game" id = "fbshare" data-layout="button_count"></div>

But the problem is that even though the components mount properly, like/share button are not visible.

Can anyone point out how I should proceed ?

Do you get any errors in the console?

Daniel B
– Daniel B

2015-12-16 14:22:46 +00:00
Commented Dec 16, 2015 at 14:22 — Daniel B
– Daniel B, Commented Dec 16, 2015 at 14:22
@DanielB No errors in the console.

Sachin
– Sachin

2015-12-16 14:44:19 +00:00
Commented Dec 16, 2015 at 14:44 — Sachin
– Sachin, Commented Dec 16, 2015 at 14:44

Magnus Engdal · Accepted Answer · 2015-12-17 07:19:21Z

5

Since class is a reserved word, React uses className. The below should solve your problem

<div className="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>

The problem is that it won't complain if you type class="", or anything else for that matter, like xlink:href="" or other unsupported attribute names. It will simply leave it out, and your share button won't get it's style, thus probably leaving it invisible on the page.

If you want to use unsupported attribute names, dangerouslySetInnerHTML is the way to go.

render: function() {
  var html = '<div class="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>';

  return (
    < div dangerouslySetInnerHTML = {{__html: html}} />
  );
}

If it still isn't working, it's probably because you are rendering the button after Facebook has finished parsing the page. In that case, you can use FB.XFBML.parse() in componentDidMount().

edited Dec 17, 2015 at 7:19

answered Dec 17, 2015 at 6:55

Magnus Engdal

5,6343 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sachin Over a year ago

That worked. Special thanks for pointing out the use of FB.XFBML.parse() . :)

Collectives™ on Stack Overflow

Facebook Developer API in reactjs code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related