Friday, February 20, 2009

Dynamic Label Cloud Gadget

Was looking for a label cloud widget for the blog but was surprised to see no one had come up with any dynamic cloud generator... was a matter of merging a little unused math with simple javascript and the Dynamic Cloud Generator gadget was born.

If you're happy with the gadget (or even particularly upset!), for any feedback, queries or bugs do make a post in Google's gadget directory for this gadget here.
When posting problems, provide as much information like the Gadget properties, what browser the problem is seen, etc.

Gadget Properties:
Cloud Label Max Font Size
eg: 25
Provide the font size for the biggest (most occurring) label.

Cloud Label Min Font Size
eg: 8
Provide the font size for the smallest (least occurring) label.

Cloud Background Colour
eg: red, #aabbdd
Change this from the default value of '#FFFFFF' (white) if you want another background colour.

Cloud Link Colour
This is for choosing the colour of the cloud links.

Base Url For Label link (change this)
eg: http://devsac.blogspot.com/search/label
This is the URL for creating the links that appear on each of the labels in the label cloud - the URL is simply prepended to the Label tag. If the user clicks on the tag "Cool", the URL in this case would be http://devsac.blogspot.com/search/label/Cool

Feed URL to retrieve Labels from (change this)
eg: http://devsac.blogspot.com/feeds/posts/default
You can simply give your blog's Blogger RSS Atom feed (in this case, you can skip the below Label Element and Attribute properties). If you don't have a Blogger atom feed or have a non-standard xml file containing your labels, then provide that URL.

Name of Label Element in Feed URL
eg: category
Leave this with default value as "category", if you provided a Blogger Atom RSS feed for above Feed URL property.
Otherwise, provide the name of the element that contains the labels in your xml.

Name of Label Attribute in Feed URL
eg: term
Leave this with default value as "term", if you provided a Blogger Atom feed for above Feed URL property.
Otherwise, provide the name of the attribute containing the labels in your xml.

Ignore Label Attribute in Feed URL
Leave this as default unchecked if you provided a Blogger RSS Atom feed for above Feed URL property.
Enable this if you are provided a Feed URL that stores the the Label as a value in the Label Element and not in an attribute (such as the RSS feed from Feedster).

Minimum Label Occurences
This is an optional property which will be skipped if it has default value of 0.
This can be used when only those labels that occur more than a minimum count need to be displayed in the cloud.
For e.g.:, if you want to consider only labels that have occurred more than once, then give 2 for this property.

Maximum Label Occurences
This is an optional property which will be skipped if it has default value of 0.
This can be used when only those labels that occur less than a maximum count need to be displayed in the cloud.
For e.g.:, if you want to consider only labels that have occurred less than 100 times, then give 99 for this property.


Updates:
v0.008 [25-May-09]:
Added new properties, min and max label occurrences for feature request from Randi Helene Tillung.
v0.007
Fixed bug that left out border of gadget when setting background colour, Raised by Eemil.
v0.006
Fix for bug in "Ignore Label Attribute" option.
v0.005
Added
"Ignore Label Attribute" option for those who have non-Blogger rss feeds like Feedster RSS.


Properties, etc can be viewed at this Google page.

