search
top

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=thelibzter&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 <head> 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.

Related Posts:

6 Responses to “Creating a custom Twitter feed of search results for a specific term”

  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

Trackbacks/Pingbacks

  1. Custom Twitter feeds for your website | The Web Design Blog of TheLibzter.com - [...] You can also find the codes and instructions on how to create a Twitter feed of the search results …
  2. 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 - [...] and several examples of pre-styled custom Twitter feeds at blog.thelibzter.com, and instructions on how to create a custom Twitter …

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

top