Tuesday, March 06, 2012
Facebook Open Graph is used to customize the stories that people will generate when they use your app. This defines how "actions and objects" will form the application stories's basis on Timelines and News Feed. Follow the instructions below to create your own Facebook Open Graph.

1. Go to http:// developers.faceb ook.com

2. Click on the link "Get Started".

3. Click on the link "App" on top right side, and then click Create New App.

4. After, you'll be asked to define one Action and one Object for your application. Just fill in the first column with a word you think it describes an action (Action = You're making something. Or just simply fill in it: Make.), and the second column with a word you think it describes an object (Object = Result of something that you made. Or just simply fill in it: Something). And then click "Get Started

5. In the next step, you'll be asked to further define a custom configuration for the action you made in the step 4 above. Just skip this step, click the Save Changes And Next button.

6. The same with step 5 above, next you'll be asked to further define a custom configuration, but now for the object you made in the step 4. Just skip this step, click the Save Changes And Next button.

7. After you skip the two step above, you'll be asked to define an aggregation for your application. Follow the instruction below to complete the form (you can still change the parameters later).

*Data to Display: Just fill it "Activity Facebook".
*Layout Style: Select "List".
*Sort By: Select "Most Recent".
*Aggregation Title: Just fill it "Activity Facebook".
*Caption Lines: Let it blank for now.

Now click the Save and Finish button and you're done to define the custom configuration for your open graph.

Now let's talk about how to connect your application activity with open graph. Let's take the "Comment Plugin" for our example here.

In order to connect your comment plugin with open graph you'll need to add "fb xmlns" property and some lines of meta tags into your template. Put this right after the <html> tag: xmlns:fb='https://www.facebook.com/2008/fbml'

Here is an example:

<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='https://www.facebook.com/2008/fbml'>

And, To get your meta tags go to your open graph dashboard and click the "Get Code" link next to the "Object". Copy and paste the snippet code (meta tags) into your template. Exactly put it after the tag "<head (or could even be "<head>")". Or simply replace that tag (<head) with the snippet code you've just got from your open graph, but make a change a little bit, as on the example below.

<head prefix='og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# "more": http://ogp.me/ns/fb "more" '>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/></b:if>

<meta content='content' property='fb:app_id'/>
<meta content='Example' property='og:type'/>
<meta content='Some Description' property='og:description'/>
<meta content='http://4.bp.blogspot.com/-fCAsAADGdBc/T1IAxUXWTbI/AAAAAAAAAfs/ukvJeorLMXs/s1600/Spiderman.jpg' property='og:image'/>
<meta content='123456789123456' property='fb:admins'/>


You'll grab all those meta tags just from the snippet code given in your open graph dashboard, except the "fb:admins". You may grab your fb:admins from the "Like" meta tag. Try to go the Like Plugin page and check the form provided, all columns are blank except the "fb:id". That's your facebook id that you should put on your meta tag to verify that you're the admin. Scroll up your mouse and pay attention on the "fb:admins" meta on the example, it's clearly telling how to add fb:admins meta tag into your template.

2. Find this code in your template: <body, or could be this: <body>. Copy and paste the code below just beneath it.

To be the lesser arrangement it looks like the below.

<div id='fb-root'/>
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/en_US/all.js&amp;appId=
123456789123456789#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>


Replace the number red colored with your app id.

3. Finally, you're at the last step. Put the code below somewhere in your template.

To be the lesser arrangement the above code looks like the below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' num_posts='5' width='580'/>
</b:if>


For example: if you want your comment plugin to show up below your posts, you can put the code after <data:post.body/>. There must be two code to the above, just put it after the first one, not the second. And, don't forget to replace the lines in red with yours.

5. Klick save and you're done. Now you can even add any plugin as you want, needless to add any other codes except the html code to call the plugin you want to add ("code to call plugin" is code similar to the code in the step 4 above).

To the master code, please don't laugh at my post cuz i'm realy fuckin' good in it.

10 comments:

  1. eh gan
    cara buat emoticon itu muncul dikomentar bagaimna yah???
    sprti ini :jthumb

    ReplyDelete
  2. bro, kenapa harus upload di mediafire, gue ga bisa download nih. :(

    ReplyDelete
  3. nanti aja deh sya upload di tempat laen
    sprti 4shared,ziddu,jumbofiles
    tpi kasih tau cara buat emoticon itu dong

    ReplyDelete
  4. @Download game full ver and full RIP: masalah emoticon gue udah bikinin posting sendiri bro, cari dikategory blogger/blogspot. Menu pilih kategory ada dipojok kanan atas.

    Klo masih ga muncul juga emoticonnya silahkan komen lagi.

    ReplyDelete
  5. gk bsa gan :3
    kurasa thema sya gk cocok

    ReplyDelete
  6. @Download game full ver and full RIP: template lo pake dinamic view ya? Klo ga, kasih aja template lo ke gue. Cukup upload 10 file dihost gue sebagai imbalan, klo berhasil. :D

    ReplyDelete
  7. blog sya yg berthema carzille gan
    tanpa slider
    upload file'a kmna?

    ReplyDelete
  8. @Download game full ver and full RIP: terserah mau upload dimana yg penting kasih gue url yg berextensi, misal: http://www.facebook.com/template.xml. Kirim url ke facebook gue disini

    by the way, tukeran gan. Tuh link agan udah gue pasang. Tapi maaf ga pake "h3". Moga berkenan gan. :)

    ReplyDelete
  9. @John Smith ok ane upload gan
    dan ane juga pasang back link'a juga :)

    ReplyDelete