Friday, November 5, 2010

Welcome to Script Diaries


Welcome to the one place where you can probably find any kind of web 2, javascript, php or perl tutorial. From dynamic html to cascading style sheets to AJAX techniques. We have it all. Learn how to create rich and interactive widgets using the latest APIs and web 2 technology. Easy DIY widgets you can do it yourself and learn javascript at the same time







DIY Widgets
Learn to design and create amazing widgets

Search Script Diaries and sister sites Google

Thursday, November 5, 2009

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

Lesson 3 - Search Widget that Displays Images and Related Keywords

Summary
This is lesson 3 of 4. In this lesson we will use Yahoo's image search API to display images in a circle. We will then use Yahoo's "context" API to extract relevant keywords. This widget makes two seperate calles to the Yahoo API. This is done by loading itself into an "iframe" and then using the "parent" object like parent.callAFunction() to deliver the results. Back to the Lesson Index.


Explanation
First let us have a quick look at the code.









You can download a zipped version of all the lessons here


Back to the Lesson Index