title: Facebook Social Plugins comments section hidden by classname (ReactJS)
body: <p>I'm using ReactJS (developped by Facebook) and I'm currently having issues displaying a Comment secton from Facebook Social Plugins... kind of ironic but hey, they haven't made a plugins themselft for react. </p>
  
  <p>Anyway, I have inserted the diffent element in my code to add the comment section. When I'm loading the page, I can see the section is loading! (for less than a second) but it desappear quite rapidly. I checked the code generated by facebook and I found that it was adding in the class of my element : FB_hide_iframes. I tried removing it and the section was showing in my page!</p>
  
  <p>The problem is that I don't know how to control the class added to my component.</p>
  
  <p><a href="http://i.stack.imgur.com/5nya3.png" rel="nofollow">As you can see, the comments section is present, but it is hidden by the class FB_hide_iframes which i haven't put there.</a></p>
  
  <p>Here's the code to add the section in my home page (home.js)</p>
  
  <pre><code>componentDidMount() { 
  ...
  window.fbAsyncInit = function () {
          FB.init({
              appId: 'XXXXXXXXXXXXXX',
              xfbml: true,
              version: 'v2.6'
          });
      };
      (function (d, s, id) {
          console.log('test');
          const fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          const js = d.createElement(s); js.id = id;
          js.src = '//connect.facebook.net/fr_CA/sdk.js#xfbml=1&amp;version=v2.6&amp;appId=XXXXXXXX';
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      FB.XFBML.parse(); 
  ...
  }
  </code></pre>
  
  <p>and in the render function I added : </p>
  
  <pre><code>render() {
  &lt;div id="fb-root"&gt;&lt;/div&gt;
  ...
  &lt;div className="fb-comments"
                      data-href="MY-URL"
                      data-width="1000"
                      data-numposts="10"
                      data-order-by="reverse_time"&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Anyone got an idea?</p>
  
  <p>Edit: 
  The comments section is showing, but when I go in another section of my website and comeback (Single-page App), it Disappears.
  Here's the code of my component :</p>
  
  <pre><code>    import React, { Component, PropTypes } from 'react';
  import { mediaQueries } from '../../decorators';
  
  @mediaQueries
  export default class FacebookComments extends Component {
      static propTypes = {
      mediaQueries: PropTypes.func.isRequired,
      appId: PropTypes.string.isRequired,
      version: PropTypes.string.isRequired,
      url: PropTypes.string.isRequired,
  };
  
  state = {
      mobile: false,
  }
  
  componentDidMount() {
      this.props.mediaQueries('(max-width: 950px)', () =&gt; {
          this.setState({
              mobile: true,
          });
      });
      this.props.mediaQueries('(min-width: 951px)', () =&gt; {
          this.setState({
              mobile: false,
          });
      });
  
          FB.init({
              appId: 'XXXXXXXXXXXXXXXXX',
              xfbml: true,
              version: 'v2.6',
          });
  
      (function (d, s, id) {
          const fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          const js = d.createElement(s); js.id = id;
          js.src = '//connect.facebook.net/fr_CA/sdk.js';
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  }
  
  componentDidUpate() {
      FB.XFBML.parse();
  }
  
  render() {
      const componentWidth = this.state.mobile ? '95%' : '75%';
  
      return (
          &lt;div style={{ width: componentWidth }}&gt;
              &lt;div id="fb-root"&gt;&lt;/div&gt;
              &lt;div className="fb-comments"
                  data-href={this.props.url}
                  data-width="100%"
                  data-numposts="10"
                  data-order-by="reverse_time"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>luschn I don't know and don't understand what you are saying. I put a console.log in fbAsyncInit and it never showed, which mean it never get called. I looked online and there's no information about it. People online only say : Put that in you code and let the magic happen.....
  That's why I removed it from my code. 
  Edit #2 : All I have for Facebook Social Plugin is in this code.</p>