I spent some time searching for this and thought to share how to refresh an embedded Twitter Timeline.

To do so you need to dig into the documentation and use the twttr.widgets.createTimeline() widgets method.

Here it is – just copy and paste and edit where indicated. Each time you call this function your timeline will reload.

twttr.widgets.createTimeline(
   'YOUR WIDGET ID HERE',
   document.getElementById('content'),	// the container element to inject the timeline into
   {
      width:'100%', // config settings....
      height:'100%',
      chrome:'nofooter transparent noheader noscrollbar',
      showReplies: true,
      listSlug: 'the canonical url for the timeline being embedded goes here'
   }
);

To find your widget ID login to your twitter account and generate a new widget. The resulting code will have a data-widget-id value which of course is your widget ID. Here’s a link to the widget creation page:

The rest is configurable per your specific needs. Here’s the link to the full documentation:

Depending on your application you might elect to not use Twitter’s widget code at all and rely instead on programmatically creating timelines. That works fine but you should know that there is a reason why Twitter’s timeline widget generator gives you HTML along with some JavaScript. The point of that is that if for some reason you lose connectivity or Twitter is down or something else prevents the timeline from loading you won’t just have an empty box on your screen – the HTML will appear instead. This is Twitter’s way of having a fallback mechanism so that at the very least the name of the Twitter user and a link to the timeline will be present.

I’ve spent a brief moment looking at the available events in Twitter’s API and I don’t see any that handle errors. I suppose you could wrap the twitter code in a try/catch if you’re concerned about covering your bases.