Show loading message before facebook like box loaded completely

Question

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:

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!

Answer 1

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.

Answer 2

There is one attribute fb-xfbml-state="none" that you should add manually to your fb-like-box class in HTML to stlke your fb-like-box manually.

    <div 
        class="fb-like-box" 
        fb-xfbml-state="none" 
        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>

Now write some CSS for the loader

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

.fb-like-box[fb-xfbml-state="rendered"] {
    background-image: none;
}

Since you have not provided the exact CSS of your page... I am demonstrating my code by my example using the exact same code that I have given

Pen Link: https://jsfiddle.net/ashuvssut/rLh2cauj/1/ (wait a sec! this pen just has the code that works...but this pen won't render those FB embedding cause these pen websites don't support this feature)

Proof : that it works: visit https://ashuvssut.github.io/Bless-n-Bliss/events.html