2012/12/11

How to Add Twitter Cards Support for Your Blogspot Blog



Want to show your blog posts summary with Tweets? This feature is available for anyone by Twitter. It is called Twitter Cards. You need to configure your blog/site according to Twitter guide in order to display your links summary in tweets. WordPress.com blogs already have this support but for WordPress.Org blogs you need some Twitter Cards plugin or edit your template.

Here I am going to tell you how can you make your blogspot/blogger blog posts to display summaries of your blog links in Tweets.
It is very easy, just copy paste this code into your blogspot blog template before </head> tag. You need to edit only one thing in this code, that is Twitter username. Put your Twitter username and use the code given below.

<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@YOUR-TWITTER-NAME' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<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'/>
<!-- end twitter card details -->
If you want to include a single author name also, then include the line given below in code with Twitter username of author
<meta content='@AuthorTwitterID' name='twitter:creator'/>


To Check if you have configured your blog/website to work with Twitter Cards, go
to dev.twitter.com/docs/cards/preview and input a post or page address in Media URL box and click Preview card (Leave HTML Tags box empty).

Once you are sure that you have successfully installed Twitter Cards code on your blog, visit dev.twitter.com/form/participate-twitter-cards to apply. When approved, your links will start to show summaries with Tweets :)

For more details about Twitter card, visit official guide


29 comments:

  1. Thanks for the info. Aaqil.

    I followed your instructions exactly, but when I check the preview I get the error:

    "Missing Tag: twitter:description"

    Any ideas?

    ReplyDelete
    Replies
    1. Pls paste the code or screenshot here which u used at your blog. And tell me your blog url also.

      Delete
  2. I figured it out Aaqil. You have to have a meta description for EVERY post and not just the blog as a whole! That's a lotta work.

    ReplyDelete
    Replies
    1. oh hehe :D by the way that is good thing to have description optimized for every post and page. Helps in SEO.

      Delete
  3. Wait, so is there a fix or not? I'm trying to implement this and I'm also getting the meta description error upon previewing the card... Let me know.

    ReplyDelete
    Replies
    1. Can you post your code and blog link here?

      Delete
    2. Here's the code, which I've posted under the head section of my site www.disarraymagazine.com :

      Screenshot of code: http://screencast.com/t/iPKlU02JEmZ

      Screenshot of Twitter's Preview Card error:
      http://screencast.com/t/NjYr8pdDS

      Hopefully, you can help. =)

      Delete
    3. I've implemented your code, here's the error I see from Twitter's preview card: http://screencast.com/t/NjYr8pdDS

      Delete
    4. I think you are pasting code at some wrong place.
      Go to you template HTML editing page and press CTRL+F key from keyboard (firefox, chrome) and type (without spaces between head and / in Find box. Then paste the code just about tag.

      Like mine: screenshot http://goo.gl/ayBXZ

      Delete
    5. I place code like your says but when i test , is show "Missing Tag: twitter:description"


      I think is not problem with place that your say in screenshot above

      Delete
    6. yes
      check out mine blog- www.mycricweb.blogspot.com

      Delete
  4. thank you.
    Very nice information :)

    ReplyDelete
  5. am getting this error
    Missing Tag: twitter:description
    Unknown Screen Name: twitter:creator; value=@AuthorTwitterID

    ReplyDelete
    Replies
    1. Fahad please paste your code here which you are using.
      Also mention your twitter username.
      I shall try to correct the code for you.

      Delete
    2. Mine code before head tag. screenshot: http://goo.gl/ayBXZ

      Delete
  6. I place code like your says but when i test , is show "Missing Tag: twitter:description"


    I think is not problem with place that your say in screenshot above

    ReplyDelete
    Replies
    1. Are you using some official blogger template? If not then does your template have description meta tag for posts/pages?

      If yes then do you write post description for every post?
      (I am not toooo expert, just trying to help with what comes in my mind)

      Delete
    2. This comment has been removed by the author.

      Delete
  7. if you using unofficial blogger template, try this ;















    its work for me.

    ReplyDelete
    Replies
    1. I am using an unofficial blogger template which doesn't have any meta description stuff in it, and I can't see your info about what I should add? It isn't coming up in your comment

      Delete
  8. thank you, it works :D

    ReplyDelete
  9. Hi i integrate the code but the tittle tag missing. In card validator when i type the main domain www.panayanon.com tittle tag missing but in my blog post the twitter card is rendered. How could i fix this?

    ReplyDelete
  10. For those getting the description error, try this instead. In his code snippet, I replaced:

    data:blog.metaDescription

    with

    data:blog.pageTitle

    Then you don't need to do anything special in each post.

    ReplyDelete
  11. thanks for dad ideal, i solve all problem in mine
    my site is https://www.mysourceng.com/
    and dis the code that work for me

    ReplyDelete
  12. Realy nice post and information you provide its impressive.
    Huawei Y7 2019 price in Pakistan

    ReplyDelete
  13. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck. Alexander Malshakov

    ReplyDelete

Share post using share buttons or leave a comment