How to implement twitter search in asp.net

In this post,I will show you how to implement twitter search in asp.net.In this project,I am using following things




<a href="http://search.twitter.com/search.json" target="_blank">Twitter search Api</a>
<a href="http://jquery.com/" target="_blank">Jquery</a>
<a href="http://handlebarsjs.com/" target="_blank">Handlebars jquery template</a>
<%@ 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

1 comment:

  1. You actually make it seem so easy with your presentation but I find this topic to be really something that I think I would never understand. It seems too complicated and very broad for me. I'm looking forward for your next post, I’ll try to get the hang of it.
    usb drive recovery

    ReplyDelete