Facebook DIV not rendering on page

Question

I have this script which I put on top of the GWT nocache.js

<head>
    <script type="text/javascript" language="javascript">
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
        <script type="text/javascript" language="javascript" src="app/app.nocache.js"></script>
</head>
<body>
    <div id="fb-root"></div>
    <div id="rootPanel"></div>
</body>

And on one of the page of the my site (which I usu Errai-UI)

This is added:

    HTMLPanel likebox = new HTMLPanel("<div class='fb-like-box' " +
                    "data-href='http://www.facebook.com/platform' data-width='595' " +
                    "data-show-faces='true' data-stream='true' data-header='true'></div>");

    likepanel.add(likebox);

The problem I am facing is that in my GWT application, when the site lands on the page where this panel is injected, the Facebook like box doesn't get rendered, even if I look at the DOM, the <div class='like-box' ...> is there in the DOM tree.

What works is that I need to do a full page refresh (in DevMode), on the currect page: example: /mysite#PageWithFBDiv

Also, the page refresh trick only works in DevMode but fails to do the trick when compiled.

score 4 · Answer 1 · answered Mar 21 '13 at 13:00

According to Facebook Javascript SDK Documentation, It is necessary to place the div on top of the page , i.e. above the script.

The JavaScript SDK requires the fb-root element to be present in the page.

The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.

The SDK inserts elements into fb-root which expect to be positioned relative to the body or relative to an element close to the top of the page. It is best if the fb-root element is not inside of an element with position: absolute or position: relative. If you must place the fb-root element inside of a positioned element, then you should also give it a position close to the top of the body or some parts of the SDK may not work properly.

This code should be placed directly after the opening tag.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID from the App Dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };

  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might 
  // contain some type checks that are overly strict. 
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>

Facebook DIV not rendering on page

1 Answers1