Console.log something once async Facebook Like button is loaded (displayed)

Question

I'm using simple like button on my page:

<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/pl_PL/sdk.js#xfbml=1&version=v2.4";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and my HTML

<div class="fb-like"
     data-href="https://www.facebook.com/link_to_sample_fanpage"
     data-layout="button_count"
     data-action="like"
     data-show-faces="false"
     data-share="false">
</div>

Everything is working. Button is loaded asynchronously and that's cool. What I want to achieve is to perform specific action, let's say console.log('async button loaded) once the button is being loaded.

Something like a callback on init? Do I have to use some FB API?

Answer 1

The JS SDK allows you to subscribe to certain events, and one of them is xfbml.render :

Fired when FB.XFBML.parse() completes. This indicates that all of the social plugins on the page have been loaded.

https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.4

(You don't need to explicitly call FB.XFBML.parse , it will fire for social plugins parsed by the SDK on initial load as well.)

Answer 2

Thank you CBroe. Your answer was very very helpful. I will accept it but to add something valuable I will also paste my final solution below.

Inside window.fbAsyncInit I've added my custom event called social_finished_rendering .

FB.Event.subscribe('xfbml.render', social_finished_rendering);

and then later in the code

var social_finished_rendering = function() {
    // console log whatever
};

No I was able to perform my DOM actions once async Like button is loaded. Thank you CBroe!