Facebook Developer API in reactjs code

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 ?

Solution

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().