Thursday, November 11, 2010

CURRENTBLIPS

CURRENTBLIPS

Facebook Open Graph protocol For Blogger

Posted: 11 Nov 2010 12:22 AM PST


Today i was just looking facebook to get some like button i found the Open Graph protocol along with it, at the very first glance it looks impossible to implement on blogger but latter on with some ideas I finally did it ! thanks a lot for my technical team to bug out the problems and fixing it and secondly I am preparing a unbeatable meta tag of description in blogger which will provide exact summary of your post in meta tag description any idea and help will be appreciated.




So lets get started Open Graph protocol of facebook for blogger,

or

How to Open Graph protocol of facebook in blogger

well the idea is quite simple;

In your blog's control panel goto the Design tab and select Edit HTML. Find a tag called "" (ctrl+f if you can't find it quickly) and add this code right after it:


<!-- Facebook open graph -->
<b:if cond='data:blog.pageType == "item"'>
    <meta expr:content='"the post: " + data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
    <meta expr:content='data:blog.pageName + " posts"' property='og:title'/>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.pageTitle' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
    <meta content='the blog' property='og:title'/>
    <meta content='blog' property='og:type'/>
    <meta content='Put your helmet on!' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='http://Your-DESIRE-IMAGE.png' property='og:image'/>
<meta content='123456789' property='fb:admins'/>
<meta expr:content='data:blog.title' property='og:site_name'/>

<!-- Facebook open graph -->



Always Remember to change two things -The one with og:image and the other is fb:admin which are currently bold and italic in the code above with red color.

So for image it can be your website logo that will look good or something that describe your website ! you can host the picture on picasaweb.google.com by google.com and get its link by click the image on picasa and on the side bar you will see link this photo text click on that on the drop down menu of select size, select "orignal" copy the link and past it in the code above.

now  for the fb:admin,  you will be thinking what is your id ! ok so lets start and be careful follow the instruction care fully to find your id, first of all use your address bar of your browser you will generally notice something written like this " id='12345678' or fid='123456' " if you cant figure out, or don't see any thing like this follow this step log in to your facebook account, if you are using firefox click view -> page source, once you open the page source press ctrl+f or manually click edit --> find , in the find box write " profile_id " without inverted comma's, you will generally notice something like this
"view_as_user_id\":1234567,\"profile_id\":1234567,\" you got your id this 1234567
here will be your id listed copy it and past it. :)

Thats it you are done to see you have done everything as instructed goto Facebook's URL Linter.
Remember to use your post url not the main page url.

You are done let me know if you are facing any problem. I would love to help you.

Tags: how to implement faebook Open Graph protocol in Blogger, open graph for bloggee, Open Graph protocol For Blogger
Posted by Suresh at 11:34 PM

0 comments:

Post a Comment