Friday, September 7, 2012

Display Interactive Twitter Timelines on Your Website

Twitter just launched a new tool called "embedded timelines" that can syndicate any public Twitter timeline to your website with one line of code.

A couple of cool things about this widget are:
  • No coding is needed -- all you need to do is to configure then copy & paste HTML code
  • You can interact with the tweets (show photos/media, reply, retweet, favorite, show more tweets) within the widget
  • You can display other Twitter user's public timelines instead of your own if you choose so
I played with it and was able to get it integrated with this Blogger site rather quickly. Following is the steps to light this widget up:
  1. Go to https://twitter.com/settings/widgets after signing in to your Twitter account
  2. Click "Create new" button to create a new widget
  3. Configure your widget such as Height, Theme, Link color etc then click "Create widget" button (see pic below)
  4. Copy the HTML code at the bottom right of the screen 
  5. Log on to your Blogger site, click Layout menu item on the left
  6. Click Add a Gadget, select Basics gadget category, scroll down to select HTML/JavaScript
  7. Type your Title, paste the HTML code from step #4, hit Save
  8. After click Save arrangement, your timeline is live on your Blogger site! (the live demo is available at the bottom of this page's sidebar)
Twitter Embedded Timeline Widget Configuration

If you need to integrate your timelines with other non-Blogger websites, Step 1-4 are the same.  You just need to replace step 5-8 with pasting generated HTML into your own webpage.