Introduction
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.
What’s Going On?
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.
Solution
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.
60 Comments
Luis · April 5, 2011 at 4:38 pm
This is what I’ve looking for a long time. Thanks man! 🙂
GodLikeMouse · April 5, 2011 at 5:02 pm
You’re very welcome, glad I could help.
alex · July 23, 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!
GodLikeMouse · July 25, 2011 at 4:34 pm
Wow, thanks. Glad to be of help.
Axel · August 2, 2011 at 1:42 pm
Thanks a lot!
You saved my time…
Julian · August 3, 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!
GodLikeMouse · August 3, 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/
Pac · August 9, 2011 at 4:46 am
I have following code, which does not seem to be getting parsed using the method you gave:
GodLikeMouse · August 9, 2011 at 4:35 pm
Looks like the code didn’t quite make it, could you try again?
Tyler Collier · September 21, 2011 at 11:03 pm
Thank you so much! I was hoping it’d be something this simple!
Nocturnal · October 9, 2011 at 5:26 am
A thousands thanks
entrop · November 4, 2011 at 11:18 am
thanks, youre awesome!
Edwin · November 8, 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!!!
Trevor · November 22, 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.
Hiten · November 28, 2011 at 10:17 am
This works great…………..
Thanks………
Devin · December 2, 2011 at 12:59 am
I’m having trouble getting this to work in IE7/8… anyone else?
GodLikeMouse · December 2, 2011 at 1:02 am
What are you seeing exactly? Errors, undefined, etc?
the one · January 3, 2012 at 4:19 pm
Great mean you! You are genius.
glenn · January 13, 2012 at 8:40 pm
saved my TAIL, man!!!
now i have to find the same thing for Twitter!!!
thanks
Govindan · January 18, 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.
Govindan · January 18, 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
GodLikeMouse · January 18, 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.
Joseph · January 29, 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.
GodLikeMouse · January 30, 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.
varun · February 26, 2012 at 7:14 pm
save hours of work…. thkx a ton..:P worked on my joomla installation
jhonnybmx · March 16, 2012 at 4:24 pm
GRACIAS TE AMOOOOOOOOOOOOOOOOOOOOOOO
chali · March 21, 2012 at 1:49 pm
I love you
Serge · April 3, 2012 at 2:41 pm
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
GodLikeMouse · April 3, 2012 at 4:27 pm
Hi Serge, You’ll need to add script elements around the javascript block. For example:
GodLikeMouse · April 3, 2012 at 4:27 pm
<script type=”text/javascript”>
…your code goes here…
</script>
Dago · June 28, 2012 at 2:13 am
God bless you man this is awesome . Thats what I am looking for
Thanks for the clear explanation and example
GodLikeMouse · June 28, 2012 at 3:57 am
No problem, glad it helped.
Nithin · August 14, 2012 at 10:01 am
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..!!
GodLikeMouse · August 14, 2012 at 3:43 pm
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();
});
Nithin · August 17, 2012 at 3:31 pm
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..!!
GodLikeMouse · August 17, 2012 at 9:30 pm
Ok, the connect script needs to be loaded first and only once. Then the buttons should start working.
Nithin · August 21, 2012 at 12:54 pm
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.?
GodLikeMouse · August 27, 2012 at 4:27 pm
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.
kalpana · September 15, 2012 at 9:47 am
awsome post ,save my time thnx
Stefano · October 21, 2012 at 10:07 am
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.
GodLikeMouse · October 23, 2012 at 5:48 pm
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.
Stefano · October 24, 2012 at 2:54 pm
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
GodLikeMouse · October 24, 2012 at 3:33 pm
Awesome, glad you got it working.
Mark O'Brien · December 7, 2012 at 4:11 am
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!
GodLikeMouse · December 7, 2012 at 4:30 am
You’re very welcome.
ridhima gupta · December 15, 2012 at 11:06 am
Thanks a ton!! i wasted one man day for this !! saved me frmw asting anotha!!!
Sierra101 · March 10, 2013 at 5:18 pm
Thanks mate! This saved me a lot of time!!
GodLikeMouse · March 11, 2013 at 7:03 am
You’re welcome, thanks.
ash · May 9, 2013 at 10:01 am
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:
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); });But if I put it anywhere within the AjaxComplete it works but makes the facebook links go crazy.
Any ideas?
GodLikeMouse · May 25, 2013 at 3:44 am
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
});
Guillaume · September 18, 2013 at 6:17 am
You just made my day !
Thank you 🙂
godlikemouse · September 18, 2013 at 7:38 am
Glad it helped 🙂
Guillaume · September 18, 2013 at 6:25 am
Whoohooo, same trick for Twitter, just add this in the try/catch block :
twttr.widgets.load()
Elioz · May 1, 2014 at 11:56 pm
Thank you very much, save my website 🙂
Sanc · October 7, 2014 at 9:28 am
Just thanks! 🙂
godlikemouse · October 7, 2014 at 11:37 am
You’re very welcome.
Azim · June 22, 2015 at 11:01 pm
Thanks a lot!
But like button take time to appear.
Once again Thank a lot.
james · November 30, 2015 at 1:06 pm
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.
godlikemouse · November 30, 2015 at 5:03 pm
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.
Waqas Mushtaq · September 21, 2017 at 11:26 pm
It did help indeed. Thank you