As some of you may have noticed we’ve made a few minor changes to our site. One of these changes was the removal of the twitter feeds from our about page. You see, we rarely ever use Internet Explorer here at ClickPopMedia, but we noticed that our old Twitter feeds gave a very strange error message when viewed in Internet Explorer. Internet Explorer cannot open the Internet Site. … Operation Aborted. This was very confusing, because it worked perfectly on Twitter’s site, which is where the code came from orignally. Do not fear though, our feeds are back, they’ve just been moved and improved! We solved the problem, AND SO CAN YOU!

Explanation of the Problem:

The problem existed because of the size of the page. Twitter built their function with the assumption that it would not be running on a site with so much content, and believed that the function would not be called before the entire Document Object Model (DOM) was completely loaded. In our case, this was not true. Needless to see we tried everything. We tried throwing the function call in an onload event, we tried using window event listeners, and finally, when we were about to scrap twitter feeds all together I found a very simple solution. The script tag has a beautiful little parameter called defer built in to it. By adding defer to the twitter script tags, we were able to avoid this error message, thus allowing all of you to know what we’re doing whenever you want! HOORAY!

No, that is not the extent of this post. There are a lot of people that want a custom twitter feed out there, and more often than not end up using the ugly Twitter flash feed, because they hate the ugly Twitter xhtml feed. Have no fear, ClickPopMedia understands your needs, I’m going to show you some easy steps to create your own custom twitter feed.

First things first. We need to build our feed area:

There are 2 main divs here, and you can always add more if you’d like. Adding more divs may be needed if you would like to make custom graphics for your twitter feed, instead of just using CSS. The first div twitter_div is our container, this is what we all add our border, and default padding to. The second div twitter_update_list is what we will modify with our JavaScript function, and will contain all of the feed data.

First you should notice in our script tags we have added the defer parameter as mentioned above. Simply put, this will assure that the contents of this script tag won’t do anything until the entire site is loaded.

We’ll start first with the last line of this JavaScript, which is the JSON call of the Twitter feed from twitter.com. This will gather the feed data from their database, and parse it in to the TwitterCallback function. Two very important things to note with this particular line of code, I have included a PHP echo line in mine where I have dynamically set the twitter id previously on the page, and of course the count variable in the JSON call. The count variable will tell twitter how many of your ‘twits’ to send back.

Next we will look at the TwitterCallback function. This is a just a modification of the twitterCallback2 function included in the normal twitter javascript file. This one has been modified to use divs instead of line items in an unordered list. One important thing to note is that upon creation of each ‘twit’, the function will create two new elements, a div with the class of twit, and a link with the class of twit_link. Once these are created they can be styled as you wish.

The only other function to note is the relative_time function, which is directly copied from the twitter JavaScript file. All it does is convert the time stamp sent with each tweet, and converts it in to something more ‘friendly’.

Once all of this is in place we can stylize our twitter feed. For demonstration purposes I’m just going to add a quick border, and a background image to my feed box.

Thanks for stopping by, and I hope you enjoyed this little tutorial. Be sure to download the source code. God bless!