I'm trying to implement Facebook's OpenGRaph protocol on my product pages.
On each page i have this above the head section:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Then within the head section i have:
<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="[email protected]"/>
<meta property="og:description" content="Description of my product."/>
I then have a 'like' button with this code:
<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#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://thispagesurl" data-send="true" data-width="350" data-show-faces="false"></div>
To my eye, everything seems to replicate what can be found on the Facebook Developers page but when i 'like', Facebook is seemingly only picking up on the page title and general info.
I have tried to 'debug' the page using their Object debugger, and i get these warnings:
Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
As far as i can tell, i have followed Facebook's instructions to the letter, but i have no joy. Can anyone point out if i'm doing anything wrong?
Thanks in advance, Dan
Are those tags on 'http://www.mywebaddress.com'?
Bear in mind the linter will follow the og:url tag as this tag should point to the canonical URL of the piece of content - so if you have a page, e.g. 'http://mywebaddress.com/article1' with an og:url
tag pointing to 'http://mywebaddress.com', Facebook will go there and read the tags there also.
Failing that, the most common reason i've seen for seemingly correct tags not being detected by the linter is user-agent detection returning different content to Facebook's crawler than the content you're seeing when you manually check