Bandit Design » Our Design Our Portfolio Contact Us
Tutorials TumbleLog Our Thoughts
Quite often at Bandit Design while we're working on your project, we'll stumble upon interesting or humourous things -- so we thought why not share them with the world!
RSS iPhone Random Archive « Home

Bandit Design

This is a TumbleLog authored at the desks of Bandit Design. We're a small web and graphic design studio based in Wellington, New Zealand.

Visit Bandit Design ยป

5 years ago

Selective Twitter Javascript Badge

Ever wanted to only show certain Twitter messages on your website? Hate all those geeky ones turning up on your personal site?

Then use my Javascript badge to pick out your latest tweet(s) featuring a specified hashtag (ie: #fb) using a Yahoo Pipe I’ve set up.

The script:

  • Only includes tweets with the specified #tag included in them.
  • Automatically links any @replies and web addresses.
  • Reads from a Yahoo Pipe I’ve set up - so it’s fast, and cached.
  • I tried to make a dynamically generated script (similar to how Google Analytics works) which would avoid having to enter your variables into the Yahoo Pipes URI yourself, but there is a JSONP parsing bug. So I dunno.

You can view my script here:

How to install:

Simply set up your code as follows.

Put this ul element somewhere in your code where you want your Tweet(s) to turn up:

<ul id="twitter_update_list"></ul>

With this code at the bottom of your page, before your </body> tag:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

Note the above highlighted variables - you’ll need to replace these with your own. The first one is how many of your tweets you want to display (&count=1), the second one is your hashtag that you want to filter by (&hashtag=%23fb - %23 is equivalent of # - so %23fb is #fb), and the final one is your Twitter username (&username=Bandit).

By default the script strips out all #hashtags - if you want to only strip out your specified hashtag, include the following before the Yahoo Pipes (second) script tag above:

<script type="text/javascript">hashtag="fb";</script>


You can see it in use to the right. Hopefully this is helpful for someone!

It was made with love by James Nisbet - the resident webmantis at Bandit Design.

This script is also covered here.

2 notes