Offline
Online
Viewers

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:

[codesyntax lang=”javascript”]

FB.XFBML.parse();

[/codesyntax]

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

[codesyntax lang=”javascript”]

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

[/codesyntax]

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.

60 Comments

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

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

  2. 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
    });

  3. 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?

  4. 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!

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

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

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

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

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

  8. 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..!!

  9. 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..!!

    1. 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();
      });

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

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

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

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

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

  15. 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!!!

  16. 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!

Leave a Reply to Julian Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliates