I have a news section on my site that is ajax driven. I'm trying to implement the xfbml version of the Facebook Like button and have run into a few problems.
When clicking on 'Like' on a news item for the first time, none of the og tags are pulled in, so all you get is a comments box. Strangly, if I then view another news item and go back to the first news item, the like button works correctly and all og data is pulled correctly. It seems like some sort of caching issue?
I've also had an issue with the floating popup box disappearing after clicking on like, before having chance to enter a comment. Its there for a fraction of a second. If I then unlike the news item and relike it, the floating popup box does eventually stay put, but it can take several attempts.
Here is a sample of the header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en-GB" lang="en-GB">
<head>
<meta property="og:title" content="She's in fashion"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.kirkleescollege.ac.uk/news/1103"/>
<meta property="og:image" content="http://www.kirkleescollege.ac.uk/photo/news/1103/full"/>
<meta property="og:site_name" content="Kirklees College"/>
<meta property="og:description" content="This year Rebekah Crowther will take the first steps towards her dream career in fashion retail thanks to a new course at Kirklees College."/>
<title>Kirklees College News - She's in fashion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
And this is the body code, currently on the testing server, not the live server.
<div id="fb-root"></div>
<script>
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){
}});
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#appId=APPID&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<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/en_US/all.js#appId=APPID&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.kirkleescollege.ac.uk/news/<?php echo $id; ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
A coulpe of things to mention about the above code, the live code has my app ID set but I wasn't sure if this was sensitive information so I've removed it here. I'm assuming both app id's should be the same?
The FB.XFBML.parse() code came from Stackoverflow. It allows the like button to load on an ajax-driven page.
What I can't understand is why its intermittent. You would think If something with wrong it would still be consistent.
Hope someone can help as this is driving me crazy!
you have to add the appid in the code
check the line
js.src = "//connect.facebook.net/en_US/all.js#appId=APPID&xfbml=1";
instead of APPID you hv to paste your own appid