Twitter has rolled out a new technology called Twitter cards, which allow you to attach extra media experience to your tweets that has links to your content. It is pretty much similar to the Facebook Status. Whenever you post a link on Facebook, it automatically fetches the summary, title and feature thumbnail of your content. Recently, one of our users asked us How to Add Twitter Cards in Blogger? In this article, we will show you How to Add Twitter Cards in Blogger.
How Twitter Cards Work?
If the twitter cards functionality is correctly applied to your website, then you can notice a “View summery” link along your tweets. Whenever someone would click on that tweet it would display short summary of your content just like Facebook status. For more details see the following screenshot. Normally whenever you tweet about something, you play around with quite a few limitations. Most probably, you cannot tweet anything that exceeds 140 characters limit but not anymore. Now with twitter cards, you can get more productive display with lots of additional details about your content.
The biggest advantage of using Twitter Cards is that it increases the chances of people following you back through the latest content attribution. Most of the time people retweet you, but fails to give proper attributions. This not only happens to us, but we have also noticed the same thing from other big content creators. They tweet your article without giving a proper attribution like @blogger and etc. Though, it is their right to give you an attribution or not, but a publisher remains empty handed.
Lastly, it makes you stand out. Since, it is so new that it gives you people an attracting touch. Just like Google Authorship makes you stand out in search engine, Twitter cards make you stand out in the list of tweets. Now you know the benefits of the Twitter cards, let move step ahead and see how to implement it in Blogger.
How to Add Twitter Cards in Blogger:
The First thing you need to do to is go to Blogger.com and login into your Google Account. After logging in, you will be redirected to Blogger Dashboard. Now go to Your Blog >> Template >> Edit HTML and search for the ending <head> Tag. On finding the tag, just above it paste the following piece of code.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<b:if cond='data:blog.metaDescription'>
<meta content='summary' name='twitter:card'/>
<meta content='@brainofcomputer' name='twitter:site'/>
<meta content='@brainofcomputer' 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>
Congratulations: Do not forget to replace
@brainofcomputer with the twitter username of your site. Once everything is done, simply press the “Save” button and Twitter cards are ready, and good to be live on your website.
Final Step: Requirements
To make the twitter cards work perfectly on your site, it is must for you to upload at least one image, and add description to your post manually using "Search description" tool allocated in the Blogger Post Editor. Without adding these two things, twitter cards would not give productive results.
Since, it is a new service. Therefore, it is clear that you have to apply to have this activated for your site. We have also applied from our site and let’s see when they will give it an approval. Here's what you need to do to apply.
Test your site with
Preview Tool.
That's it. We hope this article has helped you in learning How to Easily Add Twitter Cards in Blogger. If anyone has any problem while applying this tutorial then, do not hesitate to leave a comment below. If you like the tutorial, leave a tweet for us at
@brainofcomputer
