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

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

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...
10 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