How To Add Twitter Public Timeline To Any Web Page

Twitter has announced the ability to add twitter public timeline to any web page. Until now, if you wanted to see any persons's time-line, you had to visit their profile on twitter. Twitter has now made it really easy to integrate your or anyone's public time-line with any website / web--page by offering a Widgets Configurator. Let us quickly tell you how use the Widget Configurator tool to create an embed-ready widget and integrate it with your website.

Step #1: Visit Widget Configurator Tool

Head over to #-Link-Snipped-# and login with your twitter handle and password. You should now see the following option at the top of your timeline. Click on 'Create New' button -



Once you are logged in, you will be presented with the following screen -

Step #2: Adjust the parameters

In the 'Username' field, enter the username for which you wish to create the public timeline widget. We've added 'CrazyEngineers' after the '@' sign to create a timeline widget for CrazyEngineers twitter handle. In the next step, enter the height of the widget in pixels. The default value is 600px which we believe is ideal to display 3-5 tweets simultaneously. Select the 'Light' or 'Dark' theme depending upon your website's color-scheme. In most of the cases, the default 'Light' theme would work fine. You can also choose whether you want the widget to show the photos that you include in your tweets. Leave the option checked (default). Choose the color of the HTML links that your widget to show. We'd recommend using link color that is same as the color for other HTML links on your page for an integrated feel. In the next step, you'll be asked to enter the domain names where you will embed your timeline widget. We chose 'www.crazyengineers.com'. Then the next option is whether you want to opt-out of tailoring twitter. If you leave it unchecked, Twitter will offer you suggestions on who you might want to follow.

Step #3: Preview the changes & copy the code

Your widget is now ready for preview. Make sure everything is in place and scroll down to the bottom of preview section. You should spot code similar to -

<a class="twitter-timeline" href="https://twitter.com/CrazyEngineers" data-widget-id="243445242710331392">Tweets by @CrazyEngineers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Copy the code and paste it inside your website's HTML where you want the timeline widget to appear. If you have any questions, feel free to ask them through comments.