Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Display recent/latest tweets on website using asp.net

Apr 3, 2012
Introduction:

In this article I will explain how to show latest or recent tweets on website using JQuery in asp.net.


Description:
  
In previous post I explained many articles relating to JQuery. Now in this article I will explain how to display or show recent tweets on website using JQuery in asp.net. In many websites we will be able to see the tweet widget and that contains recent tweets. After seen that twitter widget I decided to write a post to display latest tweets on our website using JQuery in asp.net.


First open Visual Studio and create new website after that write following code in your aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Display Recent or latest Tweets on website in asp.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="twitter.js" type="text/javascript"></script>
<style type="text/css">
body {
font: 12px/16px normal Arial, Helvetica, sans-serif;
color: #666;
}
#latest_tweet {
color: #222222;
display: inline;
float: left;
font-size: 10px;
font-weight: normal;
line-height: 13px;
text-align: left;
width: 350px;
}
#latest_tweet small, #latest_tweet a {
color: #D1580D;
text-decoration: none;

}
.loading {
background: url('ajax-loader.gif') center no-repeat;
height: 60px;
}
.rowbackground
{
background-color:#DC5807;
color:White;
font-weight:bold;
text-align:center;
height:30px;  
}
</style>
</head>
<body>
<table style="border: 2px solid #DC5807">
<tr class="rowbackground">
<td>Aspdotnet-Suresh.com on Twitter</td>
</tr>
<tr>
<td>
<div id="latest_tweet" style=" height:300px; overflow:scroll; overflow-x:hidden">
<div class="loading"></div>
</div>
</td>
</tr>
<tr class="rowbackground">
<td ><a href="http://twitter.com/aspdotnetsuresh" style="color:White">Follow@aspdotnetsuresh</a></td>
</tr>
</table>
</body>
</html>
If you observe above code in header section I added some of script files and css classes by using those files we will display latest tweets on our website. You can get those files by downloading attached sample.

Here I used my twitter account and I selected 10 recent tweets need to display on website. If you want to display latest tweets of your account and customized count of tweets just open “twitter.js” file and change last lines of code in document.ready function those are

$(document).ready(function() {
var username = 'aspdotnetsuresh';
$.getScript('http://twitter.com/statuses/user_timeline/' + username + '.json?callback=twitterCallback2&count=10');
});
Here you can give your twitter username and change count of latest tweets based on your requirement.

After completion of aspx page design and your code modifications just run your application and check your tweets widget that would be like below demo

Demo

 Download sample code attached



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

10 comments :

Anonymous said...

please provide some good example related to tree view binding with data-set having 3 or more tables..thanks in advance.

Anonymous said...

great ..Thnaks

Unknown said...
This comment has been removed by the author.
Anonymous said...

your code not working correctly??????????

Anonymous said...

Not working corectly..........

Dot Net Swimmer said...

Hi Currently the above code is not working.. please have a look on it

Anonymous said...

it is not working properly......

jishnu chandran said...

Not working ,..
Check it...

Unknown said...

i have downloaded the code and tried the same without making any change in the code.but it is not working and not giving single feed item.. Please suggest me the solution ASAP.

Unknown said...

Geting below error
0x800a1391 - JavaScript runtime error: '$' is undefined

$(document).ready(function () {

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.