Pages

  • Home
  • About
  • Contact
  • Services
  • Privacy Policy

Tuesday, July 25, 2017

How to add Twitter Widget to Blogger Blog




Twitter gadget on blogger

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:


Step 1: Sign in to your blog with your Google account.


Step 2: On the blogger dashboard, click on 'Layouts'


Step 3: Select any area 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'.

Step 4: Another window will open where you can select the type of gadget you want but like I said earlier, the Twitter gadget is not listed. Select 'HTML/JavaScript'.


Step 5: On the next page, write 'Tweets by [USERNAME]' (without the quotes and change [USERNAME] to your Twitter username or brand) on the title box or you can leave it blank.


Step 6: Now copy and paste this code inside the content box.


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


Don't forget to change YOUR_TWITTER_URL to your profile Url (for example https://www.twitter.com/kadirijhay) and [USERNAME] to your Twitter username.


Step 7: Click on 'Save' and voila! Your tweets can now be seen on your blog.


Other Customizations

You can further customize your gadget to make it look unique. For example, the gadget may be too wide or too long, adding some simple HTML attributes will fix it.


To reduce the length of the gadget: add data-height inside the opening a tag

To reduce the width of the gadget: add data-width inside the opening a tag


It should look like this:


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

There are more customizations that can be made. Click here to see them all.



If you like this post, help share with others and your comments are welcomed. You can also get our Latest posts and updates delivered to your E-mail address, click here to subscribe to JhayTech mailing list.

No comments:

Post a Comment

We Love to hear from you. Leave your comment(s) below