Monday 8 July 2013

Add recent tweets widget in blogger




Hello Readers, Unziptech has posted many quality posts and tutorials regarding blogger and social networks widgets in the previous posts and in this post we will learn how to add a twitter latest tweets widget in blogger. Twitter is one of the most used social network and micro blogging website. It is also a great source of social and referral traffic. Adding a recent tweets widget in your blog can give your blog readers an easy way to re-tweet or respond to your tweets. Later in this post we will check out a live demo and a tutorial to add this official recent tweets widget in your blog.

recent tweets widget blogger


Social networks have become a vital need for blogging. Social stats shows the popularity of any blog. We have posted a number of blogger widgets in our other posts which will help you to improve on your social count.

Recommended widgets:

Add Recent tweets widget to blogger

  • Now we shall look at the procedure how to add this widget in your blog:
  • First of all login in to your blogger and twiter account.
  • Now click on this link, it wil take you to the widget creation page.
  • This page will look like the one below:
recent tweets configuration

  • Now choose the widget color, other requirements and click on create widget.
  • It will give you a code similar to the one below, it will contain a unique id highlighted in green, which will help this widget to appear.
<a class="twitter-timeline" href="https://twitter.com/unziptech"  data-widget-id="353479627362140162">Tweets by @unziptech</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  • Now come the customization part. You can adjust the height and width of this widget by mentioning these attributes in this code like this:
<a class="twitter-timeline" width="300" height="300" href="https://twitter.com/unziptech"  data-widget-id="353479627362140162">Tweets by @unziptech</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>   
  • Now that you have made all the adjustments, it is the time to add this code in to you blog.
  • Navigate to the Layout page in your blogger dashboard.
  • Click on Add a HTML/JavaScript gadget and paste this widget code in this.
  • Adjust and save the arrangements as per your needs and then click on View Blog.
Note: In order to make this widget appear, you twitter timeline should be public.
  • For more customization please refer to this official customization webpage.
You have successfuly added a twitter recent tweets widget in your blog. If you face any problem in the above procedure you can comment here. I will be glad to help you. You can check out our blogger tips and tricks section for more blogger widgets, seo and blogging tips. It will improveyour blogging experience.
If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

No comments:

Post a Comment