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 allows 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, that is 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
- Ease of Use. Create widgets within seconds
- Create as many widgets as you want
- No width required for the timeline. It automatically fits 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 use the following procedure:
- Log into your Twitter Account and go to the Settings Page.
![]()
![]()
![]()
![image1.jpg]()
- Go to Widgets and Click "Create New" from the screen.
![Image2.jpg]()
- Configure your widget from this screen.
![Image3.jpg]()
- The various 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, there are 2 options, Light and Dark
5. Link Color: The color of links present in the timeline.
- Click "Create Widget" and your widget is created.
![Image4.jpg]()
- 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 use the following procedure:
- 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!
The following is a sample code that shows the widget code in a HTML file.
1. <html>
2. <body>
3. <a class="twitter-timeline" href="https://twitter.com/niteshluharuka" data-widget-id="343005309226323970">Tweets by @niteshluharuka</a>
4. <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>
5. </body>
6. </html>
Hope you like this article.
In case you encounter any issues, please let me know via comments.