Geek Answers Handbook

How to load a functional method after the facebook plugin download is complete?

I have jQuery masonry to host list items on my website, each list item has fb: comments. Downloading the SDK asynchronously, even by placing the $ container.masonry ('reload') method; after FB.init (), the list items are still overlapping.

I tested the installation of the alert () block before rebooting the masonry, if you quickly close the warning window, the elements still overlap, but if you close it after a while, it correctly displays the margin. Therefore, I assume that the reboot of the masonry is done before the contents of fb: comments finish loading.

How to cause a reboot of the masonry after the contents of fb: loading of comments completed? Not at the push of a button. Images show when they overlap and masonry reloads after fb: comments.

+4
source share
2 answers

If you use the version of xfbml plugins, you can subscribe to xfbml.render - fired when all plugins (calls) are completed. http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

+3
source

According to FB.Event.subscribe , a download event appears that will be fired automatically when the page finishes rendering the plugins

Step-1: In HTML (put where you want to show the social box):

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>

Step-2: In the footer (just before the end of the <body> ):

 <div id="fb-root"></div> <script> window.fbAsyncInit = function(){ //FB.init({ status: false, cookie: true, xfbml: true }); FB.Event.subscribe("xfbml.render", function(){ SocialBoxesLoaded(); //-->this is what we want (any custom Function) :) }); }; (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/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); function SocialBoxesLoaded(){ //...Your Custom Code... } </script>
+1
source

More articles:


All Articles