Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
The Open Graph protocol enables developers to integrate their pages into the social graph. It works the same way as Twitter Card.
After using Open Graph META tags, Facebook show more detail about your posts to give readers a little preview of what they'll see when they click your link. Adding META tags to your blog to allow links to your site to be more informational when shared. You can learn more about Open Graph Protocol at this link.
Open Graph META Tags:
Before starting this tutorial, let me explain about the properties of META tags. The four required properties for every page are:
- og:title - The title of the page.
- og:type - The type of your object, e.g., blog, article, site.
- og:image - An image URL which should represent your object.
- og:url - The canonical URL of your object. Make sure that you have uploaded your images from Blogger Post Editor or is hosted on Picasa Web Album.
The following properties are optional for any object and are generally recommended:
- og:site_name - The title of your blog.
- og:description - A one to two sentence description of your object.
Optional Open Graph META Tags For Facebook:
These two META tags are option. You can add them to administrate your page from Facebook. To apply these META tags, you need either your Facebook account or your Facebook application ID (or both).
- fb:admins - Your Facebook profile ID or Username.
- fb:app_id - The application ID provided by Facebook App.
Adding Open Graph META Tags To Blogger:
Now, I'll show you how to perfectly add these META tags to your blog's template. Don't forget to backup your template.
- Go To Blogger > Template > Edit HTML > Click on "Proceed"
- Once you've opened up your template, find the </head> tag in your template's markup. Enter this markup directly above the </head> tag:
<!-- facebook open graph meta tags starts bwidgets.com -->
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Logo URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-profile-ID' property='fb:admins'/>
<!-- facebook open graph meta tags ends bwidgets.com -->
In above code, make following changed:
- Replace Logo URL with your blog's logo URL.
- Replace App-ID with your the application ID provided by Facebook App.
- Replace Facebook-profile-ID with your Facebook profile id or username.
If you don't want to add option Facebook META tags, then you can remove following lines from above code:
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-profile-ID' property='fb:admins'/>
Test Your Markup:
You can test your blog's Open Graph META tags markup by using Facebook's official parser and debugger.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
