Add Twitter Cards to Blogger Correctly

twitter cards for bloggerMost of you asked how do we add a "View/Hide Summary" link below our tweets. If you click the summary link it will expand and show the post description snippet, along with a thumbnail image, Page title and twitter account attribution. We achieved it by integrating "Twitter Summary Cards" with Blogger. Twitter card is not a new name because they were introduced last year and the reason we never talked about it was due to unavailability of custom XML tags in blogger code library. The image thumbnail tag provided by blogger is of small resolution i.e. 72 x 72 pixels and unfortunately Twitter still has problems fetching the thumbnail correctly. This made it difficult to implement twitter cards for blogger.

The thumbnail displays fine on Twitter testing page but fails to appear on twitter page. Somehow we at least succeeded in fixing the problem with embedded tweets as you will see in demo.  Due to low resolution thumbnail sizes we can not install meta tags for Large Image Summary Card in Blogger but we can surely add Summary Card that works fine with small resolution images. We termed today's tutorial "correct" because most of the  methods that we found so far were not well wrapped in with conditional statements and this made the Template Header full of a large clutter of META Tags which is not good for SEO of any site. The same mistake is seen for OpenGraph Tags which I will be covering in another tutorial. Lets first read a little theory before jumping at the tutorial.

To see the demo visit our twitter page: @MyBloggerTricks

Below is a live demo for an embedded tweet:

Difference between OpenGraph Tags and Twitter Cards?

We honestly find it completely meaningless when twitter introduced beta version of these new tags in 2012 because we already had Facebook OpenGraph Tags that are widely used even today and works just fine in fetching the right Thumbnail, Description and title. OpenGraph tags are used even by GooglePlus to fetch required data and twitter also used it. Now twitter has started a whole new crap that I hope may not encourage every new social media network to come up with their own custom meta tags. I just hope Google does not follow this trend. Else we will be forced to add bulk of meta tags for each giant online. Twitter cards are surely a bit different and creative but fundamentally speaking they serve the exact same purpose as OpenGraph tags do which were introduced by Facebook.

Following is the list of six twitter cards being introduced by twitter in order to display user content in a more friendly way on Twitter accounts.

  1. Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
  2. Large Image Summary Card: Similar to a Summary Card, but Features bigger size images.
  3. Photo Card: A Tweet sized photo card.
  4. Gallery Card: Displays a collection of photos.
  5. App Card: Displays application profile.
  6. Player Card: A Tweet sized video/audio/media player card. You can now watch YouTube videos live on twitter! Probably the best card for podcast blogs. Instead of summary link you will see View/Hide Media link here.
  7. Product Card: It represents product content in a more better way.

Why this Method is Correct?

We are utilizing dynamic conditional statements available in blogger that checks for a selected data and displays the content only when the required condition is met. The code shared below will check for a Homepage logo and also Post thumbnail based on right condition. The thumbnail data variable does not work for index page but works only for item pages. As a result if you specify the following data type for thumbnail:

data:blog.postImageThumbnailUrl

then Twitter will not display a summary card for homepage but it will for item/post pages. In order to fix this problem, we have set careful conditions, which work just fine and also produces a compressed code.

Further instead of manually adding Title and description for homepage, we have used variables that automatically does the work.

Install Twitter Cards on blogger

STEP#1

Follow these easy steps.

  1. Go To Blogger > Template
  2. Backup your template
  3. click Edit HTML
  4. Paste the following Meta tags anywhere below <head>

 

<!-- Twitter Cards For Blogger by MBT -->

<meta content='summary' name='twitter:card'/>
<meta content='@mybloggertricks' name='twitter:site'/>
<meta content='@mybloggertricks' name='twitter:creator'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='YOUR-BLOG-LOGO' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

Make these changes:

  • Replace mybloggertricks with your twitter username for blog profile
  • You can replace mybloggertricks with either your personal twitter profile or your blog profile. I chose blog profile. For Multi author blogs like in wordpress you can choose to show author twitter profile for each twitter card.
  • Replace YOUR-BLOG-LOGO with your Logo Link

    5. Save your template and you are half done!

STEP#2

The final step is to verify your twitter card settings. It is really easy, just follow these steps:

  1. Open Google Chrome or Safari (Twitter cards work on webkit browsers only not Firefox)
  2. Go to Twitter Card Validator
  3. Double Click Summary on the popup window
  4. Click the Validate and Apply  tab
  5. To see you have added the code correctly just enter your homepage link inside the box and hit go.

twitter card validation

    6.  Do the same for a post Page. Select any post (which contains at least one image and search description) from your blog and test it to see it also gives the right post title, thumbnail and description. If you get a red error for twitter:description , then probably you have not added Post description. Just don't worry about it because I will tell you in next step on how to fix that.

    7. You will see a red link that says that your site is not approved, simply click it and fill up the form to submit your request for Twitter card approval.

Twitter would say that they would send you an email but they really don't do that. At least I have not received any email for our three blogs. They get approved automatically within 48 hours. Once you see summary link below all posts know that you are all set up!

