Full View >>

AJAX And Facebook Like Buttons

javascript-icon

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.

Full View >>

24 Responses to “AJAX And Facebook Like Buttons”

  1. Luis Says:
    April 5th, 2011 at 4:38 pm

    This is what I’ve looking for a long time. Thanks man! :)

  2. GodLikeMouse Says:
    April 5th, 2011 at 5:02 pm

    You’re very welcome, glad I could help.

  3. alex Says:
    July 23rd, 2011 at 4:53 am

    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!

  4. GodLikeMouse Says:
    July 25th, 2011 at 4:34 pm

    Wow, thanks. Glad to be of help.

  5. Axel Says:
    August 2nd, 2011 at 1:42 pm

    Thanks a lot!
    You saved my time…

  6. Julian Says:
    August 3rd, 2011 at 10:41 am

    Thank you!! just what I need for facebook, now I need for twiter box count button and for google plus!

  7. GodLikeMouse Says:
    August 3rd, 2011 at 5:50 pm

    Awesome. Here’s the twitter box count:

    http://twitter.com/about/resources/tweetbutton

    And google plus button:

    http://www.google.com/webmasters/+1/button/

  8. Pac Says:
    August 9th, 2011 at 4:46 am

    I have following code, which does not seem to be getting parsed using the method you gave:

  9. GodLikeMouse Says:
    August 9th, 2011 at 4:35 pm

    Looks like the code didn’t quite make it, could you try again?

  10. Tyler Collier Says:
    September 21st, 2011 at 11:03 pm

    Thank you so much! I was hoping it’d be something this simple!

  11. Nocturnal Says:
    October 9th, 2011 at 5:26 am

    A thousands thanks

  12. entrop Says:
    November 4th, 2011 at 11:18 am

    thanks, youre awesome!

  13. Edwin Says:
    November 8th, 2011 at 11:54 am

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

  14. Trevor Says:
    November 22nd, 2011 at 11:46 pm

    Thanks so much for posting this!! I just switched from the iframe version to HTML5 and it was killing me.

  15. Hiten Says:
    November 28th, 2011 at 10:17 am

    This works great…………..
    Thanks………

  16. Devin Says:
    December 2nd, 2011 at 12:59 am

    I’m having trouble getting this to work in IE7/8… anyone else?

  17. GodLikeMouse Says:
    December 2nd, 2011 at 1:02 am

    What are you seeing exactly? Errors, undefined, etc?

  18. the one Says:
    January 3rd, 2012 at 4:19 pm

    Great mean you! You are genius.

  19. glenn Says:
    January 13th, 2012 at 8:40 pm

    saved my TAIL, man!!!

    now i have to find the same thing for Twitter!!!

    thanks

  20. Govindan Says:
    January 18th, 2012 at 5:02 am

    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.

  21. Govindan Says:
    January 18th, 2012 at 5:53 am

    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

  22. GodLikeMouse Says:
    January 18th, 2012 at 6:25 pm

    Hi Govindan, can you post the code you are using to construct the like button? I need to find out what approach you are using before I can offer any help.

  23. Joseph Says:
    January 29th, 2012 at 6:50 am

    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.

  24. GodLikeMouse Says:
    January 30th, 2012 at 5:17 am

    Hi Joseph, it should. I would use the html5 version. Please let me know if this doesn’t work for some reason and we’ll figure out why.

Leave a Reply