Ninja Ferret

The random thoughts of a software developer

Adding A Twitter Feed

In my post blogging with github pages I focussed on the initial steps of creating a new blog using GitHub Pages but there is more to a blog than simply a series of HTML pages. One of the things that I was looking for was to be able to display some of my more recent tweets to the outside world.

I decided that I would maintain the tweets in a side-bar and then I added in the references to the twitter api into my default layout:

<html>
	...
	<body>
	   	...
	   	<div id="twitter">
			<h3>Twitter: (<a href="http://twitter.com/ijohnson_tnf">@IJohnson_TNF</a>)</h3>
 			<ul id="twitter_update_list"></ul>
		</div>
		...
	</body>
	<script src="http://twitter.com/javascripts/blogger.js" 
	  	type="text/javascript"></script>
	<script
		src="http://twitter.com/statuses/user_timeline/ijohnson_tnf.json?callback=twitterCallback2&count=5"
	 	type="text/javascript"></script>
</html>

This uses the browser to render a list of tweets limited by the number specified in the scripts (currently 5) which means that you don't have to generate that list server-side.

There is something that I did not like about the contents of the twitter javascript file (blogger.js) which was that there was specific formatting embedded in the generated HTML that was overriding my javascript, namely the size of certain links was set at 85%. In general, I would recommend that you take a look at using this file as a template for your own tweet rendering javascript file because then you are in control of how your tweets look. This is my javascript code for rendering tweets.

It's as easy as that, in no time at all you have a twitter feed on your blog.

Tags:

blog comments powered by Disqus