Menu
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
315
Open Graph meta tags consist of code snippets that enable your web page to become a rich object. This will help in controlling the display of your web page when it is shared on social media platforms like Facebook or Twitter.
All you need to do is go to the Debugger website, type in the content's link you want to analyze, and press “Debug.” If certain og tags are missing, the Debugger will show them as warnings. After warnings, you'll see all information according to the last time; Facebook “scraped” your website or content page.
Open Graph MarkupMost content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. For your website to be shared correctly by our crawler, your server must also use the gzip and deflate encodings.
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
107
You need a space after the final set of quote marks
<meta property="og:url" content="http://www.mywebaddress.com"/> Should be..likes this one
<meta property="og:url" content="http://www.mywebaddress.com" /> 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
