Sunday, 25 November 2012

Social Marketting your webpage using Facebook Actions

Most websites allows users to perform certain actions, ex: Reading a news article, Listening to music, watching a video etc. A good way of marketting your site would be to publish these actions your user's Facebook wall.

So, for example, when a user named "Karan" watches a video called "Social Marketting Tips" on your webpage that is registered with a Facebook app named "Code Handling", then, a notification goes on his Fb wall saying "Karan watched Social Marketting Tips on CodeHandling"

Download Pack     Live Demo    

How to implement:

In this example I will create a webpage where user can drink a beverage. Here my action type is "drink" and object type is "beverage". Milk.html and Wine.html are two webpages that i consider beverages. A main HTML file will shows all beverages and when user clicks the drink button for a particular beverage, the action is published to his Fb wall.

1. Create a Facebook app

You need to create a Facebook app and specify your website that requires a Facebook login.
Specify your web domain under which your webpages will be hosted.

3. Add actions and objects to Open Graph dashboard in your Fb App

In the Open Graph section of your Facebook app, create a new Object type Beverage and Save it. Then create a new Action Type Drink and set its Connected Object Type to "Beverage". Now our Object type and Action type are created and the Action is linked to the Object.

(Initially the notifications will be visible only to developers and testers of the Fbapp. To make it visible to full Fb crowd, you need to click the Submit link next to your Action type for Facebook review.)

When you click the Get Code link for your Beverage object, you are provided with the Head section containing META tags. This code goes in each HTML file that you consider an object of type Beverage.

So, I created two files, milk.html and wine.html, copy-pasted the code provided and updated the values for the properties "og:url", "og:title", "og:image", "og:description" as required.

Milk.html code -

Wine.html code -

A main HTML file will use Fb.api to post the specific beverage on the user's wall -
FB.api('/me/codehandling:drink','post',{ beverage: 'http://domain/milk.html' } });

where codehandling = namespace of your Fb app
drink = your action name beverage = your object type name http://domain/milk.html is the HTML page having META tags with your data...

JS code of main HTML file -

Dats It!! Now when any user clicks on the drink button, your action will be published on his wall and the activity section having all the info you provided in the META tags.

Thank You!

No comments:

Post a Comment