The CouchSurfing Wiki, an informal workspace which anyone can edit.

Example of Flickr Web Widget

See how to get this code at http://www.flickr.com/badge.gne

This is done in this way since some web sites don't let you embed javascript, otherwise see next example.

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_uber_wrapper {width:150px;}
#flickr_www {display:block; text-align:center; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user&user=35034348187%40N01"></script>
<tr>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/phauly/"><img id="flickr_badge_icon" alt="phauly's photos" src="http://farm1.static.flickr.com/1/buddyicons/35034348187@N01.jpg?1176423122" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt"><nobr>More of</nobr> <a href="http://www.flickr.com/photos/phauly/">phauly's photos</a></td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->

Example of LibraryThing Javascript Widget

You are asked to emded this javascript code into your page.

<script language="javascript" type="text/javascript" src="http://www.librarything.com/jswidget.php?reporton=phaulyx&show=random&header=1&num=5&covers=small&text=all&tag=alltags&css=1&style=1&charset=&version=1">
</script>

The jswidget.php simply returns some ad-hoc tailored Javascript code which directly adds HTML elements in your HTML page, such as:

document.write('<div class="LTwrapper" style="font-family: Verdana, Arial, sans-serif;">');

document.write('<div class="LTheader" style="font-weight: bold; margin-bottom: 5px;">');
document.write('Recent books from <a href="http://www.librarything.com/catalog/phaulyx" target="_top">my library</a>');
document.write('</div>');
        
document.write('<div class="LTprovided" style="text-align: right; clear: right !important; font-size: 9px; padding: 5px 0px 5
px 0px;">powered by <a href="http://www.librarything.com"  target="_top">LibraryThing</a></div>');

document.write('</div>');