Basics of making Web Widgets with Javascript?

Hello All,

I'm looking for information/tutorials/guides about coding web widgets/embedded badges using Javascript.

Take for example widgets like the Fleck (http://fleck.com/widget.php) or Wholinked (http://wholinked.com/get.htm).

Their embedding code is just 1 line indicating a Javascript source file.
How it has been coded in the background so that the widget content is included in the page, once the script is loaded?

for example -> <script TYPE="text/javascript" language="javascript" SRC="http://wholinked.com/wholinked.js"></script>


Thanks :)

That isn't widget-specific code, but only specifies that the html page should load code from another file. It's pretty much analogous to "#include" of C and C++, "import" of Java, and "using" of C#. There is one catch though. Since Javascript doesn't have the requirement that everything must be enclosed in a class declaration, if you have actual code and variable declarations in your .js file, they will be executed as soon as the page is loaded.

Hi Cabillo - I'm the guy behind Wholinked. Saw this thread in our referrers.

Here is an example from our widget layout. This is really in php but we use htaccess to convert it to a .js so it will render in the browser as o00dan00o says. In this case the .js is telling the browser to render the HTML between the parentheses:

document.write('</UL></DIV><DIV CLASS="footerwhlk">');
document.write('<A HREF="#" onMouseOver="return overlay(this,'subcontent')"><IMG SRC="http://wholinked.com/images/chiclet.gif" HEIGHT="13" WIDTH="78" BORDER="0" STYLE="BORDER:none;"></a>');
document.write('<IMG STYLE="border:0px" SRC="http://wholinked.com/tracker" HEIGHT="1" WIDTH="1" BORDER="0">');
document.write('</DIV>');

document.write('<DIV CLASS="popupwhlk" ID="subcontent">');
document.write('<A STYLE="TEXT-DECORATION:none" HREF="http://wholinked.com/frank.1.php" TARGET="top">Edit</a> | ');
document.write('<A STYLE="TEXT-DECORATION:none" HREF="http://wholinked.com">Get it</A> | ');
document.write('<A STYLE="TEXT-DECORATION:none" HREF="#" onMouseOver="overlayclose('subcontent'); return false">Close</a>');
document.write('</DIV>');

I hope this helps you!