Introduction:
In this article I will explain how to show latest or recent tweets on website using JQuery in asp.net.
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
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 Email
|
|||
|
|
5 comments :
please provide some good example related to tree view binding with data-set having 3 or more tables..thanks in advance.
great ..Thnaks
d
your code not working correctly??????????