Internet
How to
Newspapers
Twitter
SEO advice
Categories: Featured, How to, Internet, Latest, Wordpress. Tags:

Open Graph: let people FaceBook “like” your WordPress (or other) website

February 28, 2011 2 Comments

The advantage of a Facebook page for your website is that you can easily update people about new content. But it can be a pain - people can write what they want on your wall, you have to respond etc.

The good news is that you can still send people updates via Facebook without having to have a page - you instead use the Open Graph protocol and a Facebook Social Plugin.

You see that box on the right hand side of the page that says "New: Get blog updates via Facebook"? If you press the like button in that then I get the ability to insert messages in your Facebook news stream - without my also having to run a separate Facebook page. Here's how to do it.

Facebook like and wordpress logos

How to get Facebook to like WordPress

Two types of Facebook like button

The first thing to get your head round is that there are two types of Facebook like button.

With the normal one that you see on many websites, clicking it will share the URL of the page you're in with your friends. I've got one of those buttons up there, under the headline - although I've changed the word on it from "like" to "recommend".

The other type of like button allows you to become a fan of a Facebook page even without visiting it. The fact you've clicked it will be shared with your friends - but you're not sharing a URL, you're liking a Facebook page.

As a website owner, if someone does the former, that's quite good as the visitor's friends may see the link and come and see your site - but you don't get the ability to have an ongoing relationship via the first type of like button. Someone's shared your URL. That's it.

With the second type of like button, anyone who likes your Facebook page will have any updates you create or links you share appear in their news stream.

Using Open Graph to turn your website into a Facebook page

The second type of like button can also be used even if you don't have a Facebook page for your site. You use the Open Graph protocol to effectively turn your website into a Facebook page in Facebook's eyes (don't worry, it doesn't actually turn into one - it's just that Facebook treats it as if it is one).

So here's an example - this is one of the messages that I sent to everyone who had clicked the like button over there on the right.

Example facebook status update

The message I sent people

You can read about the Open Graph protocol here. There are two steps you need to follow. The instructions below are for WordPress but very similar ones will work for any other type of website.

Add Open Graph meta data

First you need to say in the opening HTML tag that you're doing this. You can copy the code from the Facebook page. But after your opening HTML tag, add: xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" - you can view the source of this page to see I've done that.

Then you need to assign meta data to the page on your website that you're going to set up as the pretend Facebook page. I do this on my homepage - you can choose another page if you want (EG a page with special offers or a particular category page).

The meta data is explained here. But here's what I've added for my blog:

<?php
if (is_home() ) {

echo '
<meta property="og:image" content="http://www.malcolmcoles.co.uk/blog/malcolm-coles-facebook.png"/>
<meta property="og:site_name" content="Malcolm Coles's blog"/>
<meta property="fb:admins" content="175996222437753,522100824"/>
<meta property="og:title" content="Malcolm Coles: SEO, Twitter and UK newspapers"/>
<meta property="og:type" content="blog"/>
<meta property="og:url" content="http://www.malcolmcoles.co.uk/blog/"/>
<meta property="og:description" content="The blog of Malcolm Coles. It's about SEO, Twitter, the internet and stuff like that. You'll like it."/>';
} else{} ?>

This is a PHP if statement which makes sure this code appears only on my home page and is pasted into my header.php file in the head area (if you're not using WordPress, you might need something different).

The meta data should be fairly self-explanatory. Again, it's explained here if you can't work something out. The one thing you might have problems with is the admins line - you need to insert Facebook user ID of your personal account. (To find your ID, look at your personal Facebook profile picture or album - the URL should contain it).

Add a social plugin

That's given Facebook the information it needs to understand your website. The next step is to add the relevant Facebook social plugin onto your site - that's the box over on the right that people can click to like your site.

You can get the code you need from the Like Box social plugin page. You fill out the box on the left, and then it shows you what the box will look like - you then hit get code.

Like Box code generator

The code generator for the Facebook like box

You'll be shown two sorts of codes: iframe or javascript. I've used the javascript version here, which means you also need to include Facebook's javascript SDK code on your page.

If you're also using the other type of Facebook like button (the one that lets people share the URL) I'd recommend using the javascript, not iframe, version of both as users can add a comment when sharing a page if you do.

Either way, add the code to your website. So in my sidebar.php file you'll find this code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.malcolmcoles.co.uk/blog/" width="295" show_faces="true" stream="false" header="true"></fb:like-box>

I've also added a heading that says "New: get blog updates via facebook". You don't have to get a box that big - in fact, you can just use the standard tiny "like" button. I imagine users find this quite confusing (as they can't tell if the button shares the URL or likes the site) - so always add an explanation of what the button does (or else just trick them).

Adding the javascript SDK

If you are using the javascript version, you need to paste this code at the very end of your pages - in your footer.php file if you're using wordpress:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

You might be thinking "you clown, you've forgotten to put your app id where it says that." It doesn't matter - I don't have an app id and it works fine.

It's all working - how do I use it?

Go to Facebook, click Account in the top right and choose "Use Facebook as Page".

You will see a message at the top that says:

Administer Your Page.

This is the administration interface for your webpage at http://www.malcolmcoles.co.uk/blog/. You can see Insights and publish to the users that have liked your webpage. Only the administrators of the webpage can view this interface, other users are sent to the webpage.

And this is the key thing - you're the only person who sees what you can see. No one else see the Facebook page for your blog so there's nothing you need to manage and there's no wall where they can leave messages.

But if you click, say, link and share a link to a new piece of content on your blog, that update will appear in the news stream of anyone who has liked your site via this method - just as if you really did have a Facebook page and they had liked that.

One caveat

This method gives you a great way to communicate with people who like your website, without having the overhead of also managing a Facebook page.

However, you can't guarantee that people will see your status updates. There are two settings on Facebook news feeds - "top news" and "most recent". If they're looking at the latter, they will see your update if logged in when you send it (or if they look back that far). Whether they see it with the former view depends on how much Facebook thinks they want to see it - which depends on how many of their friends have also liked it, how many times they've liked previous updates etc. So there's no guarantees.

Insights and statistics

Once this is all up and running, you can also see data about who is doing what to your site. Here are the graphs for my Facebook insights.

Facebook insights graphs

Facebook insights graphs: you can click them for more detail

They look a bit crap as I haven't blogged for a while and also I only set this all up a few weeks ago.

If you liked this, maybe you'll also like the way I've shown the number of Twitter followers I've got using some PHP and wordpress.

And if you've got any questions, let me know below.

You might also like
  1. Can you use schema.org with Facebook Open Graph?
  2. Facebook’s new comment system doesn’t work when you’re logged in as your page
  3. Adding page numbers: How to avoid duplicate titles and meta descriptions in pages 2 and higher of WordPress category and tag pages
  4. Ignore WordPress’s SEO advice
  5. Avoid duplicate content with paged comments in wordpress

Share this post

Follow me on Facebook or Twitter

2 Comments »

  • Gerry White says:

    Got to say, this is a great post ... As I walked out the office I mumbled to a colleague that I thought I was ontop of Facebook Like vs Facebook Share, Groups (now gone) pages, personal profiles .... But I didn't know a website or page could be turned into a virtual facebook page!!!

    Problem is now not just of which of the many platforms etc.. to use but how do you actually use "one" effectively.

    The only other problem of course is that FB can use the JS implementation to track visits to third party websites (they might not be, but they could) and so how many sites should consider the privacy implications that their site visitors would be rightly or wrongly overly stressed about!

  • [...] Coles had a good suggestion for the second issue: set up my blog as a Facebook Page then do professional commenting as the Page and personal commenting via my personal [...]

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.