AJAX And Facebook Like Buttons

Facebook “like” buttons are pretty easy to implement – if you have a straight forward site.  If you are loading your content using AJAX or some other form of delayed load, you might notice a problem if you’re not using Facebook’s iframe.  FBML users have probably noticed that when loading “like” buttons using AJAX that they don’t show up.  There’s any easy fix for this.

First a little background information.  What’s happening is this: Facebook is waiting for the DOM to load and then begins parsing the FBML.  This is all fine an dandy except that when you make an AJAX call, this doesn’t cause the FBML to be re-parsed.  So the fix is simple, make Facebook parse again after you’re AJAX content has been inserted into the DOM.

The method to call is:

FB.XFBML.parse();

If you’re using jQuery, there’s a real easy and slick solution to this problem:

$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});

This way, all AJAX complete events that occur on the page will have an additional parse called tacked on to the end of them.  That’s all there is to it.  Hopefully this helps someone out there.

59 thoughts on “AJAX And Facebook Like Buttons

  1. james

    I’m relatively knew to web design. I can do most things, however getting Facebook comments to load on pages which are loaded using AJAX has been killing me for about a week now.

    I am using WordPress and the thing I am not sure on is where exactly should i be putting this code?

    hope that made sense, thanks.

    Reply
    1. godlikemouse Post author

      Hi James,

      You’ll need to add the call to Facebook parsing somewhere after the AJAX call back is complete. There should be something similar to a success function that you should be able to add the code to. Hope this helps.

      Reply
  2. GodLikeMouse Post author

    Hi ash, you may want to add another event to handle the ajaxcomplete, maybe something along the lines of:

    $(document).on(“ajaxComplete”, function(){
    //video code here
    });

    Reply
  3. ash

    Hey this is brilliant and fixed my issue with the FB likes.

    I’m wondering is it possible to add other code into this?

    I also want to run this code to display the counts of a Youtube video on the ajaxed page:

    [code]

    var video_id=’8JYzp7wKhGQ’;$.getJSON(‘http://gdata.youtube.com/feeds/api/videos/’+video_id+’?v=2&alt=jsonc’,function(data){
    document.getElementById(‘ytviews’).innerHTML = (data.data.viewCount);
    });

    [/code]

    But if I put it anywhere within the AjaxComplete it works but makes the facebook links go crazy.

    Any ideas?

    Reply
  4. Mark O'Brien

    Thanks for this!
    I’ve been trying to get infinite scroll and facebook like / facebook comments to work together and this fixed it. Absolute Legend!

    Reply
  5. Stefano

    Hi God, I solved it invoking the Parse() call at the end of the success: section. Strange, because in a jQuery $ajax request, the complete: section is executed after success: and error: callbacks are executed!

    Best regards and thanks again.

    Stefano

    Reply
  6. Stefano

    Thanks, it works great! But I’m having a problem… now the subscription to edge.create (FB.Event.subscribe(‘edge.create’)…) doesn’t fire. Do I have to call FB.XFBML.Parse(); in other places? Now I call it in the complete: section of the $ajax call. Is it the same than calling it in the success: section as you suggest?

    Thanks in advance for your help.

    Reply
    1. GodLikeMouse Post author

      Hi Stefano. Basically you want to make sure your content is loaded before invoking the FB.XFBML.Parse() call. The call will parse out all the elements on the screen and turn them into functioning social components. I’m not sure about the “edge.create” call, I haven’t used that yet. You may want to debug the call in a console to see if there are any errors being generated and to ensure that the “edge.create” call is actually being invoked.

      Reply
  7. Nithin

    Hi GodLikeMouse,

    The SCRIPT is not getting loaded even once during my Ajax call.

    I am displaying all the contents that i capture in Ajax at one file called .module file.

    In .module file i have a , but in this div no SCRIPT is getting loaded.

    I mean if i load my page normally without Ajax, the SCRIPT gets loaded and hence the buttons are functioned as expected.

    But if i use Ajax, the SCRIPT is not loaded and the buttons are not knowing what has to be done. Because of the SCRIPT not getting loaded, the buttons are not functioned.

    I have used Firebug in Mozilla and have identified this.

    Can i have your take on this.?

    Reply
    1. GodLikeMouse Post author

      Make sure that you do not have your JavaScript (external script js files) being loaded by AJAX. Make sure they are loaded first by the page themselves, even the Facebook connect needs be be loaded normally by the page. Also, ensure that you are loading the JavaScript files in order.

      Reply
  8. Nithin

    Hi GodLikeMouse,

    We have added the FB.XFBML.Parse() function after success :function(data). But by adding this only the buttons are displayed.
    But the functionality of Like and Send button is broken.

    Also this script is not getting loaded on my Ajax Driven Page.

    (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_GB/all.js#xfbml=1&appId=386409724706780″;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    Can you please take a closer look?

    U r help is highly appreciated..!!

    Reply
  9. Nithin

    Hi GodLikeMouse,

    I followed the above conversation.

    Where do i have to call this function FB.XFBML.parse();

    My like button is not working and nothing is getting posted.

    I have a critical delivery. Please..!!

    Reply
    1. GodLikeMouse Post author

      You’ll need to add the parse call to the callback function of your Ajax calls. So any place you have Ajax and you want to have the like button working with the returned content.

      jQuery example:

      $.ajax(url: ”/some/where”,
      success: function (data){
      FB.XFBML.Parse();
      });

      Reply
  10. Dago

    God bless you man this is awesome . Thats what I am looking for
    Thanks for the clear explanation and example

    Reply
  11. Serge

    hi i’m completely new in programming, this is my first js ajax project…where do i need to put this code…here is mine

    (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_GB/all.js#xfbml=1&appId=386409724706780”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    </body

    Reply
  12. Joseph

    Hello, I would like to know if this jquery would work also for the html5 version of hte like button. I am a little confused with the language being used on facebook docs regarding html5 vs xfbml.

    Reply
  13. Govindan

    From previous post,

    The problem is, first time if i click the like button then image and description not shown. but second time if i clicke the like button it is showing. So i need first time onwards, image and description needs to be displayed.

    Thanks

    Reply
  14. Govindan

    Hi,

    I am new to facebook programming. I implemented facebook like button on my site. If i click first time it dosn’t show image and description. Then i refresh the page, and click again the like button at that time image and description are displayed. I dont know what is the problem.
    Please help me soon.

    Sorry for poor commmunication.

    Thanks in advance.

    Reply
  15. Edwin

    You’re my man, let me buy you a drink or 20 🙂
    I spent hours and hours to find a solution for that, and one additional line did the trick.
    Thanks very much!!!

    Reply
  16. alex

    Wow dude, I think you are the greatest person this world has ever seen. I have been trying to figure out why this keeps happening and trying to figure out a solution with no luck. I added that little piece of jquery code and now my problem is solved. I hope you win the lottery.

    Thanks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *