The only thing worse than the good ‘ole “Fail Whale” when you try checking out a Twitter profile, is when Twitter’s slowness effects the content on your site.
A lot of sites are using Widgets and Sidebar space to display their user timeline. This can be very handy to display the last x number of posts (for info on how to to add a Twitter Feed, check out the post “Integrating a Twitter Feed onto Your Site“).
The problem is that when the feed goes down (and this happens a lot, especially during early morning EST) there’s either a blank chasm where your feed should be or the next widget moves upward to fill the void and you’re left with your Twitter widget’s header bleeding into the next widget’s header.
To prevent my site from having no content under a widget with a header – “Latest Twitter Posts”, I’ve come up with the following work-around using JavaScript.
In the previous tutorial where I showed you how to put a Twitter feed on your site we placed the Twitter-created JSON file’s content into an unordered list with the id of twitter_update_list by utilizing the innerHTML property.
The <ul id="twitter_update_list"></ul> tags had nothing between them initially, so in theory, if the feed isn’t getting placed in there (no posts displaying), then there should still be nothing in the <ul> tags.
This little script will then check to see if their is still nothing in those <ul> tags, and if there is nothing there (text length of 0), it will change the style of a div with ID twitter-down, so that it will be visible (display = block).
<script type="text/javascript">
var txt = document.getElementById('twitter_update_list').innerHTML
var twitterStatus = txt.length;
if (twitterStatus <= 0) {
document.getElementById('twitter_update_list').style.display="none";
document.getElementById('twitter-down').style.display="block";
}
</script>
All that you need to do then is create either a sentence or an image to go in the now visible DIV to tell your users that the feed is not coming in right now (because of Twitter’s traffic) and that they can try refreshing the browser to have the feed appear.
