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:

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!

mrwweb · Accepted Answer · 2013-09-04 15:23:10Z

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.

@Frank see my answer that i posted below. Hope the answer helps!

Dharman · Accepted Answer · 2020-07-28 08:11:16Z

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

Collectives™ on Stack Overflow

Show loading message before facebook like box loaded completely

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related