Its been sometime. Work caught up (at last). I got to work on some interesting things which made me feel that the libraries that those site use( the Java Script ones) must be optimized for performance more than anything. If the JavaScript you use slows down the application, the library is useless. I continue with some of the other libraries, in the search for the perfect one ( or a hybrid).
Bajax : Bajax is a small and simple JavaScript library to put Ajax driven content in your pages. When I heard about this library, I went on to search for this. The library is maintained by the BerliOS group. I did not see any kind of documentation, so I had to get hold of the READ ME. The library turned out to be very minimal. Just some functions where by you could call a page with arguments, insert some html to elements, insert whole pages to elements and get html from elements. That is it. :)
Behaviour : This library is an interesting one. I have always wondered how nice it would have been if I could assign some characteristics to some elements according to their class names. Like I want all elements which are of class 'fancy Hover' to have a border outline when hovered on. In this case I would have to write the onMouseOver and OnMouseOut methods for each element. This would clutter my code and make the behaviour and structure tightly bounded. Behaviour comes to the rescue in this case. By writing small lines of code and registering a behaviour we could assign elements of certain classes (or even elements of certain ids) to certain methods on certain events. This works with libraries like script.aculo.us to provide some snazzy effects as well. Some examples also give you the usefulness of this library along with its interactions with other libraries. This library gives me the option of adding behaviours to a set of elements at the same time and that, I feel, is very powerful.
Moo.FX : The Mo.Fx library is a lightweight JavaScript effects library written using prototype. The library is just 3Kb !! Even the tag line given is 'Size does matter'. When I went through the library I was amazed at what such a small library could do. Net Vibes also uses Moo.FX I suppose and the site itself testifies the abilities of this library. It has many stuff that a typical Web 2.0 site may require (accordions, Effects, Tips, Groups, Drag and Drop .. ). I had earlier used Dojo as a library for my sample application, but the library was so vast that it stalled my application more than often. I guess Moo.FX gives you the right amount of stuff to get started with and build a nice website with all those great Effects and some CSS support. I also found the Hash.Cookie feature (used to store values like the co ordinates of a drag gable element) very useful ( at least for sites like net vibes). Theming with Assets.CSS, loading images dynamically with Assets.Images, Chain Events and make them execute in a periodic fashion, Ajax calling and updating along with periodic access to those calls, Effects such as morph, transitions, scroll, slide and various other elements styles ( say you wanted the background to change very slowly, you will create an Fx object, associate it with a certain set of elements, and call the effect with the start and end states to get the effect). It also has sorters (which I think are the highlight of scriptaculous). Now the main difference that I see with the tremendous Dojo library is the amount of additional widgets (like context pane, tab containers, pop ups etc) that Dojo has. These kind of stuff can be built using JavaScript along with some help from Moo.Fx and Scriptaculous, but the maintainability will be a crucial point I feel here. If these kinds of widgets are available (or made into a simple extended library), I feel Dojo will feel to have some sort of competition.
ByteFx : Its just another library which gives you an accordion, some effects and transitions. Nothing special (but I have not gone through the code).
wz_dragdrop : Now this library just has the plain old drag and drop features and some other features like re size, clone and some effects. This library has a limited number of features but is enough for some starter sites and applications.
SACK : Simple AJAX Code Kit is a small library used to facilitate AJAX calls. The file is small and the a demo comes along with the package. The routines to call when loading, loaded, complete etc could be specified just as we do in a normal AJAX call. The library just gives us a better organized way to do it.
OverLIB : A small JavaScript library if you want only tool tips to appear and nothing else !!!
Sarissa : This library is very interesting. Well the techie guys will know that httpxmlrequest gives you an XML file after access. Now if you were to traverse through this file (validate, find nodes etc), it would be great pain. Sarissa is here to facilitate this. Its the same as you use DOM parsers in Java. We create a DOM object then add/ delete/ traverse what we need using methods available. I like this in a way that I had used a lot of parsing for my previous project and became quite good at parsing and stuff (even used TagSoup parser to make valid XML documents out of Html documents). The library as such seems small, but the functionalities are very helpful. I would definitely use this library if any requirement comes into picture. Some tutorials and starting points are also given. We could use xpath type access to get the nodes and manipulate them by adding attributes and tags. The cross browser acceptability is great (MS XML crap for windows and other XML Http stuff) and library deals with it well. Xlst stylesheet manipulation is also possible. We could do something like update a part of the DOM using the updateContentFromURI method after applying a style sheet to the resultant XML request. This I think is particularly useful as we could maintain a same structure to the site with just having style sheets for different request results.
Nifty Corners : Typically when I see a Web 2.0 powered site, I see that the design is great. There are real nice Ajax features, some great Effects at the right places and finally wonderful CSS combinations. The so called 'rounded corners' for the DOM elements are just as important as anything to make the web site look good. I have tried my lot to get libraries coexist so that I could use one for my effects and one for the rounded corners. But I was not successful at all. Then I went on to do the CSS way and sticked to it. Now this is one of those libraries that I used. Now this library actually tricks the user by adding some blocks of code with a specific margin space so that it seems that the edge is rounded. It adds 4 bold tags on the top and bottom of the element( say div with a specific id), which has specific classes of its own (from a linked css file called niftyCorners.css ) , when the JavaScript function Rounded is called (nifty.js). Nice trick eh? Well CSS 3 has now specified techniques where by we could specify the radius of the corner of elements so that they are rounded when displayed. Mozilla FireFox ans Safari 3 have adopted this (IE as always sucks) and they look great !!!
Plex : This is a nice little JavaScript library for GUI. It has components like menubar, tabbar, contentpane, trees, grids and title windows. The library seems to be fast and lightweight. The style of writing the components is similar to Dojo ( xml like coding). It has some AJAX support (pulling data from a xml or yaml and feeding it to the data grid maybe) and uses it well. Custom functions could be triggered on events too. Cross Browser functionality is ensured by this JavaScript library. It is said that client side xslt loading is supported for IE and FireFox. Its documentation also says that the components could save their states in sessions and thus potentially solving the 'back button' problem. Worth a look but I would go for better alternatives. :)
Monday, November 26, 2007
Thursday, November 8, 2007
The Helpers ... Part 1
Its just not that I tend to understand the wide world of the JavaScript libraries that are present (both as GPL and Commercial). I just wanted a comparison (need to browse to find out about these libraries and Stumble and Google helped me a lot with this). But why do we need these so called libraries? Of course we could manipulate the DOM using the native methods that JavaScript has and make our own js files. This would be in effect reinventing the wheel (just what we people who are trying to develop do not want). If somebody has done something good and effective, why not understand it, take a lesson from it and try to wrap something additional over it? Thats what these people (who have actually made these libraries ) have done. I will have some comparisons here (some of those libraries that i felt good using as a user and coding as a developer). So here we go ...
Prototype 1.6.0 : Its a library ( that is now used by many other libraries ) that facilitates the DOM access via JavaScript and the AJAX functionality. When I look at the documentation of this library, it reminds me of ruby. The syntax is similar and the constructs and more or less the same. The Class constructs are similar to Ruby's and there are mix ins too !! It concentrates on its Class structure where by you create Objects which is extend able. It has some utility methods by which you could access DOM elements ( say $ can be used for access elements with a specific id $('id') ). It has AJAX methods like updater (update contents according to the response), request ( give a request), responder ( set or unset certain listeners ), periodic updater (periodically call and update the element). Element object manipulations are present and there are many methods which facilitate the manipulation. Enumeration is another feature that is very strong with prototype. It allows enumerations (just as the each, collect methods in Ruby) and allows manipulations (anonymous pieces of code ) to be done on it. There are neat Event handlers in this library that can be used to track the events that happen on a particular event. The major methods that is used here is the observe, element and stop. It even kills the Microsoft IE memory leak problem. This is what Douglas Crockford has to say. This library has Form methods as well to get those form tags. For and AJAX call say we use Form.serilalize method to get the input fields and their corresponding values as url arguements. The bind concept ( It go me sometime to come into terms with this concept ) and its relief given by prototype by the Function helper. Insertion of html content after, before, top or btton of any element ( say a commenter .. ) is also done. A periodicalexecuter which is useful to say update a cricket score !! The Position utility which is used by libraries like script.aculo.us to position elements. Templates which can be used to substitute strings and stuff. It supports JSON too.
RICO 2.0 : A Open Source JavaScript library which has many AJAX powered features along with some great effects and components. It is also based on prototype. The effects are all things I see in the normal libraries. The ones which impressed me the most is the components features. It has such smooth UI features which closely resemble those Rich Internet Application created by Adobe Flex and Open Lazlo. The Live Grid and Accordion are two things that made me interested. This example shows how the Live Grid was used and it feels like its Flex. The weather example given in their webs site closely imitates the one originally developed in Open Lazlo ( which incidentally is one of my favorites ). In their site it has been tested for IE and Firefox and that the Drag and Drop feature does not work in Safari. Even the AJAX features does wok for Safari 2.0.3. Along with giving those Drag and Drop facilities it also provides some styling effects like rounding off the div so that it will not have sharp edges. Multiple objects may be updated as a part of the AJAX requests with RICO. This is one site which I found RICO to work very well. It provides the look and feel of a Flex application and runs faster that a Flex one ( Although this site loaded very slow for me. Dunno why !! ). Here is where I came across XOOPS as well ( Content Management System written in PHP and useful for social websites and corporate sites) and i will be exploring this in the near future. This Live Grid tutorial gives you a fair idea of what and how to do that access thing. The best part about this is that the Live Grid widget if connected to some database could be made to populate when the user scrolls the grid. This is an excellent feature and leads to better performance. There are tons of examples in this page and I suggest if interested view it.
MochiKit 1.4 - as they say it makes JavaScript suck a little bit less. Mochikit is a JavaScript library which stands alone. The primary contributor Bob Ippolito says that the library has taken the coding standards from python, objective-C etc. It has many cool features like logging, manipulating DOM elements, visual effects ( taken from script.aculo.us ), asynchronous server communication, functional programming, CSS manipulation, iteration and so on. The listening mechanism can be made use of (thought those concepts need some getting used to ) to make excellent Web 2.0 sites. Multiple elements could be configured to listen to a response ( say a JavaScript Array response could be traversed using evalJSON, and could initiate other Asynchronous calls to the server) and this is done through the slot/ signal technique that it uses. This article gives you an excellent insight into the core features that this library has. Turbo Gears is another framework built in python that uses this library. I am yet to go through this and try it out !! The main site has example where a sortable table is populated with contents using Asynchronous requests in both the xml and JSON format. It has both a development version and deployment version. The main categories are Async (asynchronous access), Base (Functional Programming stuff like map and filter and comparators), DOM ( create DOM elements like Tables to be inserted into nodes ), Drag and Drop, Color, DateTime, Format (those string operations go here ), Iterators ( some high end iterators), Log and Logging Pane ( the great logging features that this library has ), Selector ( access to the CSS elements using $$ ), Signal ( add event listener), Style ( style manipulation ), Sortable ( sortable drag and drop lists just as in script.aculo.us ), Visual ( visual effects like rounding of edges, fade, toggle etc). As it is python oriented I found this library hard to grasp though.
Dojo 1.0 : Dojo is a wonderful library that has great features and is preferred by most developers. Django and Web Works have integrated Dojo with their bundle asserting this fact. The biggest plus point that I see with Dojo is its wdiget construction helpers and components. I went through some of the docs that they have and was immediately impressed. They have widgets like Text Boxes, Check Boxes, Date Pickers etc which when associated with a theme will work as in a Rich Internet Application. It is said that the DOM level access is not that much but the UI features are awesome. A demo mail application and a Fish Eye Application are given in their site. When the package is downloaded, we also get a demo page which highlights all the UI features of Dojo. The cross browser features ( accessibility of DOM level 3 inside IE ) has been very tactically done by Dojo thus making event handling excellent. It gives the essential validations, tool tips, accordions, split panes, dividers, In place editors and whole lots of features. After looking at this one I feel I have wasted a lot of time with other libraries when I had a superb one right under my nose. After I went through the documents, I used it in my dummy application and to tell the least, the application rocks now !!
to be continued ..
Prototype 1.6.0 : Its a library ( that is now used by many other libraries ) that facilitates the DOM access via JavaScript and the AJAX functionality. When I look at the documentation of this library, it reminds me of ruby. The syntax is similar and the constructs and more or less the same. The Class constructs are similar to Ruby's and there are mix ins too !! It concentrates on its Class structure where by you create Objects which is extend able. It has some utility methods by which you could access DOM elements ( say $ can be used for access elements with a specific id $('id') ). It has AJAX methods like updater (update contents according to the response), request ( give a request), responder ( set or unset certain listeners ), periodic updater (periodically call and update the element). Element object manipulations are present and there are many methods which facilitate the manipulation. Enumeration is another feature that is very strong with prototype. It allows enumerations (just as the each, collect methods in Ruby) and allows manipulations (anonymous pieces of code ) to be done on it. There are neat Event handlers in this library that can be used to track the events that happen on a particular event. The major methods that is used here is the observe, element and stop. It even kills the Microsoft IE memory leak problem. This is what Douglas Crockford has to say. This library has Form methods as well to get those form tags. For and AJAX call say we use Form.serilalize method to get the input fields and their corresponding values as url arguements. The bind concept ( It go me sometime to come into terms with this concept ) and its relief given by prototype by the Function helper. Insertion of html content after, before, top or btton of any element ( say a commenter .. ) is also done. A periodicalexecuter which is useful to say update a cricket score !! The Position utility which is used by libraries like script.aculo.us to position elements. Templates which can be used to substitute strings and stuff. It supports JSON too.
RICO 2.0 : A Open Source JavaScript library which has many AJAX powered features along with some great effects and components. It is also based on prototype. The effects are all things I see in the normal libraries. The ones which impressed me the most is the components features. It has such smooth UI features which closely resemble those Rich Internet Application created by Adobe Flex and Open Lazlo. The Live Grid and Accordion are two things that made me interested. This example shows how the Live Grid was used and it feels like its Flex. The weather example given in their webs site closely imitates the one originally developed in Open Lazlo ( which incidentally is one of my favorites ). In their site it has been tested for IE and Firefox and that the Drag and Drop feature does not work in Safari. Even the AJAX features does wok for Safari 2.0.3. Along with giving those Drag and Drop facilities it also provides some styling effects like rounding off the div so that it will not have sharp edges. Multiple objects may be updated as a part of the AJAX requests with RICO. This is one site which I found RICO to work very well. It provides the look and feel of a Flex application and runs faster that a Flex one ( Although this site loaded very slow for me. Dunno why !! ). Here is where I came across XOOPS as well ( Content Management System written in PHP and useful for social websites and corporate sites) and i will be exploring this in the near future. This Live Grid tutorial gives you a fair idea of what and how to do that access thing. The best part about this is that the Live Grid widget if connected to some database could be made to populate when the user scrolls the grid. This is an excellent feature and leads to better performance. There are tons of examples in this page and I suggest if interested view it.
MochiKit 1.4 - as they say it makes JavaScript suck a little bit less. Mochikit is a JavaScript library which stands alone. The primary contributor Bob Ippolito says that the library has taken the coding standards from python, objective-C etc. It has many cool features like logging, manipulating DOM elements, visual effects ( taken from script.aculo.us ), asynchronous server communication, functional programming, CSS manipulation, iteration and so on. The listening mechanism can be made use of (thought those concepts need some getting used to ) to make excellent Web 2.0 sites. Multiple elements could be configured to listen to a response ( say a JavaScript Array response could be traversed using evalJSON, and could initiate other Asynchronous calls to the server) and this is done through the slot/ signal technique that it uses. This article gives you an excellent insight into the core features that this library has. Turbo Gears is another framework built in python that uses this library. I am yet to go through this and try it out !! The main site has example where a sortable table is populated with contents using Asynchronous requests in both the xml and JSON format. It has both a development version and deployment version. The main categories are Async (asynchronous access), Base (Functional Programming stuff like map and filter and comparators), DOM ( create DOM elements like Tables to be inserted into nodes ), Drag and Drop, Color, DateTime, Format (those string operations go here ), Iterators ( some high end iterators), Log and Logging Pane ( the great logging features that this library has ), Selector ( access to the CSS elements using $$ ), Signal ( add event listener), Style ( style manipulation ), Sortable ( sortable drag and drop lists just as in script.aculo.us ), Visual ( visual effects like rounding of edges, fade, toggle etc). As it is python oriented I found this library hard to grasp though.
Dojo 1.0 : Dojo is a wonderful library that has great features and is preferred by most developers. Django and Web Works have integrated Dojo with their bundle asserting this fact. The biggest plus point that I see with Dojo is its wdiget construction helpers and components. I went through some of the docs that they have and was immediately impressed. They have widgets like Text Boxes, Check Boxes, Date Pickers etc which when associated with a theme will work as in a Rich Internet Application. It is said that the DOM level access is not that much but the UI features are awesome. A demo mail application and a Fish Eye Application are given in their site. When the package is downloaded, we also get a demo page which highlights all the UI features of Dojo. The cross browser features ( accessibility of DOM level 3 inside IE ) has been very tactically done by Dojo thus making event handling excellent. It gives the essential validations, tool tips, accordions, split panes, dividers, In place editors and whole lots of features. After looking at this one I feel I have wasted a lot of time with other libraries when I had a superb one right under my nose. After I went through the documents, I used it in my dummy application and to tell the least, the application rocks now !!
to be continued ..
Tuesday, November 6, 2007
The Widget Way !!!
I am a great fan of the Web 2.0 way of rendering its pages. The special effects, the sliding of windows, the drag and drop, the dynamic tabs, the user persona and the speed and effectiveness of the website. The feed capabilities and the user interaction get these sites up and running and as a result we see over a million users using these sites. I was asked to evaluate two of the best sites which have one of the best interfaces I have seen (Not forgetting those sites with huge flash content which makes the loading extremely slow and makes me want to close even before it opens up). I am talking about Netvibes and iGoogle. I will be talking about them and will try to compare them both as a user and as a developer. I will start as a user and then gradually go into becoming some what of a developer.
Both the interfaces are great. They are a treat to watch and in functionality they are the same. The guy who ever thought of the idea of having bulk data from all those pages you browse into one single page must have some imagination. The widget concept is the root here and the interaction between the widgets (drag and drop) is very fast. But I like the Netvibes interface better. They have many of the gadget and we could even add our own custom code (html) to make certain widgets. I feel Netvibes uses those nifty AJAX functionalities the most. Even when I need to choose another widget to add, iGoogle transfers me to another page and then it lets me add it. But with Netvibes I add it right from my own screen using the javascript libraries that it uses. Netvibes has more themes and stuff and those combinations are deadly. The time it takes to load is kind of the same. Netvibes even has the facilities where by you could add widgets or tabs. You could also go to 'Universes' (branded pages with widgets) and explore them.
Netvibes even has a search facility where by you could search within the widgets you added for a term. The search results loads up in the tabs (after filtering) and once you close the search it comes back to normal (and that too in very high speeds). Adding of feeds (xml or opml) is simple in Netvibes and iGoogle. Netvibes gives us a more of a view of the description as a tool tip where as iGoogle gives it as a clickable show all image. Of course Google has a Single Sign On facility and they have much more pages which have buttons telling you to add the content to your iGoogle, but for the sheer look and feel I will go with Netvibes.
Both these cool sites having tabbing facilities available (the AJAX way). These tabs are loaded when required and not before. The tabs Netvibes provide have more functionalities for the user (adding it to the tabs list, adding an icon to the tab and other stuff). Application could also be configured in individual tabs (I have the whole meebo application in one tab) for Netvibes. Although this is just adding the page url to the widget content, its effective. The one thing that I saw different for iGoogle is that the tabs could have its own look and feel. I don't see this as a shortcoming for Netvibes but as a special feature for iGoogle.
Now the developers view. Netvibes uses moo.fx for its neat Javascript features where as iGoogle uses its own libraries along with yui. The architectural basis is the same. They have a main frame for each widget and a unique id for the widget( may be a global variable in Javascript). They keep on incrementing this for each widget so that they have a unique id in that page. The widget is a combination of divs, spans, images and iframes. The main widget frame will have a header frame which holds the header information for the widget and the content which holds the iframe which has all the contents. This gives us the additional advantage that the widget content could be a stand alone application having its own logic and still be embedded inside the widget as the container is an iframe. The buttons you see (add to iGoogle and stuff) adds this content url to the base site (after you log in) and then you get to see the application inside an iframe.
The drag and drop are all from the moo.fx library (Netvibes). Alternatively they could also have used script.aculo.us for their effects. They have pretty good tabs facilities which I guess script.aculo.us does not have ready made. I guess the code that iGoogle uses may be python based ( I honestly dont know ) but have not sure what Netvibes uses.
The reason for my sudden interest (or may I say incidental) is that I was trying to mimic this feature in a my own site. Now I used script.aculo.us and the base was set up within 6 hours using Ruby On Rails. ROR has great support for those AJAX and Javascript features that script.aculo.us provides and I really dont need to write a single line of code. Aptana IDE is the IDE of my choice when it comes to Ruby On Rails. The auto complete feature is not complete in this IDE but it's better than nothing. There are tons of libraries that I intend to use (tags, ferret and other plugins) and I am looking through these stuff as of now. Hope I will end up a better developer with this !!!
Both the interfaces are great. They are a treat to watch and in functionality they are the same. The guy who ever thought of the idea of having bulk data from all those pages you browse into one single page must have some imagination. The widget concept is the root here and the interaction between the widgets (drag and drop) is very fast. But I like the Netvibes interface better. They have many of the gadget and we could even add our own custom code (html) to make certain widgets. I feel Netvibes uses those nifty AJAX functionalities the most. Even when I need to choose another widget to add, iGoogle transfers me to another page and then it lets me add it. But with Netvibes I add it right from my own screen using the javascript libraries that it uses. Netvibes has more themes and stuff and those combinations are deadly. The time it takes to load is kind of the same. Netvibes even has the facilities where by you could add widgets or tabs. You could also go to 'Universes' (branded pages with widgets) and explore them.
Netvibes even has a search facility where by you could search within the widgets you added for a term. The search results loads up in the tabs (after filtering) and once you close the search it comes back to normal (and that too in very high speeds). Adding of feeds (xml or opml) is simple in Netvibes and iGoogle. Netvibes gives us a more of a view of the description as a tool tip where as iGoogle gives it as a clickable show all image. Of course Google has a Single Sign On facility and they have much more pages which have buttons telling you to add the content to your iGoogle, but for the sheer look and feel I will go with Netvibes.
Both these cool sites having tabbing facilities available (the AJAX way). These tabs are loaded when required and not before. The tabs Netvibes provide have more functionalities for the user (adding it to the tabs list, adding an icon to the tab and other stuff). Application could also be configured in individual tabs (I have the whole meebo application in one tab) for Netvibes. Although this is just adding the page url to the widget content, its effective. The one thing that I saw different for iGoogle is that the tabs could have its own look and feel. I don't see this as a shortcoming for Netvibes but as a special feature for iGoogle.
Now the developers view. Netvibes uses moo.fx for its neat Javascript features where as iGoogle uses its own libraries along with yui. The architectural basis is the same. They have a main frame for each widget and a unique id for the widget( may be a global variable in Javascript). They keep on incrementing this for each widget so that they have a unique id in that page. The widget is a combination of divs, spans, images and iframes. The main widget frame will have a header frame which holds the header information for the widget and the content which holds the iframe which has all the contents. This gives us the additional advantage that the widget content could be a stand alone application having its own logic and still be embedded inside the widget as the container is an iframe. The buttons you see (add to iGoogle and stuff) adds this content url to the base site (after you log in) and then you get to see the application inside an iframe.
The drag and drop are all from the moo.fx library (Netvibes). Alternatively they could also have used script.aculo.us for their effects. They have pretty good tabs facilities which I guess script.aculo.us does not have ready made. I guess the code that iGoogle uses may be python based ( I honestly dont know ) but have not sure what Netvibes uses.
The reason for my sudden interest (or may I say incidental) is that I was trying to mimic this feature in a my own site. Now I used script.aculo.us and the base was set up within 6 hours using Ruby On Rails. ROR has great support for those AJAX and Javascript features that script.aculo.us provides and I really dont need to write a single line of code. Aptana IDE is the IDE of my choice when it comes to Ruby On Rails. The auto complete feature is not complete in this IDE but it's better than nothing. There are tons of libraries that I intend to use (tags, ferret and other plugins) and I am looking through these stuff as of now. Hope I will end up a better developer with this !!!
Monday, November 5, 2007
Small Task
These days I am trying to understand how the whole connectivity thing works. How do you post your contents (which may be normal HTML pages or flash widgets) to your favorite sites? The answer is pretty simple. You host your contents some where else and give the code which accesses these hosted files in your favorite site(say blogger). But how do you add external content to some site which is intended to give you only their stuff?? Blogger does this but allowing the used to add scripts and HTML content as page elements. I was given the task of finding how I can post something (say a flash file -swf) to facebook.
At first I thought of the task to be a simple one. Go to some site which has used the actual add to Facebook button and use http header and trackers to get the URL that is used to add contents to facebook. As my content was a widget, I decided to look through widgetbox. The site is a great site where you could actually make widgets (even write custom code) , save them and even add these widgets to your facebook account. The URL too was simple. It used the sharer.php page of facebook.
Now when i actually access the page I see a input box where in I am supposed to add my URL. Adding the widget.com URL worked fine, but when I added my flash video (hosted at my side), I got just the URL and no flash video. I started looking at the part where it shows a confirmation and saw many hidden variables. For the widgetbox URL these hidden variables were filled. But how does it do that ?? The only difference I saw was the meta data that was present in the widgetbox html. After googling some time I got the page from facebook (yeah I am a dumbass) which said to use the meta tags to populate the hidden fields. It so happens that the guys in facebook are so smart that they get the meta tags from the inputted html page and according to certain specified tags they conclude the content of the page and render it accordingly making the shared page either a normal html page, a video clipping or an audio clipping. The various options are showed in this page.
It turns out that getting the meta tags is not great a deal either. PHP4 and later we get this information using get_meta_tags(URL) which returns you a map of the tags(Facebook seems to be php code :) ). They then may be populating the hidden fields which then ets submitted to the actual page. Nice and effective trick I say !! I don't think the same goes for all those social websites but I am yet to explore them (God bless ).
During this exploration I stumbled upon some thing that may be useful for the future too. Its called Open Social and its from our very own Google. It provides a set of APIs for social websites across multiple websites. As I understand you can write your own widgets which may do things for you in your account (like adding a scrap in orkut ) but its embeddable. Many websites implement these APIs and in the near future we may have a set of APIs which are common for all those social websites. I had to join in this great venture and I have got my approval. Yet to start with programming the orkut sandbox though !!
That's all for today. And see you the next time I have something to write !!! Ciao !
Subscribe to:
Posts (Atom)