How to add Twitter Widget to Blogger Blog

Do you want your tweets to be seen on your blog without having users go to your twitter profile? You can embed your twitter timeline on your blog so that all your tweets can be seen.

Blogger allows you to add various types of gadgets to give your blog a unique interface. There are lots of gadgets that can be added on a blogger blog but in this article, I’ll be focusing on Twitter gadget.

READ THIS: How to become a Successful Blogger

There is no direct gadget for twitter unlike AdSense, Popular Post, Google +, etc. but there’s another way of adding gadgets that are not listed on the gadgets list. With a simple HTML/JavaScript code, you can create any gadget you want. I’m going to show you how to add twitter gadget to your blogger blog. Follow me:

Steps to add Twitter Widget/Gadget in Blogger

• Sign in to your blog with your Google account.
• On the blogger dashboard, click on Layouts
• Select column you would like to add the gadget (you can add a gadget to the sidebar or footer layout of your blog) and click on Add a Gadget.
• Select HTML/JavaScript.
• Enter the title of your gadget or leave it blank.
• Copy this code and paste it in the content box
  

  <a class="twitter-timeline" href="http:twitter.com/USERNAME">Tweets by USERNAME</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

  Replace USERNAME with your Twitter username.
• Click on Save. Voila! Your tweets can now be seen on your blog.

Other Customizations

You can further customize your gadget to fit well. For example, the gadget may be too wide or too long, adding some simple HTML attributes will fix the problem.









To adjust the length of the gadget: add data-height inside the opening <a> tag and specify the value of height you want.

To adjust the width of the gadget: add data-width inside the opening <a> tag and specify the value of width you want.

It should look like this:

<a class="twitter-timeline" href="http://twitter.com/USERNAME" data-height="300px" data-width="300">Tweets by USERNAME</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Click here to see the full list of other customizations that can be made.



If you like this post, share with others. If you have any question or correction to make, please drop your comments below. You can also get latest posts and updates delivered to your E-mail address, click here to subscribe.