Monday, 28 October 2013

How To Add Twitter Cards In Blogger

Want to add Twitter card in Blogger easily... There are two methods to insert twitter cards in blogger... These newly started Twitter card will really give your tweets more beautiful feel... Let's see this Blogger Trick on inserting twitter cards

Twitter one of the most popular social networking site is rolling out a new functionality to tweets. It is really a fantastic function and offers many features. These new tweet features will really make your tweets stand out and will give your tweets more professional feel. From the heading you were knowing that this new functionality is called Twitter Card. In this post I will explain you the functions of Twitter Cards and How To Add This Twitter Card in your Blogger blog. It will make your Blog's tweets look somewhat like that of Facebook. Before proceeding to the tutorial further we must know the Meta Tags used in the Twitter Cards. You really don't need need to know this but it will make you much familiar with the working of Twitter Cards.

How To Add Twitter Cards In Blogger

This twitter card meta tag describes which type of content you are sharing. Twitter offers three options and each option has different function and offers different look. These are Twitter:summary, Twitter:photo and Twitter:player for summary view & else, images view and for videos respectively.

This tag will define URL of your page. It may not sound good to add this tag but it is necessary to make one URL for two different types of contents.

You have to write your post title in this tag. Don't add keywords in this place. Write it in a way that it look more compelling to users. For Blogger users, don't need to write Title as the code that I will provide in this tutorial a little later will automatically obtain from the post title. You also have the options to add this Twitter card manually to every pages. I will explain it later in this post.

Write a appealing description here. Like I said above don't fill description with keywords but make it more compelling to users.

I really like this functionality added in Twitter Cards. By this you will be able to attach image whenever you share your link to users. It will give your tweet more beautiful look.

Now that you have learn the use of Twitter cards. So, we can now see How to add Twitter cards in Blogger. It can be inserted in your Blogger blog by two methods. First one is easy and second one requires a little homework. Let's first know about the easier method to insert Twitter Cards in Blogger.

How To Insert Twitter Card In Blogger Blog

Now, the first thing that you will do is Sign in to your Blogger Blog.
  • After signing in to Blogger go to Blogger Dashboard.
  • In blogger dashboard click on Template.
  • Now in template page click on edit HTML which is below the live preview of your blog.
  • After you go to HTML page of your blog. Search for "<head>" tag without quotes.
  • Now paste the code given below just after/below "<head>" tag.
<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 expr:content='data:blog.canonicalUrl' name='twitter:url'/>
        <meta content='@sashish302' 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'/>
Don't forget to replace @sashish302 with your own twitter User Name. Replace Summary with photo, player or summary according to your need or which will best fit your Blog.
  • After this Save Template. You just added Amazing Twitter Card in your Blogger blog with easy method.
As I said above I will provide two methods of adding twitter cards in blogger. This method will require a little hard work but you will be able to manually edit post title, description or images that will be shared in or tweeted in twitter. Let us see the second method of adding twitter cards in Blogger Blog.
  • First step you will require is sign in to Blogger.
  • After that Go to Dashboard > Template. In Template page click on edit HTML. Now follow the below steps.
  • Search for the code given below:
<b:include data='blog' name='all-head-content'/>
  • After you find the above code paste the code given below just above the code that I mentioned in previous step.
<b:if cond='data:blog.url == "PAGE-URL"'>
<meta content='summary' name='twitter:card'/>
<meta content='@sashish302' name='twitter:creator'/>
<meta content='Your preffered post title here' name='twitter:title'/>
<meta content='Write a appealing description here' name='twitter:description'/>
<meta content='Image you would like to show' name='twitter:image'/>
<meta content='Your Post URL here' name='twitter:url'/>
<meta content='data:blog.homepageUrl' name='twitter:domain'/>
Write your Post Page URL by replacing PAGE-URL in the above code. Replace summary with player, photo or leave it to summary according to your need. Yow will need to replace @sashish302 with your twitter Username. Replace the texts or lines written in blue colour with as I have described there. Repeat this step again for another post. Make it more appealing to your users. This will really give your tweets more beautiful and amazing feel to your Blogger Blog. These were the two methods to add twitter cards in Blogger.

Note: If you choose the first method than you must have at least one image in your post. And make sure you use official method of adding Meta Description in your Blog. Without these things twitter card will not appear in your blogger blog. If you choose the second more advanced method you will not need to write meta description in your blog.
This service is newly started by Twitter so you will need to apply for this service and after getting approval you will be able to enjoy this amazing features of Twitter Card in your Blogger Blog. You can apply for Twitter cards here.

I hope this will help you in inserting amazing Twitter cards in your Blogger Blog.
Which Method You Would Like To Use?


  1. How To Add Twitter Account In Blogger....