I am trying to implement a like button on my web page. The header section contains the relevant meta tags:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#" >
<head>
<title>
What have you for the world today - Blogs by Antezen
</title>
<link rel="shortcut icon" href="/images/favicon3.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon3.ico" type="image/x-icon">
<meta name="description" content="It was a sunny afternoon..<br>">
<meta property="og:site_name" content="Antezen" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Beginning of a new chapter" />
<meta property="og:url" content="http://antezen.com/blogs/1" />
<link rel="canonical" href="http://antezen.com/blogs/1">
<meta property="og:image" content="http://www.antezen.com/system/pics/645/medium/photo.jpg?1337587175" />
<link rel="image_src" href="http://www.antezen.com/system/pics/645/medium/photo.jpg?1337587175">
<meta property="og:description" content="It was a sunny afternoon..<br>" />
<meta property="fb:admins" content="FB_ADMIN_ID" />
<meta property="fb:app_id" content="FB_APP_ID" />
Inside the body tag, i have specified the the javascript sdk:
<body class='app_cont_body'>
<!-- fb JSDK -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
if(typeof FB != 'undefined') {
FB.init({
appId : 'FB_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
}
}
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=FB_APP_ID";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
....
And a fb like button with xfbml code like this:
<div id='fblike' class='inline'>
<fb:like href="http://antezen.com/blogs/1" send="false" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>
</div>
But on checking the url in facebook debugger tool https://developers.facebook.com/tools/debug, it shows that facebook is unable to scrape og:type tags like og:image, og:title etc. On checking 'See exactly what our scraper sees for your URL', i get the following output:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body>
<p>$(document).ready(function(){
$(".cast_container").html("\n</p>....
...
...
</body>
</html>
I am not getting why isn't facebook scraping out meta tags from the page. Please help me out.
I use
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og:http://ogp.me/ns# anotherfeed:http://ogp.me/ns/apps/anotherfeed#">
anotherfeed is the name space for my app - eg; http://apps.facebook.com/anotherfeed/?ref=FSOF the head prefix is for open graph, hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With