Creating a custom Twitter feed of search results for a specific term

Here are the codes you need to create a custom Twitter feed that displays search results for a specific term or user.

First, let’s create the Javascript file that makes it all work.

Copy and paste this code into your favorite text editor:

$(document).ready(function() {
    // json call to twitter to request tweets containing our keyword, in this case 

'thelibzter'
    $.getJSON("http://search.twitter.com/search.json?q=<span style="color: #ff0000;">thelibzter</span>&callback=?", function(data) 

{
        // loop around the result
        $.each(data.results, function() {
            var text = this.text;
    
            if(text.charAt(0) != '@') {
                // construct tweet and add append to our #tweets div
                var tweet = $("<div></div>").addClass('tweet').html(text);
                // analyse our tweet text and turn urls into working links, hash 

tags into search links, and @replies into profile links.
                tweet.html('<div>' +
                    tweet.html()
                    .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:

[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
                    .replace(/(^|\s)#(\w+)/g,'$1<a 

href="http://search.twitter.com/search?q=%23$2">#$2</a>')
                    .replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/

$2">@$2</a>')
                    + '<br /><a href="http://www.twitter.com/' + 

this.from_user + '/status/' + this.id_str + '" target="_blank">' + $.timeSinceTweet

(this.created_at) + '</a></div>'
                    )
                    .prepend('<a href="http://www.twitter.com/' + 

this.from_user + '" target="_blank"><img src="' + this.profile_image_url + '" width="48" 

height="48" /></a>')
                    .appendTo('#tweets')
                    .fadeIn();
            }
        });
    });
});

(function($) {
    $.timeSinceTweet = function(time) {
        var date = new Date(time);
        var diff = ((new Date()).getTime() - date.getTime()) / 1000;
        var day_diff = Math.floor(diff / 86400);
        
        if (day_diff < 0 || day_diff >= 31 || isNaN(day_diff)) {
            return "View tweet";
        }
        
        if(day_diff == 0) {
            if(diff < 60) {
                return Math.ceil(diff) + " seconds ago";
            }
            else if(diff < 120) {
                return "1 minute ago";
            }
            else if(diff < 3600) {
                return Math.floor( diff / 60 ) + " minutes ago";
            }
            else if(diff < 7200) {
                return "1 hour ago";
            }
            else if(diff < 86400) {
                return Math.floor( diff / 3600 ) + " hours ago";
            }
        }
        
        if(day_diff == 1) {
            return "Yesterday";
        }
        else if(day_diff < 7) {
            return day_diff + " days ago";
        }
        else if(day_diff < 31) {
            return Math.ceil( day_diff / 7 ) + " weeks ago";
        }
        else {
            return "View Tweet";
        }    
    }
})(jQuery);

 

You will want to change the words highlighted in red above (thelibzter) to whatever search term you want to use.

Save the file as main.js and upload it to your server.

Now, add this line of code to the section of your website:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>

Make sure that the path to main.js is correct.

You will want to style the Twitter feed to match the design of your web page. Add this code to your stylesheet and feel free to edit it to make the Twitter display the way you want:

#container { width: 500px; margin: 0 auto; } 
#tweets .tweet {
  padding: 10px 20px;
  font-size: 15px;
  position: relative;
  border-bottom: 1px dashed #ededed;
  overflow: hidden;
}
#tweets .tweet img { margin-right: 12px; float: left; }
#tweets .tweet .content { width: 400px; float:  left; }
#tweets .tweet .content a.view { font-size: 10px; }

Now, simply add this code to your web page wherever you want the Twitter feed to appear:

<div id="container">
  <h1>Search results for "TheLibzter"</h1>
  <div id="tweets"></div>
</div>

And that’s it! Let me know if you run into any issues or have any questions.

You can find instructions and codes to use to create your own custom Twitter feed here – creating a custom Twitter widget for your website.

You can also find several custom Twitter feeds that I designed and are available for you to use here – custom Twitter feeds for your website.

Meet the author

My name is Libby Fisher and I am an experienced freelance web developer based in Seattle WA. I am passionate about developing websites that are both beautiful AND easily usable because I believe that the most effective websites are a perfect balance of aesthetic appeal and usability/intuitiveness.

8 Comments

Leave a response

*

  1. shannon says:

    Hey,

    Thanks for this code. I keep getting an error Error: $.timeSinceTweet is not a function.

    Any help would be great. Thanks

  2. Neo says:

    Nice work ! but are there any auto update ? to be like timeline ??

    many Thanks !!

    • Libby Fisher says:

      I believe it does auto-update, although maybe only on page refresh? I dont know off the top of my head how you would make it update without refreshing the page, sorry.

      Thanks for commenting!

      ~Libby

  3. Jeremy Wight says:

    Great code. Thanks!… One question though. How do I limit the number of tweets to display? I don’t see a “count” function anywhere?

    • Libby Fisher says:

      Hi Jeremy,

      Off the top of my head, I am not sure about the answer to your question to be honest. It also appears that my previously-working feed (linked to in aan above comment) is no longer working and I am not sure if Twitter has made some changes which is why the feed doesnt work any more or what.

      Thanks, and sorry I cant be of more help at this time.

      ~Libby

'