August 27, 2011

How to Customize Google +1 Button Snippet in Blogger

Google +1 button was introduced for webmasters to use it on their sites to being recommended across the web and become more transparent in the search results. As it involves with the Google+ social network, it has been adding more social features to improve the usage of +1 button for almost all users in addition to webmasters. We have discussed their previous addition Friend Annotations and HTML5 syntax in Add Google +1 Button for Blogger Posts. Now Google +1 button has got its new addition +Snippets and sharing capability. Let's find out how to deal and customize +Snippet.

If someone click +1 button on your site or page, earlier it would list particular page on their Google+ profile as a +1d item. title/link, description and image for specific +1d page will be generated automatically after crawling the page.

Now Google +1 button added with sharing feature. Whenever an user clicks on +1 button or if he/she already +1d and when hover on +1 button, the user will get a popup sharebox to share it on Google+ to start a conversation about the content. There is where the +Snippet feature actually pops in. When users share your content, they will able to preview the snippet they gonna share in sharebox. The snippet consists of image, title/link and description. The crawler will find metadata, microdata, Facebook Open Graph tags or guess best suited values for those properties. So let's see how to customize +Snippet using either ways.


Most probably you may have metadata specified on your blog. If your page has metadata specified, +Snippet will use Title and Description meta tags to fill in title and description to the share box. But for thumbnail image, it will find and use a suitable image from the page itself.

If you wish to customize your page title and description meta tags, read How to Customize the Page Title in Blogger and How to Make Use of the Description Meta Tag in Blogger.

Facebook Open Graph Protocol

You can use Open Graph tags on your site to instruct +Snippet to use title, description and image as specified. Unlike metadata, you can specify image for your page using Open Graph tags. But if you are satisfied and already using metadata for title and description, you can just implement Open Graph Image tag to specify image for a particular page. If you wish to implement Facebook Open Graph protocol, then read How to Personalize Your Pages using Open Graph Protocol in Blogger and add Open Graph title, description and image tags. Microdata

Google, Yahoo and Microsoft introduced to improve the web search with structured data markup schema to support by major search engines. Not only by +Snippet, but also major serach engines use microdata to create rich snippets in search too. microformats let you specify pages with wide range of specific attributes. Basically for +Snippet feature, you should specify title, description and image using microformats.

Google recommends using microformats, but still microdata couldn't able to compatible with Blogger. So you have to depend on other two options we've discussed above. I will update this section whenever microformats able to work on Blogger platform.

Enjoy :-)

Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.

Related Posts and Categories

Category, , , , , ,


* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.