Facebook and Open Graph

So you have a nice "Like" button on your website, but does that do what you think it does?

Well time certainly flies! With October almost over, the many blog ideas I had in my head at the start are still there, in my head...

So why not kick back into things with a bit of Facebook development and in particular, Like buttons.

Many people and businesses have varying opinions of Facebook, but the reality is that if your own website content is relevant and useful (sometimes referred to as Remarkable Content), people will WANT to share it... And what better way to share it than by opening the roads to 600 million people.

If you are still not convinced, consider this scenario:

You have a product, or a blog post, or something free to give away, that you think people will find useful, relevant, and will want to share with the people they know.

So you add a Facebook Like button to your website page. A facebook user comes across your website page either through a search engine, or you may have advertised the URL somewhere, or emailed all your friends. For arguments sake, lets say that user has 200 friends on facebook. When they click your one little Like button, 200 people see the link to your page/product/post or whatever it is you are sharing. \

Of those 200 people, 10 might also find it interesting and click through to have a look. Now lets assume those 10 people all click your like button, and that each of those 10 people have 200 of their own contacts on facebook.

All of a sudden, with 2 clicks, your page has been visible to 2200 people and the relevance of what you have to offer will dictate how quickly the news is spread and how many 'views' convert to a user visiting your website... and so the 'viral' process of facebook continues.

That all sounds amazing, but do you know what you are actually sharing?


When a user clicks on a Like button, there are 3 things (probably more but 3 that I want to discuss) that get extracted from your website to be used in Facebook. The page Title, URL and an Image. 

Generally the Title and URL are fine (though you should make sure your meta page title is a good one...), but the image is simply pulled from an image on your page and is not always the right one.

I once had a Like button set up where when you pressed it, the title and link were fine, but the image was actually the logo for a supplier who had their logo on the page as a sponsor!

Luckily, taking control is easy to do. Facebook uses the Open Graph protocol, which "enables any web page to become a rich object in a social graph".

Adding the following to your website's <head> section will ensure that the right information is shared by facebook every time...

<meta property="og:title" content="Page Title Here" />
<meta property="og:url" content="https://www.url-goes-here.com" />
<meta property="og:image" content="https://www.yourwebsite.com/images/logo.gif" />

And just to make sure you are sharing what you think you are sharing, there is an 'Object Debugger' which allows you to put in the URL and it will show you what it pulls out: https://developers.facebook.com/tools/debug/

Doesn't get much easier than that, but it is definitely worth considering whenever you add a Facebook Like button to a website.