Facebook Open Graph protocol For Blogger

Filled under:

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

5 comments:

  1. I don't have the "" tag in my blogger source... I've tried putting this after the Body and other various parts of the code, but without the "" tag, I don't know where it goes, and it A) doesn't work right, and B) changes the design of my blog (since I'm clearly not getting it in the correct spot. Any thoughts?

    ReplyDelete
  2. What exactly you are doing can you define your problem more clearly ! since i read your comment i dont get where the bug is disturbing you ! please clarify so that i can help you out !

    ReplyDelete
  3. I've tried putting your above code in my Blogger blog, but I can't find where to put it. You say to put it after the " "" tag" but I do not know what a "" tag is, and when I do a crtl-F search, the "" does not come up anywhere. Where do I put this code in my blog source then?

    ReplyDelete
  4. I don't have a ' "" tag' in my code - I am not sure what that tag is even. I am using a Blogger blog, but that bit of code doesn't exist in my source. Where do I put your provided code then?

    ReplyDelete
  5. OH really sorry due to code unacceptability the code has been automatically removed its "head" section find head ohk did you get it now ?

    ReplyDelete

Related Posts with Thumbnails