Twitter Widgets – Brand Your Own

UPDATE: The new Twitter API pretty much spells the end to this. Time to hire another plumber.

If you are embedding a Twitter widget on your website, there’s no need to settle for the out-of-the-box Twitter version they offer here: https://twitter.com/about/resources/widgets

Yet still, I see these things everywhere…

Create Your Own
The Twitter API makes it very easy to generate a JSON call to twitter and output a simple list of tweets. Here’s how:

The goal here is to brand your Twitter placement and also offer display flexibility.


<ul id="twitter_update_list"> </ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME-GOES-HERE.json?callback=twitterCallback2&count=5"></script>

There are multiple parts at work here.

  1. The first line creates an HTML unordered list that you can style with css.
  2. The next line brings in the blogger.js file from Twitter that this widget needs.
  3. The third line is what actually calls in the user timeline – make sure you put in your Twitter username where USERNAME-GOES-HERE is.
  4. This code is set to display the 5 most recent tweets. If you want more or less, change count=5 to whatever number you prefer.

With the Lightning, I got a lot of calls from other teams on how we did this in the right rail of our pages (see below). Most everyone else was using the basic, official widget.

For a more advanced widget, you can also set one up that hides your @ replies.
The code isn’t that hard to customize and the results are well worth it.


<ul id="twitter_update_list"> </ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript">
function filterCallback(twitter_json) {
var tweets = [];
for(var i in twitter_json) {
if(twitter_json[i].in_reply_to_user_id == null) {
tweets[tweets.length] = twitter_json[i];
}
if(tweets.length==5) break;}
twitterCallback2(tweets);
}
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME-GOES-HERE.json?callback=filterCallback&count=5"></script>

Don’t forget to change your username where it says USERNAME-GOES-HERE.

Advertisements