How to dynamically resize the new twitter widget

Dec 20

twitter have relaunched thier widgets for websites. The good news about this is that it gets rid of the limit of 150 API request per hour per IP address which was a bit of a pain particularly if you have organisations viewing pages from behind a proxy. The bad news is that its now a bit more fiddly to do things like change the size of the widget.

The old widgets used to basically just dynamically size according to thier container but the new system requires you to first define the widget you want on the twitter site, this is then saved on the twitter servers (this definition includes the height and width) and you reference it with an ID in your request e.g:

  1. <a class="twitter-timeline" href=""
  2. data-widget-id="281742178403885056">Tweets by @tappetyclick</a>
  3. <script>!function(d,s,id){
  4. var js,fjs=d.getElementsByTagName(s)[0];
  5. if(!d.getElementById(id)){
  6. js=d.createElement(s);;js.src="//";
  7. fjs.parentNode.insertBefore(js,fjs);
  8. }
  9. }(document,"script","twitter-wjs");</script>

At first glance it appears the ability you had before to dynamically change stuff like the height is now gone and apparently the old API will die after March 2013. However all is not lost if you read the twitter documentation it says you can override some server values by specifying them on the anchor tag....Huzzah!

Clearly, however if you want to do this dynamically thats only part of the story since basically what's happening here is you insert a standard anchor tag into your page and the twitter code replaces that with an iframe based on your parameters. So you can't just then manipulate the anchor tag in jQuery cos its not there anymore...worse still the way the twitter code works is that the js file it includes both has the code and does the work when its loaded so you can't just call a function again (well I suppose you could try and an unpick the twitter js file but I don't recommend that).

The way I solved this problem basically consists of 3 steps:

  1. Remove any existing twitter widget
  2. Dynamically write the anchor tag into the page
  3. Remove and reload the twitter js every time

So lets get to the code, first the revised function (based on the one you get from twitter) to generate the widget:

  1. function loadTwitter(d,s,id){
  2. var js,fjs=d.getElementsByTagName(s)[0];
  3. if(!d.getElementById(id)){
  4. js=d.createElement(s);
  6. js.src="//";
  7. fjs.parentNode.insertBefore(js,fjs);
  8. }
  9. }

Now we need a function remove the iframe and included js file from twitter when we want resize (or regenerate the widget):

  1. function removeTwitter(id){
  2. jQuery('script[id='+id+']').remove(); // Remove the included js file
  3. jQuery('iframe.twitter-timeline').remove(); // Remove the timeline iframe
  4. }

Now we need a function to dynamically create the anchor tag needed by the twitter code:

  1. function addTwitter(options){
  2. var linkStr = '<a class="twitter-timeline"';
  3. linkStr += (options.width)?' width="'+options.width+'"':'';
  4. linkStr += (options.height)?' height="'+options.height+'"':'';
  5. linkStr += (options.color)?' data-link-color="'+options.color+'"':'';
  6. linkStr += (options.theme)?' data-theme="'+options.theme+'"':'';
  7. linkStr += ' href="" data-widget-id="281742178403885056">Tweets by @tappetyclick</a>';
  8. jQuery(linkStr).appendTo(options.element);
  9. }

Last but not least we need a wrapper function to call all three functions just to make it tidy:

  1. function showTwitter(id,options) {
  2. removeTwitter(id);
  3. addTwitter(options);
  4. loadTwitter(document,'script',id);
  5. }

Now you can do this (obviously you can do this in jQuery):

  1. <a href="javascript:void(showTwitter('twitter-wjs',
  2. {width:220,height:300,color:'#ff0000',theme:'dark',element:'body'}))">LOAD SMALL</a>

So once again we can now build responsive layouts with twitter plugins you can see it working here

social media

Recent Comments

Browse by date

Join us on Facebook