Publishing Basic Open Graph Actions to your site – Part 2

By Rob McNair

We recommend that before you start on this guide you check out Publishing Basic Open Graph Actions to your site – Part 1 as this is key to you continuing on with this guide.

By the end of this guide anyone that has developer access to your Facebook application will be posting open graph actions to the accounts that have developer roles.

Open Graph Tags

Firstly replace your <head> tag with the following

[code lang=”html”]

[/code]

And if you don’t already have them add in your og property tags. Remember to fill the blanks.

[code lang=”html”]






[/code]

The Connector

So to connect your site with Facebook you’ll need to add a Facebook login button with a few bits in the scope area as a backup to customise the auth.

[code lang=”html”]

[/code]

This code has 2 states, logged in and logged out. If they are not logged into the site they will see the Facebook log in button that will connect the user with the site. When a user is logged in they will see a facepile of other people that have connected with the site.

The JavaScript

We will need to connect your site to Facebook using the JavaScript API. This will all be explained below the code. The top part and bottom parts are pretty standard bits that form part of the JavaScript API.

[code lang=”js” htmlscript=”true” collapse=”true”]


[/code]

The first block of code does 2 things. If a user is logged out this function will monitor when the user clicks the Facebook login button on your site and when they do it will make the call to post the opengraph action to the logged in users page.

[code lang=”js”]
FB.Event.subscribe(‘auth.login’, function(response) {
FB.getLoginStatus(function(response) {
if (response.status==’connected’) {
FB.api(
‘/me/news.reads’,’post’, {
article:’URL OF PAGE’,
access_token:response.authResponse.accessToken
},
function(postResponse) {
console.log(postResponse);
});
}
});
});
[/code]

The second block of code only runs if you are already logged in to Facebook and already connected to the site. As a user hits the page the open graph action is posted to the logged in user’s page.

[code lang=”js”]
FB.Event.subscribe(‘auth.login’, function(response) {
FB.getLoginStatus(function(response) {
if (response.status==’connected’) {
FB.api(
‘/me/news.reads’,’post’, {
article:’URL OF PAGE’,
access_token:response.authResponse.accessToken
},
function(postResponse) {
console.log(postResponse);
});
}
});
});
[/code]

What it all looks like

When you now browse your pages you should be getting notifications. You can see the activity your app is posting to your timeline at a glance by heading to
http://www.facebook.com/me/allactivity?log_filter=app_YOURAPPID

Next Steps

Now as it stands this will only work for the people who have developer, admin or tester roles on your application at developers.facebook.com/apps You have to go through authorisation with Facebook to get this working for the public and there is a lot more to do to make this happen. For a full list of everything you’ll need to do head over to the requirements section of the built-in actions page.

This post was written by Rob McNair

Rob has experience advising some of the worlds most iconic brands. He thrives on helping improving social media knowledge within organisations with the ultimate goal of making theirs brands more social, transparent and accountable.