32 comments:

  1. A dynamic cloud would be useful indeed. But I couldn't get it to work as a Gadget on Blogspot.

    I substituted my Blogspot address for yours in both places. Not having used labels for months, I put in a test label, both before and after setting up the Cloud gadget (with a ping to send the post with a label out on the feed). But on my blog the gadget first showed nothing but an empty box; now it shows just "categ" (category?), which I have never used as a label.

    This test is still on my blog, www.aidsnews.org, at the bottom of the right-hand column, so you can see it. Any ideas on getting it to work?

    Also - any ideas on how to feed your cloud generator the blog titles instead of labels?

    John S. James

    ReplyDelete
  2. Hi John

    Thanks for writing in!

    Didn't find the gadget when I checked your site just now...
    but I can still simulate your problem if you send me the values you provided for the following:
    1) Cloud Label Max Font Size
    2) Cloud Label Min Font Size
    3) Base Url For Label link
    4) Feed URL to retrieve Labels from

    Regarding using blog titles instead of labels, it's in the features list for the next version. However this is possible right now with a small work-around from your side:
    Basically, the gadget retrieves the labels from the "term" attribute of all "category" elements in the xml at the provided Feed URL. So you could just provide a Feed URL that contains a customised non-feed xml, that has your blog titles as the value of "term" attribute instead of labels.
    Your custom xml would look something like below:
    <?xml version='1.0' encoding='UTF-8'?>
    <fakefeed>
    <category term='BlogTitle1'/>
    <category term='BlogTitle2'/>
    <category term='BlogTitle3'/>
    <category term='BlogTitle4'/>
    </fakefeed>

    You have to figure out how to generate such an xml file dynamically.

    Or if you could create the file yourself, upload it and provide this URL the Feed URL property of the gadget. But this means the dynamism is restricted to the uploaded xml file...

    Sachin

    ReplyDelete
  3. What about design (font/color/bg) changes? How to customize the cloud?

    ReplyDelete
  4. Snake,
    Although the dynamic style coding is very simple through javascript, I had to stall the configurable appearances feature as the actual user inputs were too complex... the user should be able to enter a valid color, font etc.

    Until I find a convenient way for user to choose color, font, etc (than from Gadget's restricted User Preferences), this may take a while.

    Any ideas for user input?

    ReplyDelete
  5. Hi Sachin,

    I tried to use your gadget, but regardless of what I put in the two feeds fields (posts and labels) I only got your tags diplayed.
    That was yesterday, today is not displaying anything, it says "retrieving feed" and that's it.
    Any tips on how to make it work and actually display tags from MY blog? Thanks in advance.

    ReplyDelete
  6. Hi Mishu

    I just checked your blog, http://ihasweblog.blogspot.com/, with Firefox 3.0 and saw that the gadget is working fine!

    Can you tell me the browser you used that is giving the problem?

    ReplyDelete
  7. Mishu one more thing,

    you can change the title of the Cloud Gadget to anything you want - right now, it's still showing the title as "SG Dynamic Label Cloud Former"...

    ReplyDelete
  8. It seems to work now, strangely enough ;-)
    I was also using firefox 3.0, but I was at work where we have some internet connection issues, maybe that is why it was not working.
    Is it possible to use words from the posts as tags to be displayed in your gadget?
    Thank you for your help.

    ReplyDelete
  9. Good to know its working Mishu. :)


    Regarding your question, the issue is - how would you identify which words from the post you want to use as tags?

    If you choose to specify the words in an xml file, the Cloud Gadget can use that xml and the element/attribute as input to generate that cloud.

    ReplyDelete
  10. Hi Sachin! You made useful gadget, but in my blog (quarckster.blogspot.com) it doesn't work. I just change "devsac" on "quarckster", but in preview show "null". What am I doing wrong?

    ReplyDelete
  11. Hi Quarck

    I checked by trying the feed url as http://quarckster.blogspot.com/feeds/posts/default but it redirected me to Feeedster... I guess you have customised your Blogger settings to use Feedster's RSS instead of Blogger's RSS.
    Unfortunately feedster's RSS feed stores labels differently:
    <category domain="http://www.blogger.com/atom/ns#">kettel</category>

    Whereas Blogger's atom feed is in the format:
    <category scheme='http://www.blogger.com/atom/ns#' term='kettel'/>

    For now, Im providing a patch... this will reflect in the Cloud Gadget after a few hours. Will provide a full fix by Monday.

    Cheers.

    ReplyDelete
  12. Thank you very much for find time for my problem. I will waiting new version.

    ReplyDelete
  13. Hi Quarck

    I've updated the gadget to address this problem for you (and others who use Feedster RSS instead of the default Blogger RSS Atom)... you just have to edit the Cloud Gadget properties and change the "Label Attribute" property to blank.

    So for you Quarck, the values would now be:
    Cloud Label Max Font Size= 25
    Cloud Label Min Font Size=8
    Base Url=http://quarckster.blogspot.com/search/label
    Feed URL=http://quarckster.blogspot.com/feeds/posts/default
    Label Element=category
    Label Attribute=LEAVE THIS AS BLANK

    Note: Gadgets are cached in Blogger. So not sure how long it takes for this change to get reflected.. probably an hour max.

    Let me know...

    ReplyDelete
  14. Quarck

    The previous patch was breaking those who used standard Blogger RSS Atoms. I have given a new option to disable the Label Attribute.

    So in addition to the previous settings for you, you should also enable "Ignore Label Attribute" option.

    ReplyDelete
  15. It's works! Sachin you are geniuos, thank you very much.

    ReplyDelete
  16. Hi Sachin,
    thanks to your good job, I've implemented your tag cloud on my blog. I have an issue on Internet Explorer 7 (it doesn't happen on FF, Opera, Chrome).
    It happen that when rendering the tag cloud, in method completeCloudProcessing1, the response object is tested against the "" string. Since it doesn't have a "tostring()" method, you will receive a "method not available" error.

    In particular it happens in statement
    if (response == undefined || response == null || response == "") {
    debugln("No Response from URL");
    }

    IE7 doesn't understand response==""

    Thanks in advance
    Antonio

    ReplyDelete
  17. Hi Antonio
    Nice to know that it was useful for u.

    And thanks for explaining the problem and solution so clearly! Will fix it as soon as I can get it tested on an IE7 browser...

    ReplyDelete
  18. To add to Antonio's comment...

    I love the gadget. Works great in FF and Opera, but I cant get it to pull in IE 7. The sympotm is a permnant, "Retrieving feed..." notice in the display space.

    The error code I get is Line 113, Char 5, "Object doesn't support this property or method."

    Thanks for this great tool!

    .Nevets.
    http://nevets-qst.blogspot.com/

    ReplyDelete
  19. Thanks Nevets :)

    Sorry about the IE7 issues...
    I have kept my code as generic as possible and used only the Gadgets API and yet...

    Unfortunately, I don't have a Windows environment at home right now, and so not able to get around to troubleshoot the problem.

    Hopefully, I can fix this at a friends place sooner than later.

    Cheers!

    ReplyDelete
  20. [Eemil said...
    This is not a comment to this post, but I didn't find another way to contact you on your tag cloud generator gadget.

    The gadget generates an annoying white border on top and bottom of the actual cloud text. On the area with text, it honors my background color. Please make all background in the gadget painted with the user-set background color.
    ]

    Eemil, your wish is granted... check out your blog now!

    Fixed the gadget to have all background colour in the gadget to be the same as the user-selected background colour.

    Btw, this is the right place to put all issues, problem, feature requests for the Cloud Generator Gadget too :)

    ReplyDelete
  21. Hi! I have used your cloud on www.etologi.no. Although I have some problems. I cannot seem to be able to change the colours. I have measured the colours of my blog and used the HEX code to edit the gadget, but it does not seem to respond. I have used both firefox and IE8.

    Also, I have a LOT of labels - would it be possible to chose only those who has more that 2 ocurrences on the blog?

    ReplyDelete
  22. Hi Randi

    For your query about limiting to a minimum number of occurrences is now available, this is avalable as a new feature in my new Gadget version 0.008 (updated automatically)! There are 2 new properties, minimum and maximum label occurrences. Default values are 0 causing this filter to be ignored. But if you want to show only those labels that have occurred 3 times and more, you have to provide 3 in the Min occurs field (and leave 0 in max occurs since you dont want any upper limit I guess).

    About your background colour issue, I can confirm that its configuration is working fine in all browsers.
    To change the background colour, all you have to do is update the Cloud Background property. I checked out www.etologi.no and found that you have left this property unchanged with #FFFFFF. You need to change this value to the colour of your choice. You can even set this to the background colour of the page by simply setting this to: transparent (with no # or space or anything!). This property simply supports all valid html/css values.
    If the problem persists, let me know with the actual values you provided for ALL the cloud gadget's properties and the browser in which it is observed.

    Cheers

    ReplyDelete
  23. Thanks for your help! The problem is that I for certain HAVE entered the correct colour-codes. Now for instance, I have entered "transparent" and #BA742A for link colour. It is also there when I open to edit the gadget. Also I have chosen "6" and up for min occurences. Now only three words show up.... As you can see from the label list on www.etologi.no, there are a lot more word than this that should show up.

    I agree that when I check the source it says that I have not change these variables. I use Chrome (Googles own) as a browser. Hope to get this working!!

    ReplyDelete
  24. Hi Randi, you seem to have provided an outdated or incorrect feed url to the cloud gadget. Your problem of min occurences not displaying correctly will be resolved once you fix this.

    As for the background, you were right - there is an issue currently with user preferences in blogspot gadgets - user preferences cache does not reflect updations if used directly. Raised this with them and will revert once its resolved!

    ReplyDelete
  25. Ok I am severely technologically challenged. I've added the gadget to my blog and I can't seem to figure out how to change the label titles. I mean right now it still have the default tags so how do I put the tags I want added? Also what happens to the posts I've already created afterwards...so I have to change those? I need help!

    Thanks in advance...and please break it down so I will understand.

    ReplyDelete
  26. I can't seem to get it to display in IE8. Says "retrieving feed". Displays fine in FF.
    http://midlifemotorcyclemadness.blogspot.com/

    ReplyDelete
  27. What tweaks are needed for the tag cloud to work with a Feedburner feed? I reverted my blog back to the standard Blogger feed for now, but would like to put my Feedburner feed into Blogger. My blog is http://ohmyachesandpains/blogspot.com. Thanks!

    ReplyDelete
  28. Hi Selena

    I'd added a new feature a long while back to support non-Blogger feeds...

    Did you try following the Feedster steps I posted in reply to Quarck above?

    If so, what problems do you have when you follow these steps?

    ReplyDelete
  29. Thanks for providing such a great article, it was excellent and very informative.
    as a first time visitor to your blog I am very impressed.
    thank you :)

    ReplyDelete
  30. thank you very very much for posting this kind of post,it is very helpful for me becoz i always have this kind of problem...Again thank you very much!!!
    website design

    ReplyDelete

 
Superblog Directory