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-target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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 ?
Answer
Since class
is a reserved word, React uses className
. The below should solve your problem
<div className="fb-share-button" data-target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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:target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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-target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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()
.
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?