Learn More

Saturday, August 11, 2012

How To Create Object Page of Facebook Open Graph For Blogger

open graph dashboard
To be able to use the actions, you need prepare early, which is make the Object Page. This preparation includes the repair of head tag and the addition of meta tags of the open graph. Suppose the action-object pair is a cook-recipe. See the example code below, how to create Object Page

<html xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head prefix="og:http://ogp.me/ns# [YOUR_APP_NAMESPACE]:http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#">
  <title>OG Tutorial App</title>
  <meta property="fb:app_id" content="[YOUR_APP_ID]" /> 
  <meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" /> 
  <meta property="og:title" content="Stuffed Cookies" /> 
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" /> 
  <meta property="og:description" content="The Turducken of Cookies" /> 
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

To know about YOUR_APP_NAMESPACE, you can read the article on How To Make Good Facebook Application. The above methods apply to blog-based CMS, like WordPress, Joomla, Drupal. The problem is, for users of blogger, you can not specify meta tag content for og: image. Fortunately, the engine of facebook can generate meta tag of the object page. So, my advice for blogger users, you just simply do the following

<html xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head prefix="og:http://ogp.me/ns# [YOUR_APP_NAMESPACE]:http://ogp.me/ns/apps/[YOUR_APP_NAMESPACE]#">
  <title>OG Tutorial App</title>
  <meta property="fb:app_id" content="[YOUR_APP_ID]" /> 
  <meta property="og:type" content="[YOUR_APP_NAMESPACE]:recipe" /> 

Meanwhile, if you use the built-in action-object, such as read-article, then for blog-based CMS users can create Object Page like the following

<html xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta property="fb:app_id" content="Your-App-ID" /> 
  <meta property="og:type"   content="article" /> 
  <meta property="og:url"    content="Put your own URL to the object here" /> 
  <meta property="og:title"  content="Sample Article" /> 
  <meta property="og:image"  content="Sample Image" /> 

Meanwhile, for blogger user, you can create Object Page like below

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta property="fb:app_id" content="Your-App-ID" /> 
  <meta property="og:type"   content="article" /> 
</b:if>

If you see the code above, meta tag of Object Page, only active on Post Page. Why? Because you are using read an article. Basically, Facebook has provided a snippet code for the Object Page that you need to put on your blog. These codes can be obtained directly through the Open Graph tab of application dashboard. Consider the images below to find out the location of snippet code for the Object Page.

open graph dashboard
See carefully this image. On the right of Object Types you will see Get Code and on the left is Article. Click Get Code, after that you will see snippet code for Object Page. Copy the codes, and put on your blog, like what we have explained above.

  1. this is userfrindly post about How To Create A Page On Facebook and people really benefit for this.

    ReplyDelete