How to load a function method after facebook social plugin is has finished loaded?

Asked 4/9, 2011 at 5:42 Answered 11/11, 2016 at 20:36

Solved jquery-plugins facebook-social-plugins

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

I tested putting an alert() box before reload masonry, if close the alert box quickly the items are still overlapping but if close it after a while it display correctly with margin. So I assume the masonry reload runs before the content of fb:comments finish loaded.

How do I trigger masonry reload after the content of fb:comments finish loaded? Not by button click. Images show when it's overlapping and masonry reload after fb:comments.

Philander answered 4/9, 2011 at 5:42 Comment(0)

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

Geter answered 4/9, 2011 at 19:11 Comment(1)

Worked for me, too. If you want to see my working code example, look here: #5449693 – Logger 10/10, 2013 at 12:16

As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins

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

<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 ending the <body> tag):

<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>

Selfsupport answered 11/11, 2016 at 20:36 Comment(0)

Recommended topics

Hot tags