In this post,I will show you how to implement twitter search in asp.net.
In this project,I am using following things
Twitter search Api
Jquery
Handlebars jquery template
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Twitter.aspx.cs" Inherits="Twitter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
width: 600px;
margin: auto;
}
.tweets
{
list-style-type: none;
}
img
{
float: left;
padding-right: 1em;
}
a
{
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Handlebars.js" type="text/javascript"></script>
<script type="text/javascript">
var Twitter =
{
init: function () {
this.url = "http://search.twitter.com/search.json?q='" + $("#txtSearch").val() + "'&callback=?";
this.template = $("#template").html();
this.fetch();
},
fetch: function () {
var self = this;
$.getJSON(this.url, function (data) {
self.tweets = $.map(data.results, function (tweet) {
return {
author: tweet.from_user,
tweet: tweet.text,
thumb: tweet.profile_image_url,
url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
};
});
self.parse();
});
},
parse: function () {
var template = Handlebars.compile(this.template);
var container = $(".tweets");
container.append(template(this.tweets));
}
};
$(document).ready(function () {
$("#btnSearch").click(function () {
Twitter.init();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtSearch" /><br />
<input type="button" id="btnSearch" value="Search" />
<ul class="tweets">
<script type="text/x-handlebars-template" id="template">
{{#each this}}
<li>
<img src="{{thumb}}" alt="{{author}}"></img>
<p><a href="{{url}}"> {{tweet}} </a></p>
</li>
{{/each}}
</script>
</ul>
</div>
</form>
</body>
</html>
You can download the complete source code from below git location
code
No comments:
Post a Comment