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 Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more