Lesson 4 - Advanced Twitter Widget Using Multiple Calls

Summary
This is lesson 4 of 4. It is a fairly advanced widget. This uses the twitter API to extract statuses of a person, then uses the Yahoo context API to get the keywords, and finally displays the keywords higlighted by their frequency. This widget uses 10 "hidden" iframes to process all the context calls. View this Widget !!!

Explanation
First let us have a quick look at the code. This is the javascript code - The link to download a zipped version of this code is available at the end of the article.

1. /* scriptdiaries.blogspot.com 2. Righteous Ninja aka Ping Ching. 3. Free to use and modify.*/ 4. 5. Yahu_appid="D1hLPnrV34F73hl64SED5jFx36_1S4Y_b9lO1znHJ4wQW4Xam.cWfuy7_E22EQ"; 6. 7. var twittercurrentkeyval; 8. var twittercurrentalloc; 9. var twitterthreadlimit=10; 10. var Twt_twitterthreadsrunning=0; 11. 12. function Twt_twitterresultclass(){} 13. var Twt_twitterresults = new Array(); 14. var Twt_twitterkeywords = new Array(); 15. 16. var Twt_twitterresultslength=0; 17. var Twt_twitterresultspage=0; 18. var Twt_twitterresultscountonpage=0; 19. var Twt_twittercurrentcount=0; 20. 21. var twitterreulstset; 22. 23. function Twitter_CallUserSearch(user, context){ 24. if(context==null && user==null){ 25. return; 26. } 27. else if(user!=null){ 28. for(i=0;i<twitterthreadlimit;i++) 29. document.write("<iframe border=\"0\" id=\"twitterload"+i+"\" width=\"0px\" height=\"0px\"></iframe>"); 30. 31. document.write("<script type=\"text/javascript\" src=\"http://twitter.com/statuses/user_timeline.json?"+ 32. "user_id="+user+"&"+"callback=Twitter_ShowResults&count=50\"/>"); 33. } 34. else{ 35. document.write( 36. "<script type=\"text/javascript\" src=\"http://search.yahooapis.com/ContentAnalysisService/V1/termExtraction?"+ 37. "appid="+Yahu_appid+ 38. "&context="+context+ 39. "&output=json"+ 40. "&query="+"celebrity"+ 41. "&callback=parent.Yahu_ContextCallback\"/>"); 42. } 43. 44. } 45. 46. function Twitter_RemoveBadChars(s){ 47. s = s.replace(/[^a-zA-Z0-9]/g, " "); 48. s = s.replace(/ /g,"+"); 49. return s; 50. } 51. 52. function Twitter_ShowResults(rsp){ 53. twitterreulstset=rsp; 54. Twt_twitterresultslength=rsp.length; 55. for (i=0;i<rsp.length;i++){ 56. var rsi=rsp[i]; 57. tmpcls = new Twt_twitterresultclass(); 58. tmpcls.text = rsi.text; 59. tmpcls.date = rsi.created_at; 60. Twt_twitterresults.push(tmpcls); 61. } 62. Twt_CallThreads(); 63. 64. } 65. var twitterpercentcomplete="0"; 66. function Twt_CallThreads(){ 67. var i; 68. var x = Twt_twitterresultspage*twitterthreadlimit; 69. twitterpercentcomplete="<h2>"+x*100/Twt_twitterresultslength +" % please wait</h2>"; 70. if((Twt_twitterresultslength-x)<=0){ 71. Twt_Finished(); 72. return; 73. } 74. for(i=0 ; i<twitterthreadlimit && i < (Twt_twitterresultslength - x) ; i++){ 75. tmps = MyGetThisPage()+"?context="+escape(Twitter_RemoveBadChars(Twt_twitterresults[x+i].text)); 76. document.getElementById("twitterload"+i).src=tmps; 77. } 78. Twt_twitterresultscountonpage=i; 79. } 80. 81. function Twt_ThreadCallback(){} 82. 83. var twitterinterimresult; 84. function Yahu_ContextCallback(rsp){ 85. twitterinterimresult=""; 86. var wordcount; 87. for(i=0;i<rsp.ResultSet.Result.length;i++){ 88. keyword = rsp.ResultSet.Result[i] 89. twitterinterimresult+=keyword+" "; 90. if(Twt_twitterkeywords[keyword]==null){ 91. wordcount=1; 92. for(oldkeyword in Twt_twitterkeywords){ 93. if( oldkeyword.indexOf(keyword)>=0 ) 94. wordcount++; 95. else if (keyword.indexOf(oldkeyword)>=0) 96. Twt_twitterkeywords[oldkeyword]++; 97. else{} 98. } 99. Twt_twitterkeywords[keyword]=wordcount; 100. } 101. else 102. Twt_twitterkeywords[keyword]++; 103. } 104. document.getElementById("twitterresult").innerHTML=twitterpercentcomplete+" "+twitterinterimresult; 105. 106. if(--Twt_twitterresultscountonpage == 0){ 107. Twt_twitterresultspage++; 108. Twt_CallThreads(); 109. } 110. } 111. 112. function Twt_Finished(){ 113. var size; 114. var text=""; 115. var basesize=11; 116. for(keyword in Twt_twitterkeywords){ 117. size = Twt_twitterkeywords[keyword]>7?7:Twt_twitterkeywords[keyword]; 118. if(Twt_twitterkeywords[keyword]>1) 119. text+="<span style=\"font-size:"+(basesize+size*3)+"px\"><b>"+keyword+"</b></span>"; 120. else 121. text+="<span style=\"font-size:"+basesize+"\">"+keyword+"</span>"; 122. text+="   "; 123. } 124. document.getElementById("twitterresult").innerHTML=text; 125. } Hide line numbers

Now let us have a look at how you can embed this in a web page. The link to download a zipped version of this code is available at the end of the article.

1. <html> 2. <!-- 3. scriptdiaries.blogspot.com 4. Righteous Ninja aka Ping Ching. 5. Free to use and modify.--> 6. <head> 7. <script type="text/javascript" src="../help.js"></script> 8. <script type="text/javascript" src="twitterthoughts.js"></script> 9. </head> 10. <body> 11. 12. <table> 13. <tr> 14. <td> 15. <script> 16. if(MyGetUrlParams()['context']==null){ 17. document.write("<img src=\"kimkardashian.jpg\"/>"); 18. } 19. </script> 20. </td> 21. <td><div style="width:100%" id="twitterresult">Please wait...</div></td> 22. </tr> 23. </table> 24. 25. <script> 26. Twitter_CallUserSearch(MyGetUrlParams()['user'],MyGetUrlParams()['context']); 27. </script> 28. <script type="text/javascript"> 29. /**Dummy**/ 30. </script> 31. 32. 33. <form method="get"> 34. <input type="text" name="user" value="25365536"/> 35. <input type="submit" value="Get Thoughts"> 36. </form> 37. 38. paris hilton 24929621<br/> 39. kim kardashina 25365536<br/> 40. ashton kutcher 19058681<br/> 41. demi moore 19554706<br/> 42. 43. </body> 44. </html> Hide line numbers

You can download a zipped version of all the lessons here

Back to the Lesson Index