Requirements:

There are two requirements for twitter cards to work properly in Blogger:

1. Always add Search Description for Posts

If you don't know how to do it or if you don't have the "search option" inside blogger post editor then you can simply optimize your blog and add the required code by following this tutorial.

2. One Image inside posts

In order for twitter to display the thumbnail, you must make sure to add at least one image inside your posts. This image can be uploaded anywhere you want. There is no requirement that it must be uploaded through blogger editor only or on picasa web albums. All that is required is an image inside a post and nothing else.

Need help?

This tutorial is made as easy and informative as possible. If you still faced any problems, then don't troubleshoot yourself and let us know for any help needed.

Free Tip: Wordpress users can install JM Twitter Cards  for any framework, be that genesis or thesis.

Peace and blessings dear buddies :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

41 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Nice post. Thanks for sharing with us.

    ReplyDelete
    Replies
    1. Good article.

      http://www.elegantweddinginvites.com

      Delete
  2. Wow thats Amazing post, Great Mustafa Sir, for this valuable posts about twitter card.

    Sir i have one off topic question please dont mind, i have left the same question many mores on your previous posts but i did not get response till now.

    Mustafa Sir i oftenly confused when i wrote a full post and comes to write meta description for it. this time i dont know how to write good meta description for it.

    1: sometime i copy 1 line sentence from the entire post and past into meta description is it a good practice. ?

    2: Sir is there keywords stuffing in post meta description ?

    3: Sir can we add a post title into meta description in such manner that you have wrote for this post.

    An Insightful tutorial on How to Add Twitter Cards to Blogger by keeping SEO
    in mind

    So it is better to write post title similar words in meta description.

    final question: Mustafa Sir please write a complete article about Keywords stuffing and keywords density. i have found many valuable post on MBT except this one post. if you hav,nt time for write post about this then please little guide me here about keywords stuffing and keywords density.

    I hope that you will cover my all questions as soon as possible. Thumbing To MBT

    ReplyDelete
    Replies
    1. always welcome for such questions buddy. I love them when you ask so sincerely.

      To answer all your three questions into one I would say. Never post blindly unless you have researched well. I take 5 hours and sometimes 12 hours to brainstorm an article by using proper SEO techniques.

      By researching I mean find already existing articles on the subject you are writing and then use all available collection of keywords inside your post in a nice way. Use keyword tool to use more targeted keywords. Once you have enough vocabulary and terminologies, you are all ready to start writing your post.

      1. Use one set of your keywords inside title
      2. Use other set of them inside permalink
      3. Use third set inside Post description
      4. Use remaining inside content including the ones you used inside title and permalink.

      The post description one may or may not contain just one keyword and must be written in an understandable way. It may not be same as title or permalink but in reader friendly manner.

      If you check clearly then you will notice my titles, permalink and description all contain different combination of words.

      My title has no word "settings" and uses the conjunction "for" but permalink contains the word "settings" and the conjunction "for"

      The description then uses the keyword SEO, to attract Google users even more.

      So all these three set of elements help you to rank higher.But I would strongly say, the soul of your article is the content, phrase combination, those 700-800 words that you write inside the post and the hyperlinks.

      Dear I am releasing SEO PACK 2013 so all your questions will be answered.
      Hope it is cleared. Let me know for more help buddy :)

      Delete
    2. Bundles of Thanks Mustafa Sir from the bottom of my heart. i got all the SEO technique thats i want. thanks Once again for your kindly reply with such explanation. I will always remain the MBT spider. Love and thumbs to MBT.

      Delete
    3. I feel much pleased when readers like you ask serious questions and you are always welcomed hafeez :)

      Delete
  3. Very nice Trick and usually people add twitter in his website or blog and that is what we need.

    Thanks for nice post.
    regards.
    http://pakistanlearningcenter.blogspot.com/

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. That sounds great jahid. I am glad the tutorial helped you with easy installation.:)

      Dear your comment was deleted due to the link inside your comment. Please avoid links so that we may never delete it in future. Kindly read the comment policy. Apologies for the inconvenience.

      Delete
    2. Thanks Bro..I will not use any link to my website further..

      Delete
  6. Mohammad, ran into a problem. Received an email saying -

    "The URL you provided for cricketnns.blogspot.com to use the summary card is inaccessible. Please check to make sure the page is available, then reapply for a Twitter card.

    Thanks for your patience. See you soon!"

    I don't understand what I did wrong, please help me address this issue. My blog: http://cricketnns.blogspot.com

    Thank you!

    ReplyDelete
    Replies
    1. Please submit this one. http://cricketnns.blogspot.com/

      It is working fine and I have checked your code, it is installed just fine.:

      Delete
    2. Still not working, got the same e-mail.

      In case you want it, my twitter: @thecricketdiary

      Delete
    3. I visited your twitter page and view summary cards are now visible there which means they accepted your request: https://twitter.com/thecricketdiary

      :)

      Delete
    4. OK, this is really weird now. I just went to the same page and it's not working at all... :(

      Just see this post for example: https://twitter.com/thecricketdiary/status/338837233765339136

      Thank you for all the help so far by the way! :)

      Delete
  7. Than you 4 this post.
    Www.softwarengineers.org

    ReplyDelete
  8. Assalamualikum Ahmed Bhai, Please help me.. I am trying to use your MBT church theme, but when i open my blog, it shows an ad at top left side. As soon as i close that ad my blog moves to top left side and leaves huge space on the right side. please help me. This is my blog http://myamazingtrickz.blogspot.com/

    ReplyDelete
    Replies
    1. Check to see you have not installed a browser Add-on or extension. some stupid add-ons these days puts dynamic ads everywhere even inside google and twitter!

      Delete
  9. Thanks for such a informative post.keep writing.

    Regards
    http://www.roundpulse.com/

    ReplyDelete
  10. wow thanks sir, keep updating with such a tutorial ^-^

    ReplyDelete
  11. Nice post thanks for sharing this with us.

    ReplyDelete
  12. Assalaamualaikum Ahmed bro. Thanks for this tutorial.I pasted the code into my blog template but when I went to the Twitter Card Validator and put my blog URL, it is displaying the following message: mauritiantechie.blogspot.com not approved

    I pasted the following blog URL in the Twitter Card Validator: http://mauritiantechie.blogspot.com/

    The codes I pasted in my template:
    I replaced @mybloggertricks with @MauritianTechie

    I replaced YOUR-BLOG-LOGO with the link below

    http://4.bp.blogspot.com/-7WP7c1Y6Chw/UAeDno-I7tI/AAAAAAAAA7s/Mt32N92M6b8/s1600/mauritian%2Btechie%2Blogo.jpg

    Please tell me where I've made a mistake. I'll be very grateful.

    ReplyDelete
    Replies
    1. W.salam brother Muazzam,

      Dear you have followed every step correctly and what you are seeing as not approved means you need to click that link so that twitter may accept your request. If you read the tutorial, I have mentioned that you need to click that link and fill up the form so that twitter approves Twitter cards for your blog :)

      Delete
  13. Thank You very much Ahmed Bhai, it was a stupid add-on that was showing ads. I removed that add-on. thank you very much.........

    ReplyDelete
  14. Mustafa Sir another question is raised in my mind, >>

    I see that these days wordpress and bloggers blog using h1 tag for post title. So it will be better to use h1 tag for post title because robot give first priority to h1 tag then h2 and so on.

    So if you are answer is this>>>that we use h1 tag for homepage then you are right, but we will do some mini trick, we will give h2 tag for post title on homepage and give h1 tag for post title inside the post when the post is opened.

    SO please guide me because nowadays this is recommended by many bloggers. But i will follow your instruction without you i will not touch it. Because i have customized it according to your old post in which you have told us that use h2 tag for post title.

    Will this customization would help in search engine results.

    Bundle of thanks and hope for earlier reply,

    ReplyDelete
  15. Thank you sir for this wonderful tutorial. I already done.

    ReplyDelete
  16. Worked like a charm. Thank you so much!

    ReplyDelete
  17. It didn't work for me!, picture is not showing but nice tutorial thanks!

    ReplyDelete
  18. description does not work well, not showing on item page :(

    can you help me please, here :(

    ReplyDelete
  19. That might be things to avoid so that you can not make mistakes. As for the person that will choose property management agent, you must need this, Thanks for sharing it well right up.
    all time print

    ReplyDelete
  20. This post is excellent. Thank you so much!!

    I have one question.

    I would like to use Large Image Summary Card instead of Summary Card.

    Can you please give me the instruction to implement it?

    Thank you for your help in advance.

    Regards,

    ReplyDelete
  21. How about Mobile version? Thanks

    ReplyDelete
  22. How about Product card? Thanks in advance:D

    ReplyDelete
  23. Hi Admin, how to enable photo card on blogger? i was try to change to and on my blog @ http://www.matchingtattooideas.com/ but the post image does not appear on my tweet.. please help me guys..

    ReplyDelete
  24. regards from
    www.iliyas.net

    ReplyDelete
  25. Hi, first I would like to say thank for all the things that wrote here. Now I would like to ask you help for put more than one card in Blogger, I look for 3 days doing research and nothing was writing till now. Thank you for your time, attention and help. Regards.

    ReplyDelete
  26. So if you are answer is this>>>that we use h1 tag for homepage then you are right, but we will do some mini trick, we will give h2 tag for post title on homepage and give h1 tag for post title inside the post when the post is opened. govt.guru

    SO please guide me because nowadays this is recommended by many bloggers. But i will follow your instruction without you i will not touch it. Because i have customized it according to your old post in which you have told us that use h2 tag for post title.

    ReplyDelete
  27. great article, Mohammad, very simple and effective method, it works on my blog, thanks for sharing, BUT the image preview is blurred. That probably discourages someone to click on that link. Have you been aware of this issue? Any tip on how to improve it?

    ReplyDelete