Skip to main content

How To Add Twitter Cards In Blogger

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

twitter:card
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.

 twitter:url
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.

twitter:title
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.

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

twitter:image
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'/>
      </b:if>
    </b:if>
</b:if>
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'/>
</b:if>
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?
Labels:

Comments

  1. Sanjay16 November 2013 at 10:11

    How To Add Twitter Account In Blogger....http://mytecharticle.com/?p=691

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Get Unlimited Ammo and Health in IGI 2

After many days I am sharing a cool and interesting trick for game lovers. Do you enjoy playing IGI2? Of course you like this game. But many of you may be facing verious difficult situations in completing this game. It's because the missions are really tough and you can't complete whole IGI 2 without using it's cheat codes. There are many hacking tricks for IGI available in the Internet but most of them don't work. And this is the reason I am sharing these cheat codes to you. After reading this post you will be able to play this game without losing any health and ammo. We'll use a lite application to achieve the immortality and infinite number of ammo in this game. You will have to download the software from the link that I will provide you a little later in this post. Let's first know what this software will do. It will allow you to keep your health unlimited in IGI game. And if the health will not decrease then you will never die in the game IGI. You wil...
11 comments
Read more

Block Annoying Ads in Google Chrome with Adblock Plus

Have you ever how some of the ads annoys peoples. Let's say you go to some website to download your favorite song but when you visit that site, you are welcomed with more than two or three pop-ups ads. Some websites keep more that two or three pop-ups and ads, they can place as many as 10 pop-ups on one single page. When you will visit a particular page the pop-ups will be opened automatically. We understand they need money to run their company but they should look for some good ways to show ads rather than showing forced pop-up ads, they can show ads if it that ad is relevant to their users or most of their visits their for that types of readings. Anyway, if you are really annoyed with these pop-up ads and wanted to block them than you can use a Google Chrome extension which is named Adblock Plus. This software can handle these pop-up ads very easily. It will not only block your pop-ups, it will also block the advertisement that is shown in the page too. After installing this app...
15 comments
Read more

Enhancing Productivity with Virtual Desktops in Windows 11

In the fast-paced digital age, multitasking has become an essential skill for maximizing productivity. With the release of Windows 11, Microsoft introduces an enhanced Virtual Desktop feature that empowers users to organize their workspace, manage tasks efficiently, and seamlessly switch between different contexts without the clutter. In this article, we'll delve into the world of Virtual Desktops in Windows 11 and explore how this powerful tool can elevate your productivity to new heights. Task View  The Power of Virtual Desktops Virtual Desktops in Windows 11 provide users with a dynamic way to manage their open applications and tasks. Think of them as separate workspaces, each with its own set of open apps, files, and windows. This allows you to group related activities together, effectively creating a focused environment for different projects, tasks, or workflows. Getting Started with Virtual Desktops Setting up and using Virtual Desktops in Windows 11 is a breeze: 1. Creating...
Post a Comment
Read more