July 26, 2013

How to Easily Add Twitter Cards in Blogger

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 Works?

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 @mybloggerlab 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 == &quot;item&quot;'>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <b:if cond='data:blog.metaDescription'>
        <meta content='summary' name='twitter:card'/>
        <meta content='@mybloggerlab' name='twitter:site'/>
        <meta content='@mybloggerlab' 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 @mybloggerlab 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 MyBloggerLab 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 @mybloggerlab

13 comments:

  1. UnknownJuly 26, 2013 at 11:39 PM

    I'm Italian, so sorry for bad english.
    I see 'Invalid card type.'
    How can I resolve?
    Please halp me

    ReplyDelete
    Replies
    1. Syed Farhaj AliJuly 27, 2013 at 9:00 AM

      You have toe wait till Twitter gives you approval to set Twitter cards

      Delete
  2. UnknownJuly 27, 2013 at 3:47 AM

    Nice explained Tutorial , Faizan Bro !
    And please increase your posting frequency as we are all very very curious to see your next article

    Regards
    Rizwan @ Blogger Kid

    ReplyDelete
  3. Kulvir SinghAugust 2, 2013 at 7:02 AM

    hello Syed, i removed content from that post. Please help me, search for this

    create bold text for facebook site:kbtricks.com

    in google. Google is indexed this post in mobile view. Please tell me.

    ReplyDelete
    Replies
    1. Syed Faizan AliAugust 2, 2013 at 11:01 AM

      Hi Brother,

      I really appreciate your Gesture fella. And I search for that keyword and for me it is indexed correctly. :)

      Cheers!

      Delete
  4. AnonymousAugust 3, 2013 at 5:11 AM

    is it still work if I using short link like bit.ly ?

    ReplyDelete
  5. UnknownSeptember 10, 2013 at 4:25 PM

    I have a problem with the image!
    It never appears on desktop only on Mobile devices!
    I tried everything!
    my blog is
    http://arab-media-online.blogspot.com/

    ReplyDelete
  6. UnknownNovember 3, 2013 at 3:32 AM

    Does it work for multiauthor blogspot sites?

    ReplyDelete
    Replies
    1. Syed Faizan AliNovember 3, 2013 at 3:56 AM

      Yes, It works fine!

      Delete
    2. UnknownNovember 3, 2013 at 4:00 AM

      so, if I use that code, how do I specify the twitter profile of each author?

      Delete
    3. Syed Faizan AliNovember 3, 2013 at 8:36 AM

      You can use this technique for multiple authors

      http://www.bloggingehow.com/2012/04/how-to-add-multiple-author-boxbio-in.html

      Delete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.