Technical: Twitter update JSON method

Twitter have updated the code sequence you'll need to call in order to successfully embed your tweets into your blog sidebar (or anywhere else, for that matter) as HTML you can format using CSS.

Just to be clear, this should not affect anyone using the standard Twitter widget for embedding a user timeline, hashtag or free text search.

But some website owners prefer to format their tweets to match the rest of their website design, and I'm one of them - if you look to the left of this post, you should hopefully see my latest tweets, in the same fonts and colours as the rest of my sidebar.

The method to do this used to be:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/bobblebardsley.json?callback=twitterCallback2&count=10"></script>

where the first <script> calls the general Twitter JavaScript for Blogger support, and the second calls my (@bobblebardsley) timeline, executes the 'twitterCallback' function to format it, and displays the most recent ten tweets (or whatever number you place after '&count='.

However, I recently noticed that my Twitter feed was broken - it's not the first time it's happened, so I figured the problem must just be a JSON update at Twitter's end.

Sure enough, the method has been updated to use a generic .json script for all usernames, rather than a username-specific one, and the username whose tweets you want to display is now passed to the script as a parameter rather than part of the filename.

The new method looks like this:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=bobblebardsley&callback=twitterCallback2&count=10"></script>

Eagle-eyed readers (and developers) may spot the following:

  • the server that hosts the .json is now secure (https, not http)
  • the .json is now hosted at api.twitter.com, not just twitter.com
  • and of course, you'll need to change the username if you're copying the code from above, or you'll get my tweets on your site - trust me, you don't want that.

Making it work

If you already have a JSON-based timeline on your site that has stopped working, it should be a small tweak to restore it to full functionality - just make the changes outlined above.

If you're trying to implement this for the first time, you're going to need to understand what you're looking at, and how to format it using CSS.

Those of you who are comfortable with viewing page source, I'd suggest you just take a look at the source of this page - the CSS is all right there in the header and anything relating to Twitter generally has 'twitter' somewhere in its class name.

Those of you who are not comfortable with page source, CSS and so on, I'd suggest you might be better off just using the standard Twitter widget if you need to embed your tweets into your site.

You can see the currently available widgets, and make one of your own, at https://twitter.com/settings/widgets and it's really the easiest way to get a timeline on to your blog if you're not a web developer.