I was getting bored in the last few hours. My boredom led me to a Facebook Like button on one of my blog posts. I fooled around with it for a while when I discovered something quite horrendous. It seems that Facebook has changed something (I don’t know what!) and my blog post no longer look decent on Facebook!
Since it look quite awful, I have no choice but to take another close look at my existing Open Graph tags and run a few more tests with Facebook Debugger tool. I couldn’t exactly remember the last I time did this boring job but I think it was probably 5 to 6 months ago. While I’m at it, I might as well document my best practices in placing Open Graph tags on my Blogger-powered blog. One day it might become useful for other bloggers!
Alright! Before I go ahead, take a look at how I plan everything to make sure that my blog and my blog posts look the way I want them to be on Facebook.
Open Graph Tags for Blogger: The Evil, Diabolical Plan!
Before somebody shares my blog with his Facebook friends, I want to make sure that people will be able to see my silly logo (125x125) as the default thumbnail on Facebook. I also want to make sure that Facebook users would be able to know what my blog is all about and this could only be achieved by telling Facebook to grab and use the existing description of my blog.
I’m almost there!
Before somebody shares either one of my blog posts with his Facebook friends, I want to make sure that people would be able to see those images that I have embedded in my blog posts as the default thumbnails on Facebook. I don’t want them to see my silly logo! I also have to make sure that Facebook would not grab and use the existing description of my blog. Instead of using my blog description, I want Facebook to take a few snips of my blog posts and turn them into some kind of post teasers.
Yes! My evil plan is done! Let’s see how I make it happen!
Open Graph Tags for Blogger: The Evil Codes!
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='URL to About Me page' property='article:author'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='URL to logo' property='og:image'/>
<meta content='Blog Description' property='og:description'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta content='Facebook App ID' property='fb:app_id'/>
<meta content='Facebook Admin' property='fb:admins'/>
<!-- END Open Graph tags -->
Note: If you want to use the above codes, replace those colored in red with your custom attributes and the whole block of codes should be placed within the <head> and </head> section in your Blogger template.
Open Graph Tags for Blogger: The Evil Tricks!
In order to force Facebook to take snips of my blog posts and turn them into post teasers (descriptions), I have deliberately use HTML p (paragraph) tags in all of my blog posts. I also have to make sure that there are no other HTML p tags located before my Blog Posts widget in my Blogger template. While I’m at it, I might as well mention that placing meta description tag in the body of a Blogger template is wrong!
In order to make it easier for Facebook to identify and use images that I have embedded in my blog posts as the default thumbnails, I have deliberately replaced images that once were embedded with HTML img tags, placed before the Blog Posts widget with CSS background-image properties.
Open Graph Tags for Blogger: The Results!
Excellent!
Nice!
Wonderful!
Mission accomplished!
RSS
4 comments:
WOW...this is for facebook right?
try it ah \m/
so hard...not worked for my blog :D
I appreciate this post so very much! The code is working for my blog almost completely, save one small thing. When I run my home blog address through the debugger tool, everything looks great, as it does when my blog in general is shared on facebook. But, when I try and debug a specific post page, I get this error:
Object at URL 'url of my blog here' of type 'article' is invalid because the given value '' for property 'og:image:url' could not be parsed as type 'url'.
I have no idea what this means... but somehow it's interfering with the sharing of specific posts. When I like specific posts on facebook from my blog, it just pulls a random image, not one from the actual post. Any ideas what I've done wrong?
meta content='Blog Description' property='og:description'
this is for static page, what one have to replace "Blog Description" for the post page.
I mean this is correct ?
meta content='data:blog.metaDescription' property='og:description'
Post a Comment