facebookfacebook-likefacebook-likeboxfbjs

Show loading message before facebook like box loaded completely

Any simple way to show loading icon or message until loading Facebook like box on page.

And hide message/icon after like box completely loaded on page.

Snap:

enter image description here

Code:

<div id="fb-root"></div>
<script>(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&appId=488390501239538";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function TakePreview()
{
    jQuery('#loadingmsg').show();
    location.href = location.href;
}


<div id="previewfanbox">

  <strong>Fanbox Widget Preview</strong><br>
  <p id="loadingmsg" style="display:none;">Loading Like Box, please wait...</p>

  <div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
  </div>

</div>

    <input name="takepreview" id="takepreview" class="button" type="button" value="Refresh Preview" onclick="return TakePreview();"><br>

So, please suggest me a simple way or any other way to achieve this. Thanks mates!

Solution

  • I've set this up with pure CSS!

    When using the HTML5 Like Box, Facebook adds a data-attribute once the Like Box is loaded. So to target the loading state, I added a spinner GIF to the container and then removed it using an attribute selector:

    .fb-like-box {
    background-image: url(../img/loading_icon.gif);
    background-position: center;
    background-repeat: no-repeat;
}
.fb-like-box[fb-xfbml-state="rendered"] {
    background-image: none;
}

    Depending on your implementation, you may need/want to force a height on the loading state and some styles on the container div also while the box loads, but that should get you started.

    The one minor caveat is that this only works in browsers that support attribute selectors, but the only "major" one is IE7 which most people have dropped support for at this time.