Thursday, November 6, 2008

Silverlight tag cloud for blogger

So finished the first workable version of the widget.

To insert into your blog use (under dashboard, layout, edit html, ensure that expand widget templates is checked).

Find the following:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

insert widget here


<b:widget id='Label2' locked='false' title='Dynamic Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='feCloud' style='text-align: center;'/>
<script src='http://www.figmentengine.com/tagCloud/feCloudv1.js' type='text/javascript'/>
<script type='text/javascript'>
var feCloudFeedAddress = 'http://feedproxy.google.com/FigmentEngine';
var feCloudNavigateFormat = 'http://blog.figmentengine.com/search/label/{0}';
var feCloudSize = 400;
feTagCloudLoad(feCloudFeedAddress, feCloudNavigateFormat, feCloudSize, feCloudSize);
</script>
</b:includable>
</b:widget>




changing
var feCloudFeedAddress = 'http://feedproxy.google.com/FigmentEngine';
to your feed address, note that I am using feedburner so I need to put my feedburner address here
and change
var feCloudNavigateFormat = 'http://blog.figmentengine.com/search/label/{0}';
to the url that pulls up all items that have a particular label, the widget will replace the "{0}" with the label name dynamically.
the size of the widget is controlled by:
var feCloudSize = 400;
which is the size in pixels.

common problems:

  • no labels appear - do your feed entries have labels - check the address of the feed and see what you get when you open it in your browser. Also check ensure you give the syndicated address, so if you are using feedburner etc then you need to give that address, not always the address you get from feed button on the browser.

  • all labels link to the same place - ensure you have put the "{0}" in the format string in the correct place.



I will update the control to allow individuals posts to be selected (by expanding the label on click)

In terms of security, you can copy the javascript files onto your server. The silverlight widget runs in a sandbox, so you can run it from my server, or hsot it on your own.

Note you should be able to use this on other blogging sites apart from blogger - the code between (and including) the DIV tag is all you need.

any problems drop a comment below!

2 comments:

Yosser said...

I have tried using this on the 'sidebar' and in a tabbed widget. I can get neither to work. Useually get a blank white box. I have entered the url's etc however don't appear to have labels directory under blogger - any help would be great?

fe said...

@Yosser: you have a little mistake in the javascript, you need to specify the full version number (currently 1.4)

<script src='http://www.figmentengine.com/tagCloud/feCloudv1.js' type='text/javascript'>
should be:
<script src='http://www.figmentengine.com/tagCloud/feCloudv1.4.js' type='text/javascript'>