Auto expand retweets in an embedded twitter timeline widget

This code snippet shows you how to auto expand retweets and favourites in an embedded twitter timeline widget.

I recently added a twitter stream to the side bar of this site, and was surprised that auto expanding the retweets and favourites wasn't a default configuration option. The code snippet in this article will achieve this for you with two lines of jQuery.

By default a twitter stream generated using their widgets will looks something like the below, where to view additional information you need to click the 'Expand' link. Twitter offers a few additional options by default (such as auto expand photos), and several advanced customisation options, which you can read about in their docs, however no option to auto expand retweets and favourites information.

So to auto expand retweets we need to do two things; set the containing element of the additional information to display:inline-block, and then hide the expand option, which has a class of 'expand'. Unfortunately we can't simply do this with CSS as the embedded twitter stream widget is inside an iframe, so instead we can target it with a bit of jQuery. Here's the code:

$('#twitter-widget-0').contents().find('.stats-narrow').css("display", "inline-block");
$('#twitter-widget-0').contents().find('.expand').css("display", "none");

Afterwards you'll end up with something that looks like this:

Loading in additional tweets

The above code will only work for the tweets that are displayed on the page at point of page load. To also auto expand the tweets that are added if the user clicks 'load more' at the bottom, you'd need to attach a listener to the load more click event. Additionally, you'll need a slight delay to cater for the time it takes for twitter to fetch and return the next set of results, we can achieve this with settimeout:

$('#twitter-widget-0').contents().find('.load-more').on('click', function()
{
      setTimeout(
           function()
           {
                $('#twitter-widget-0').contents().find('.stats-narrow').css("display", "inline-block");
                $('#twitter-widget-0').contents().find('.expand').css("display", "none");
           }, 500);
});
Sign Up

NEXT: Find out how many of your twitter followers are fake

Whether you want them or not, 'fake' followers can make up a large proportion of your audience. While they may make your company look like it's popular, these followers are dead-weight, and can even compromise your credibility. This post looks at tools you can use to calculate the percentage of real, active followers you have.

comments powered by Disqus
Sign Up

Popular Tags

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.