Display Tweets From Your Twitter Timeline Using Twitter Widgets

Dear Friends,

A few months ago, I wrote an article here that displayed how to display tweets from your timeline using HTML. Recently, Twitter updated its API and now allow users to create Widgets from your twitter profile. This post illustrates displaying your twitter timeline to your visitors on your website using Twitter Widgets.

What a Widget is?

A widget is a generic type of software application comprising portable code intended for one or more different software platforms. The term is used to identify an application, user interface, or both, are light and relatively simple and easy to use.

Benefits of Twitter Widgets

• Your users can follow you directly from your website
• Your users can tweet to you directly from your website
• Your users can directly reply to your tweets, retweets and mark your tweets as favorites from your website and they do not need to go to twitter for doing this.
• Ease of Use. Create widgets within seconds.
• Create as many widgets as you want.
• No Width required for the timeline. It auto fits as per the parent container of the timeline on your website
• Links Open in new windows by default

Configure Twitter Widgets

Once you have decided that you’ll use Twitter widgets, lets us create a widget. For this you will need to do the following steps-

• Log into your Twitter Account and go to Settings Page
  
• Go to Widgets and Click “Create New” from the screen
  
• Configure your widget from this screen.
  
• The different options present in this screen are explained below-
  1. Username – Enter the username you want to create the widget for
  2. Exclude Replies – Check this option for not showing any replies from your twitter account
  3. Height – Set the default height of the widget
  4. Theme – Choose a theme as suited for your website, Have 2 options Light and Dark
  5. Link Color – The color of links present in the timeline.
• Click “Create Widget” and your widget gets created.
  
• Copy the code provided by Twitter

Work required on your website

If you are a blogger using WordPress, Blogger or any other blogging platforms, you already have an admin to paste this code to. In case you are a developer and want to place this code at a custom location of your website, please see the next section.

• Log in to your Website
• Paste the code copied from Twitter into the area (widget / sidebar / footer) where you want to display the tweets and save the page.

In case you are not using any CMS and want to put this code at a custom place of your hand written website. You need to follow the below steps-

• Open the page and go to the place in the code where you want to put the widget.
• Paste the widget code, save the file and upload it to your server.

You’re done!

Below is a sample code that shows the widget code in a HTML file.

Tweets by @niteshluharuka

Hope you like this post.

In case you face any issues, please let me know via comments or contact me here.