Knowledgebase/Support Documents /Developer Guide

Remote Widgets

Philip Remer
posted this on February 25, 2011 16:33

A Remote widget, formerly known as a Remote HTML widget, contains a widget-sized web page hosted on your server

You can author the content for a Web Page widget using any tool and technology (i.e. CSS, JavaScript, PHP, JSP) you like. Users who subscribe to your widget will receive a copy of it served by your server.

When you make a Web Page widget on Widgetbox, simply enter the URL to your widget-sized web page.

 

Making Your Full-Sized Web Page into a Widget-Sized Web Widget

Widgetbox doesn't do anything special to turn a full-sized web page into a widget-sized web page. If you only have a full-sized web page, but want to make a widget that contains a part of your page or a summary of its contents, here are some steps you can take.

  • If your page has an RSS feed, you can use our Make a Blidget tool to make a widget that displays the contents of your RSS feed.
  • Use an HTML authoring tool to create a widget-sized web page from scratch. Copy some of the content from your full-sized web page into it.
  • Use a "web clipping" tool to capture a widget-sized section of your page. Then, make a new widget that contains this section of your page.
Remember: A widget is supposed to fit within another web page. Other users are unlikely to use your widget if it fills up their entire page.

Design Tips

 

Make sure the URL to your widget-sized web page only displays the widget that users will put on their page. You shouldn't register a URL related to the widget. For example, don't register the URL to a page where a user signs up for your widget.

Dynamic sizing

You might have noticed the "Use Dynamic Sizing" checkbox in the widget registration wizard.  Dynamic sizing is the ability for a widget to resize itself.   Because widgets are hosted in an IFrame (for security reasons explained here), they cannot be resized without some special magic.

How to make your widget support dynamic sizing

In order to support dynamic sizing, you have to add a Widgetbox script to your widget.

In the head of the widget document, place the following script:

<!-- Load the widget publisher library -->

<script src="http://widgetserver.com/syndication/publisher/Main.js"></script>

Set the onload handler in the body tag to tell the widget publisher library
 when the widget document is done loading:

<body onload="WIDGETBOX.publisher.Main.setWidgetLoaded()">

Links in Web Page Widgets

Widgetbox places each widget in an iframe, for security reasons (discussed here).

This creates a gotcha. When you click a link in a widget, the new page is rendered in the widget's space rather than refreshing the whole browser window, *unless* you put in a target="_blank" or "_top".

The following bit of JavaScript does exactly that. Paste it into a hosted or remote widget, and it will cause all links to pop up in a new browser window. Change _blank to _top to make links render in the existing browser window.

<script>
	var i;
	var aTags = document.getElementsByTagName(“a”);
	for (i=0; i < aTags.length; i++) {
		aTags[i].setAttribute(“target”, “_blank”);
	}

	var areaTags = document.getElementsByTagName(“area”);
	for (i=0; i < areaTags.length; i++) {
		areaTags[i].setAttribute(“target”, “_blank”);
	}
</script>

 

If you're using a form, try adding target=“_blank” to the form tag itself. Like so:

<form action=“something” target=“_blank”>