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.