How to Add Twitter Summary Cards to Blogger!

When we share a post on social media site like Facebook or Google Plus, they display the post with a summary and also a thumbnail (if available). Twitter has also come up with a similar feature, it is called Twitter Cards. Twitter offer different types of cards. By going through this you will add Twitter summary card to your Blogger blog. As a result the post you will share on Twitter it will have a View Summary option. See the below demonstration.

• When anyone click on View Summary option then it will show the summary of that post.

As the result of adding twitter summary card to your blog the shared post on twitter will look more elegant. This will apply to any twitter account and not just yours. The follower and the visitors on twitter will get a quick preview of your Blog Post even before they actually visit your blog. Let's see how to add Twitter summary card to Blogger.

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.


Adding Twitter Card to Blogger:

• First Sign into your Blogger Account and go to Dashboard.
• Then click on Template option and click on Edit HTML button. You will land on your blog's HTML page.
• Here in the HTML page find </head> and Paste the below code just Above that.
• Replace iTTimesbd with the Blog's Twitter account Name.
• Replace Md. Asif Rabbi with the Blog's Author Twitter account Name.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
   <b:if cond='data:blog.postImageThumbnailUrl'>  
    <b:if cond='data:blog.metaDescription'>  
     <meta content='summary' name='twitter:card'/>  
     <meta content='iTTimesbd' name='twitter:site'/>  
     <meta content='Md. Asif Rabbi' name='twitter:creator'/>  
     <meta expr:content='data:blog.pageName' name='twitter:title'/>  
     <meta expr:content='data:blog.metaDescription' name='twitter:description'/>  
     <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>  
     <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>  
    </b:if>  
   </b:if>  
 </b:if>  

• Now click on Save Template to apply the code.

Add Search Description and Image to Post:

• While creating new posts don't forget to Add Search Description and at least one image on that posts. If you don't do these then twitter card will not show for that post.

Apply for Twitter Card Approval:

• First go to here to Request Twitter Card
• Then go to Validate & Apply tab and enter the URL of your blog post.
• Then click on the Go button.

Twitter will validate the card markup and if everything is OK it will show an option to request for approval. Do that and once it gets approved you will get an email from Twitter. This process takes around 5-10 day as of now. Once approved, then all the posts of your blog shared by your o others will show start show Twitter card.

Stay with www.iTTimesbd.com for more IT related post