Tuesday, January 5, 2010

How to display latest tweet in your website using Javascript and twitter API

Sometimes you may be want to show your latest twitter tweets in your website or blog, most of the cases you are doing this by using widgets with limited customization facilities and showing ads or links to other websites, here is an easier way to achieve this using twitter API and javascript.
Step 1:
  1. "twitter_update_list">  
 
<br /><div id="twitter_update_list"><br /></div><br First, decide where about on your page you want your last tweet to display. Then paste following html code there.

Step 2:
Next you need to put these 2 lines of JavaScript below the code in step 1. On the 2nd line of code where it says prajeeshkk.json, you need to replace prajeeshkk with your twitter username.
  1. "text/javascript" src="http://twitter.com/javascripts/blogger.js">  
  2.   
  3. "text/javascript" src="http://twitter.com/statuses/user_timeline/prajeeshkk.json?callback=twitterCallback2&count=1">  
  4.   
<br /><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"><br /></script><br /><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/prajeeshkk.json?callback=twitterCallback2&count=1"><br /></script><br />Step 3:(Optional)
You can apply css and make the div displaying the tweet stylish.
  1. #twitter_update_list li {  
  2. list-style-type: none;  
  3. }  
  4. #twitter_update_list span a  
  5. {  
  6. display: inline;  
  7. color: #008080;  
  8. }  
  9. #twitter_update_list span a:hover  
  10. {  
  11. text-decoration: underline;  
  12. color: #66CCFF;  
  13. }  
  14. #twitter_update_list span  
  15. {  
  16. color: #000000;  
  17. background: white;  
  18. }  
<br />#twitter_update_list li {<br />list-style-type: none;<br />}<br />#twitter_update_list span a<br />{<br />display: inline;<br />color: #008080;<br />}<br />#twitter_update_list span a:hover<br />{<br />text-decoration: underline;<br />color: #66CCFF;<br />}<br />#twitter_update_list span<br />{<br />color: #000000;<br />background: white;<br />}<br See how my tweet design looks :

0 Please Share a Your Opinion.: