One of the great things about BlogEngine.Net is how easy it is to create widgets or plug-ins for it.

I’ve created a widget that displays the stats for a user at Run.GPS.

There are two files that go into a widget: the edit.ascx and the widget.ascx.  Both files go in a folder named for the widget.  That folder goes in the widgets folder off of the web project root.

The edit.ascx holds the code that is used to edit the settings for the widget.  The widget.ascx holds the code for the widget itself.

Run.GPS allows users to build a badge that can be embedded in a web page or blog.  The badge is configured with a series of dropdowns which change a box with HTML code at the bottom of the page.  The code is surrounded in an iframe tag. The HTML can be copied and pasted into any web page to embed the badge.

For the widget to work, it should have the same settings and generate the same HTML code in an iframe tag.  A quick survey of the various settings shows that the dropdowns directly change most of the values in the HTML code.  For example, changing the “Units” dropdown to “Metric” changes to code to include “&units=Metric” and changing the “Map Type” dropdown to “NORMAL” changes the code to include “&mapType=NORMAL”.

The only tricky part about converting the settings to HTML code is with the width and height attributes in the HTML code.  For each badge type, there are a different set of dimensions.  Rather than spend too much time on this, I just hard coded the dimensions.