Twitter started to support microformats by the introduction of Twitter cards. This will help to show the summary, thumbnail, site twitter handle, URL etc while tweeting. This is similar to open graph protocol of Facebook and Google+. Here is how to implement it.

Twitter card is the new way of showing our content in a more engaging way on twitter. When a user click on Expand story, he can see blog post description, thumbnail, website twitter handle and author twitter handle. User can follow both twitter handle from the expanded story. Presently this is under development. So be prepared by implementing it early.
Now they have six (three) types of attributions. Summary, prduct, photo, summary large image and player.
Summary is what we need for blog posts. Photo helps to preview photos and player for videos. Using summary attribution, we can share the post description, two twitter handles(author and website name), thumbnail image, post title and URL. Twitter may add additional attributions in future. Stay tuned.
[Update: You may check out my twitter handle for more demos.. https://twitter.com/bloggerhow]

Twitter card summary implementation

This is an example of twitter card summary implementation @twitter

How to implement Twitter cards in Blogger: Summary

We need to add some meta tags to head section of Blogger template.

  1. Navigate to Template and then select Edit HTML (#)
  2. Clik on the Proceed of appeared popup window(#)
  3. Find </head> by Search (Use Ctrl+F)
  4. Add following code just above to the </head>
<!-- twitter cards -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/> 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta name="twitter:title"  expr:content='data:blog.pageName' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
 <b:else/>
<meta name="twitter:url" expr:content='data:blog.homepageUrl'  />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
 </b:if>
 <b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/>
<meta name="twitter:title"  expr:content='data:blog.title' /> 
 <b:else/>
<meta content='WEBSITE_FAVICON_IMAGE_URL' name="twitter:image"/> 
<meta expr:content='data:blog.title' name='twitter:title'/>
 </b:if>

But the old blogs won’t show meta description tags as they are introduced recently. You can introduce this support by adding the following code instead of green colored line. But you should put the whole code block after <body>. The below tag is not supported in head section. Normally meta tags are used in head section, so it may arise warnings with search engines.

<meta name='twitter:description' expr:content='data:post.snippet'/>

If you have already implemented Open Graph Protocol, you need only first three tags. Don’t forget to change red colored strings to your value.

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/>
<meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>

After adding meta tags to your template, you need to validate using Twitter card validator-Link

Share this article

Related posts:

  1. How to implement open graph protocol in blogger/blogspot blogs
  2. How to use Blogger’s new meta description tag for adding individual descriptions
  3. Remove read more from blog post summary or home page
  4. Remove links from individual Blogger posts or page titles
  5. Avoiding poblems due to country specific redirection in Blogger