About Author: Himanshu Sharma
How to use Open Graph ProtocolOpen graph protocol is a protocol (set of rules) which is used to integrate any web page into the social graph (like facebook can be your social graph or social circle). Once the web page is integrated it behaves like the object of the social graph (facebook) i.e. it has same functionality as a facebook page. To turn your web page into a graph object, you need to use open graph protocol meta tags and the ‘like’ button. Through ‘like’ button, facebook users can share your web page contents with other facebook users.
This is how the like button will look on your web page if you are already logged into the facebook
If a facebook user (who ‘liked’ you content) happens to be your friend and you are already logged into the facebook, then the like button will display the name and photo of that friend.
If you are logged out of facebook, then the ‘like’ button will look like this:
To use Open Graph protocol, follow the following steps
Step1: Add following tag just before the <head> tag on your web page:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”>
Step2: Add following open graph protocol meta tags in the head section (<head>…</head>) of your web page:
<meta property=”og:title” content=”Enter title of your web page here“/>
<meta property=”og:type” content=”article”/>
<meta property=”og:url” content=”Enter the URL of your web page here“/>
<meta property=”og:image” content=”Enter image URL which represent your object here“/>
<meta property=”fb:admins” content=”Enter your facebook user ID here“/>
<meta property=”og:site_name” content=”Enter the name of your website here“/>
<meta property=”og:description” content=”Enter one or two sentence description of your web page here“/>
Note: og:type means type of the object. Since our object is a piece of content (article, blog post, video, photo etc) i have used ‘article’ as object type. You can see the complete list of supported object types here.
Step3: Once you have added your special meta tags, you can now add the code of ‘like’ button into the body section (<body>..</body>) of your web page. You can get the ‘like’ button code from here. You can either add the Iframe code or XFBML (Extensible facebook markup language) code to add ‘like’ button to your web page. I add the IFRAME code which looks like this:
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eventeducation.com%2Ftest.php&layout=standard&
show_faces=true&width=450&action=like&font=arial&
colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>
That’s it. You have successfully used the open graph protocol 
Note: You can use open graph protocol in your wordpress blog by installing the following plug-in: Open Graph Protocol Tools
Here is an an example of a web page which uses the open graph protocol
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<title>Himanshu’s Open Graph Protocol</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=WINDOWS-1252″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link rel=”stylesheet” type=”text/css” href=”event-education.css” />
<meta name=”verify-v1″ content=”so4y/3aLT7/7bUUB9f6iVXN0tv8upRwaccek7JKB1gs=” >
<meta property=”og:title” content=”Himanshu’s Open Graph Protocol”/>
<meta property=”og:type” content=”article”/>
<meta property=”og:url” content=”http://www.eventeducation.com/test.php”/>
<meta property=”og:image” content=”http://www.eventeducation.com/images/982336_wedding_dayandouan_th.jpg”/>
<meta property=”fb:admins” content=”himanshu160″/>
<meta property=”og:site_name” content=”Event Education”/>
<meta property=”og:description” content=”Event Education provides free courses on event planning and management to event professionals worldwide.”/>
</head>
<body>
.
.
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eventeducation.com%2Ftest.php&layout=standard&
amp;show_faces=true&width=450&action=like&font=arial
&colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>
.
.
</body>
</html>
Additional Reading
If you like this post then you should subscribe to my blog and follow me on twitter.
If you are a SEO consultant or an agency and are looking for affordable Linkbait Development and Content Development services then we can be the right choice. Contact us
Related Posts
Open graph protocol is a protocol (set of rules) which is used to integrate any web page into the social graph (like facebook can be your social graph or social circle). Once the web page is integrated it behaves like the object of the social graph (facebook) i.e. it has same functionality as a facebook page. To turn your web page into a graph object, you need to use open graph protocol meta tags and the ‘like’ button. Through ‘like’ button, facebook users can share your web page contents with other facebook users.
This is how the like button will look on your web page if you are already logged into the facebook
If a facebook user (who ‘liked’ you content) happens to be your friend and you are already logged into the facebook, then the like button will display the name and photo of that friend.
If you are logged out of facebook, then the ‘like’ button will look like this:
To use Open Graph protocol, follow the following steps
Step1: Add following tag just before the <head> tag on your web page:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”>
Step2: Add following open graph protocol meta tags in the head section (<head>…</head>) of your web page:
<meta property=”og:title” content=”Enter title of your web page here“/>
<meta property=”og:type” content=”article”/>
<meta property=”og:url” content=”Enter the URL of your web page here“/>
<meta property=”og:image” content=”Enter image URL which represent your object here“/>
<meta property=”fb:admins” content=”Enter your facebook user ID here“/>
<meta property=”og:site_name” content=”Enter the name of your website here“/>
<meta property=”og:description” content=”Enter one or two sentence description of your web page here“/>
Note: og:type means type of the object. Since our object is a piece of content (article, blog post, video, photo etc) i have used ‘article’ as object type. You can see the complete list of supported object types here.
Step3: Once you have added your special meta tags, you can now add the code of ‘like’ button into the body section (<body>..</body>) of your web page. You can get the ‘like’ button code from here. You can either add the Iframe code or XFBML (Extensible facebook markup language) code to add ‘like’ button to your web page. I add the IFRAME code which looks like this:
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eventeducation.com%2Ftest.php&layout=standard&
show_faces=true&width=450&action=like&font=arial&
colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>
That’s it. You have successfully used the open graph protocol
Note: You can use open graph protocol in your wordpress blog by installing the following plug-in: Open Graph Protocol Tools
Here is an an example of a web page which uses the open graph protocol
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<title>Himanshu’s Open Graph Protocol</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=WINDOWS-1252″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link rel=”stylesheet” type=”text/css” href=”event-education.css” />
<meta name=”verify-v1″ content=”so4y/3aLT7/7bUUB9f6iVXN0tv8upRwaccek7JKB1gs=” >
<meta property=”og:title” content=”Himanshu’s Open Graph Protocol”/>
<meta property=”og:type” content=”article”/>
<meta property=”og:url” content=”http://www.eventeducation.com/test.php”/>
<meta property=”og:image” content=”http://www.eventeducation.com/images/982336_wedding_dayandouan_th.jpg”/>
<meta property=”fb:admins” content=”himanshu160″/>
<meta property=”og:site_name” content=”Event Education”/>
<meta property=”og:description” content=”Event Education provides free courses on event planning and management to event professionals worldwide.”/>
</head>
<body>
.
.
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.eventeducation.com%2Ftest.php&layout=standard&
amp;show_faces=true&width=450&action=like&font=arial
&colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>
.
.
</body>
</html>
Additional Reading
If you like this post then you should subscribe to my blog and follow me on twitter.
If you are a SEO consultant or an agency and are looking for affordable Linkbait Development and Content Development services then we can be the right choice. Contact us
Related Posts
ecellent post. Its midnight here and just when i was about to switch off my net, i got this new post notification. i will work on it tomorrow. take rest buddy. you write a lot these days
sorry for disturbing your sleep
I hope you like your new job.
heard a lot about this and the ‘like’ button but never knew it is a protocol and its implementation is not that easy.
great summary of OGP. thanks
nice post. you should add a real like button to your post to make it more effective
good points there. but do we really need a ‘like’ button. addthis.com button can share contents with facebook.
Very nice write up on OGP. I would like to share a document which can be a great addition to this post:
http://www.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions
Thanks Simon