Facebook Open Graph (Update)
Alright!! Here it is, guys. after several days, now I know how to implemented Facebook Open Graph on my blog. First of all, my blog engine is Blogger, so I think this not gonna work on another blog engine like Wordpress. The implementation is very, very, very simple. It was just adding some line on my blog code and taaddaaa!!! I have facebook Likes button on my blog.
Ok, Here we go :
- First, open your blogger panel and choose edit layout, so you can take your blog layout code.
- Add open graph and facebook namespace at the <html> tag as a xmlns, so it would be look a like :
1: <html expr:dir='data:blog.languageDirection'
2: xmlns='http://www.w3.org/1999/xhtml'
3: xmlns:b='http://www.google.com/2005/gml/b'
4: xmlns:data='http://www.google.com/2005/gml/data'
5: xmlns:expr='http://www.google.com/2005/gml/expr'
6: xmlns:og="http://opengraphprotocol.org/schema/"
7: xmlns:fb="http://www.facebook.com/2008/fbml">
- Then put this code on your head part :
Line 1, indicate that the loaded page was an item or a single blog post,1: <b:if cond='data:blog.pageType == "item"'>
2: <meta property='og:title' expr:content='data:blog.pageName'/>
3: <meta property='og:url' expr:content='data:blog.url'/>
4: <meta property='og:type' content='blog'/>
5: <meta property='og:site_name' content='Zouota Blog'/>
6: <meta property='og:image' content='http://www.freeimagehosting.net/uploads/37eeae1a93.jpg'/>
7: <meta property='fb:admins' content='zouota'/>
8: </b:if>
Line 2, og:title indicate the title of your blog post,
Line 3, og:url indicate you blog post’s url,
Line 4, og:type indicate it’s a blog.
Line 5, og:site_name indicate your Blog Name when it posted on facebook,
Line 6, og:image indicate your Icon for your blogpost when it posted on facebook,
Line 7, og:admins, here’s the important thing, indicating a facebook ID who will administering your pages (blog posts).
The complete reference about this, you can find it here! - At the beginning of <body> part I load facebook Java Scritpt SDK
1: <script>
2: window.fbAsyncInit = function() {
3: FB.init({appId: "<data:blog.url/>", status: true, cookie: true,4: xfbml: true});
5: };
6: (function() {
7: var e = document.createElement('script'); e.async = true;
8: e.src = document.location.protocol +
9: '//connect.facebook.net/en_US/all.js';
10: document.getElementById('fb-root').appendChild(e);
11: }());
12: </script>
- Everything are set. The last thing I need to do is adding facebook “Likes” element. well where you put it, it depends on your blog design.
1: <div class='endpost'/>
2: <b:if cond='data:blog.pageType == "item"'>
3: <fb:like width="450" height="20"/>
4: </b:if>
5: </div>
There you are! when I open one of my blog post :
and when I login with my facebook account, it becomes look like :
when I click Admin Page, it’s redirecting me to the app.Admin page :
So guys, that’s what I do to add facebook Open graph on my blog post page, actually there are severl other thing I need todo to complete the update on facebook, like it said here!
If there's something I missed about this, please let me know and If you like my post about facebook Open Graph, there’s no other thing you need to do, except click my facebook “Likes” button :). Happy “Open Graph” all!
0 comments:
Post a Comment
Post a Comment