First off, you'll need to create a javascript file, accessible from 3rd party systems.  Typically you won't have to do anything for this – just make sure you can access the file from any browser and host with the http protocol.

1) The simple and easy (but limited) solution

So let's go ahead and create mywidget1.js, and tell it to output the string 'Hello World'.

document.write("hello world!");

Now, we'll write the code bit that will be included on the 3rd party sites:

<script type="text/javascript" src="http://www.kevindubois.com/demos/js/mywidget1.js"></script>

Simple, right?  If that satisfieds your needs, all the better, but most people will want a little more functionality.

Either way, you can see a demo for this one at http://www.kevindubois.com/demos/widget1.html (the js code is at http://www.kevindubois.com/demos/js/mywidget1.js)

There are ways to pass variables and there are ways to handle secure servers, so if that's what you're interested in, please continue to read!

2) The more advanced (but still pretty easy) solution:

The files stay the same, only the code within will get a little more chunky.  My sample will be based on the assumption that you're sending an advertisement widget to the 3rd party sites – but it really could be anything you want, just change the parameters in whatever you want.

Let's start with the 3rd party code this time.  We'll write the javascript tags again,  but this time we're not going to include the location to the js file in the tag but rather, we're going to tell the browser to write another javascript codebit from within the first javascript tag.  This is necessary to pass some parameters to the js file; and to write some code around secure sites (or not) issues:

<script type="text/javascript">
 referral_code = "MQI74";
 ad_code = "aa";
 ad_width = "200"; // optional
 var myHost = (("https:" == document.location.protocol) ? "https://www." : "http://www.");
 document.write(unescape("%3Cscript src='" + myHost + "kevindubois.com/demos/js/mywidget2.js' type='text/javascript'%3E%3C/script%3E"));
</script>

referral_code, ad_code and ad_width are parameters that are being sent to the js file.  myHost detects whether we're on a secure site or not, and will change the path to reflect that.  Note that this will only work if you have a secure certificate on your end too.  The reason why I included this, is because some browsers will return a warning on the 3rd party secure site if your js file is not secure, saying that some items on the site are not secure.  The html tags are being escaped ( < = %3C and > = %3E ) and then unescaped, because otherwise the browser will interpret these tags incorrectly.

Let's go back to the js file and add some more code to handle the parameters and the security:

Start the js file by figuring out the security again:

var myHost = (("https:" == document.location.protocol) ? "https://www." : "http://www.");

The parameters you passed are directly available, so you can start using them immediately. In my case, I added a switch statement to show different ads (sort of like google adsense, where you can show different ad sizes and types by changing the ad code).  Make sure you escape opening and closing tags because you will get problems with the browser interpreting things incorrectly.

var ad_code = ad_code ? ad_code : '1a';
var referral_code = referral_code ? referral_code : '000';
var ad_width = ad_width ? ad_width : 200;

// switch code to see what we want to serve up
switch(ad_code){

   case '1a':
     document.write(unescape("%3Cdiv style='width:"+ad_width+"px; font-family: verdana, arial, helvetica, sans-serif; cursor:pointer; font-size:11px;'%3E"));
     document.write(unescape("%3Ca href='" + myHost + "kevindubois.com/index.php?referral="+referral_code+"' style='text-decoration:none;color:white'%3E"));

     document.write(unescape("%3Cdiv style='border-top:5px solid #0F0442; width:"+ad_width+"px; background-color:#FF6204; color:#FFF; padding-bottom:10px '%3E"));
     document.write(unescape("%3Cul%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3EThis is a demo for %3Ca href='http://kevindubois.com/blog/2009/11/16/creating-advertisement-widgets-for-3rd-party-websites'%3Ehttp://kevindubois.com/blog/2009/11/16/creating-advertisement-widgets-for-3rd-party-websites%3C/a%3E%3C/li%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3bla bla bla%3C/li%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3Ebla bla bla%3C/li%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3Ebla bla bla%3C/li%3E"));    
     document.write(unescape("%3C/ul%3E  "));    
     document.write(unescape("%3Cdiv style='text-align:center;font-weight:bold; font-size:12px; '%3E LEARN MORE %3C/div%3E"));    
     document.write(unescape("%3C/div%3E"));    
     document.write(unescape("%3C/a%3E"));    
     document.write(unescape("%3C/div%3E"));
   break;

   case '2a':
     document.write(unescape("%3Cdiv style='width:"+ad_width+"px; font-family: verdana, arial, helvetica, sans-serif; cursor:pointer; font-size:11px;'%3E"));
     document.write(unescape("%3Ca href='" + myHost + "kevindubois.com/index.php?referral="+referral_code+"' style='text-decoration:none;color:white'%3E"));

     document.write(unescape("%3Cdiv style='border-top:5px solid #0F0442; width:"+ad_width+"px; background-color:#FF6204; color:#FFF; padding-bottom:10px '%3E"));
     document.write(unescape("%3Cul%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3EThis is a demo for %3Ca href='http://kevindubois.com/blog/2009/11/16/creating-advertisement-widgets-for-3rd-party-websites'%3Ehttp://kevindubois.com/blog/2009/11/16/creating-advertisement-widgets-for-3rd-party-websites%3C/a%3E%3C/li%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3bla bla bla%3C/li%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3Ebla bla bla%3C/li%3E"));    
     document.write(unescape("%3Cli style='margin-left:-15px'%3Ebla bla bla%3C/li%3E"));    
     document.write(unescape("%3C/ul%3E  "));    
     document.write(unescape("%3Cdiv style='text-align:center;font-weight:bold; font-size:12px; '%3E LEARN MORE %3C/div%3E"));    
     document.write(unescape("%3C/div%3E"));    
     document.write(unescape("%3C/a%3E"));    
     document.write(unescape("%3C/div%3E"));
   break;

   // and so on ...
}

The only thing I haven't mentioned is the links and the referral code: you can track widgets and clicks from each 3rd party by supplying a referral code. The link within the widget has this referral code and in the linked page you can then write some code to track/count/whatever you want.
From here on, I think you should have all the tools to start customizing your own widget. You can make everything even more dynamic by using some ajax; you can add more parameters or really any content you want.

You can find a demo for the 2nd widget at http://www.kevindubois.com/demos/widget2.html (the js code is at http://www.kevindubois.com/demos/js/mywidget2.js)

The problem is, when you output your data you'll repeat the vendor name for each customer they have.  It makes the table look cluttered and hard to read.  Not to worry though, there is an easy solution!

All you have to do is create 2 classes:

.noblanktd{color:inherit; border-top:1px solid #000; border-top:1px solid #000}
.blanktd{color:white; }

and here's the php code:

function outputmystuff(){
// get your data here eg
$query = "SELECT v.id, v.name as vendorname, c.name as customername FROM vendors as v LEFT JOIN customers as c ON v.id = c.vendor_id";
$result = mysql_query($query);

$oldID = false;
while($row = mysql_fetch_assoc($result)){
$ID = $row['id'];
if($oldID == $ID){
$class = 'blanktd';
} else{
$class = "noblanktd";
}
$returnval .= <<<EOD
<tr>
<td class="{$class}">{$row['vendorname']}</td>
<td class="noblanktd">{$row['customername']}</td>
</tr>
EOD;
$oldID = $ID;

}

return $returnval;

}

and last but not least the html

<table class="repTable">
<tr>
<th>Vendor Name</th>
<th>Customer Name</th>
</tr>
<?=outputmystuff()?>
</table>