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 

    $.getJSON("<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>' +

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

                    .replace(/(^|\s)@(\w+)/g,'$1<a href="

                    + '<br /><a href="' + 

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

(this.created_at) + '</a></div>'
                    .prepend('<a href="' + 

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

height="48" /></a>')

(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";


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=""></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>

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

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."

  • shannon


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

    Any help would be great. Thanks

    • Libby Fisher

      Hi Shannon,

      Here is a working example of the feed of search results – If I were you, I would try saving that web page to your computer, and then editing the files as needed (changing the search term in main.js, etc.) and uploading them to your site. Please let me know if that works for you or not. Thank you!

  • Pingback: Custom Twitter feeds for your website | The Web Design Blog of

  • Pingback: Creating a custom Twitter feed: How to remove the time stamp from tweets « Icode4you – PHP, CSS, HTML, and Javascript coding tips, tricks, help, and more()

  • Neo

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

    many Thanks !!

    • Libby Fisher

      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!


  • Jeremy Wight

    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

      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.