iOS engineer who likes clean, simple designs and sans-serif.

Loading

Fetch Tweets with Twitter Hashtag

This week, I built a marketing landing page for GA + Pencils of Promise where GA would give a free month of curated online classes and donate $1 to Pencils of Promise. We wanted to build a wall of recognition for tweeting and sharing the cause.

I was looking for a script or jQuery plug-in to get me started on fetching tweet data from the Twitter API. I found this article on Stack Overflow to fetch the latest tweets on a hashtag.

This is the Javascript I ended up with, tweaked to get just the user handle and picture. I found it pretty easy to use. Add some CSS and you get a nice finished product:

Javascript

<script>
  $(function(){
    function getTweets(url) {
      $.getJSON(url,function(json){

        //setup an array to buffer output
        var output = [];

        //a for loop will perform faster when setup like this
        for (var i = 0, len = json.results.length; i < len; i++) {

           //instead of appending each result, add each to the buffer array
           output.push('<li><img src="' + json.results[i].profile_image_url + '" />' +'@'+ json.results[i].from_user + '</li>');
        }

        //now select the #results element only once and append all the output at once, then slide it into view
        $("#twitter-search").html(output.join('')).slideDown('slow');
      });
    }

    //set an interval to run the getTweets function (30,000 ms is 5 minutes), you can cancel the interval by calling clearInterval(timer);
    var timer = setInterval(getTweets, 30000);

    //run the getTweets function on document.ready
    getTweets('http://search.twitter.com/search.json?callback=?&q=%23GAitforward');
  });
</script>

End Product

Screenshot – Fetch latest tweets on hashtag from Twitter API

Leave a Comment