Design + Coding > Tag cloud

Hi - beautiful weather we're having at the moment.

Anyone got any examples of having implemented a tag cloud that they could share. I'd really like to get one on my site asap.

Thanks
Mike
Bristol, UK

03.19.2009 | Registered CommenterMike T

yeah I need one too...not sure how to do it either...

03.19.2009 | Unregistered CommenterDeb

Mike / Deb,

I'm not hot on Tag Clouds, but you could use - http://www.tagcloud-generator.com/ - And add the code to a HTML widget in your SideBar. I know it is third party, and might #Fail, but it should do what you need.

Also, if you do a Google search for "Tag Cloud", there are a couple other options you could try.

Hope this helps...

Regards,

Michael Zampino
SS Site - mzampino.com

03.19.2009 | Registered CommenterMichael Zampino

Hi Michael

That's a pretty neat and tidy tool - thanks. But it requires quite a bit of manual input - it's not dynamic and doesn't automatically get the prioritising of tags by frequency correct.

But I will take a look at some other options and post here if I come up with anything.

All the best.
MIke

03.19.2009 | Registered CommenterMike T

OK, so I've got tired of looking for a solution on the web, but I have succeeded in doing this, which I think is pretty sweet, all things considered. What I've done is set list items in that module to float left, and added a bit of padding to the right of each.

HOWEVER, it looks good in FF, Chrome, Opera, and Safari, BUT IE7 is doing really weird stuff with the wrapping.

Does anyone know how I can prevent this?

Cheers, Mike.

03.19.2009 | Registered CommenterMike T

Well I've sorted the IE wrapping problem by putting

#moduleContent3399735 li {white-space: nowrap;}

In my custom CSS.

Hey, I'm getting better at this!

03.19.2009 | Registered CommenterMike T

Hey Michael, I'd like to know why you don't like tag clouds???
Anybody:: who thinks they have the best solution for tags/search/optimization treatments???
just curious...
thee is s o much to learn.

Deb

03.19.2009 | Unregistered CommenterDeb

Deb,

Tag Clouds to me seem like garbage, just like every other crappy Flash/etc.. Widget people put on their blogs/sites. I am into clean sites with less noise.

Categories are more about the content, where Tags are every word you can think of that you wrote in your post.

SEO or not, just my $0.02...

Regards,

Michael Zampino
SS Site - mzampino.com

03.19.2009 | Registered CommenterMichael Zampino

Sounds like the GIGO rule applies here. If you are clear about your use of catagories/tags, then you can avoid the pitfalls Michael suggests.

03.20.2009 | Registered CommenterMike T

thanks guys~

03.20.2009 | Unregistered CommenterDeb

A tag cloud widget is seen by many with User Experience design as a very neat way to show the contextual relevance and weighting of tags relevant to each other for a piece of content.

Granted unless properly execute it can look messy, but that is true of many deigns/widgets.

Increasingly Tag clouding is being seen as an efficient use of space and a strong call to action. most of the other blog sites now have them or have plug-ins, is it not time for Squarespae to just adapt an existing plug-in/module to provide a much needed dynamic feature?

03.22.2009 | Unregistered CommenterMarco Ryan

I have solved the tag cloud issue and am displaying a dynamically generated client side tag coud on one of my pages for those interested.

You can check out http://www.marcoryan.com/consulting-work/ to see the tag cloud working dynamically on the page. I have yet to do this for journal entries, but this should be relatively simple.

For those interested

http://johannburkard.de provided the client side Javascript. He has a tutorial though it is not very clear and took hours to debug. Worth using my tutorial below, but also reading through his.

Follow these steps;

1. In website Manager>structure >Architecture Create a new HTML widget in a sidebar. Call it something like Tag Cloud.
2. Now go to website Manager>structure >Website Settings> Code injection. Select: "Extra Header Code" (within <head> tag)
3. Paste in the following and then press "Update Information":
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:false});
</script>
3. Now go back to Content Editing Mode.
4. Scroll down to the new widget, and select "edit section html"
5. Open up a new browser tab/window and paste the following URL into it:
http://johannburkard.de/blog/programming/javascript/dynacloud-a-dynamic-javascript-tag-keyword-cloud-with-jquery.html
6. Click on jquery.dynacloud-5.js under the heading "ADD DYNACLOUD" about quarter away down main page, which will open up the text file containing the javascript. Select all of this and copy it to the clipboard.
7. Return back to your Squarespace window, and the open "edit html window".
8. Click "insert Code Block" and then paste in the javascript. Now scroll back up to the top and add
<script type="text/javascript"> at the head of this text. Then scroll all the way to the bottom and add the corresponding </script>. Press "Save and close" on the "insert Code Block" dialog box.
9. Now, still in the widget, open up the HTML editor , scroll to the bottom of the javascript you have just pasted, and add the following: <div id="dynacloud"></div>
10. You can now save and close whole HTML Segement.
11. Now you need to switch to Style editing and select CustomCSS. in the window, add the following:

#dynacloud {
font-size:5px;
width=150px;
}

#dynacloud a { font-size:1em;}

.highlight { background-color: yellow; }

You can play around with Font size, and width to make it fit your template, as well as any other CSS you want to add to fit it to your own template here.
12. Finally go back into your content and add: <div class="dynacloud"> at the head of any content page or <p class="dynacloud"> for any content you want to tag. Make sure you close the bottom of the page with a </div>
13. You can tweak the settings in the Javascript too to increase or decrease the scale of the Tag cloud, the number of tags shown etc. ore at Jurgen's tutorial on this.
14. Hope you like it - Let me know how you get on!

Marco

03.22.2009 | Registered CommenterMarco Ryan

Dear Marco,
I have followed your instructions down to #12. What do you mean by "go back into your content"? Where do I go? Where do I put this CSS?

THANKS!

04.7.2009 | Unregistered CommenterAngela White

"Content" means your HTML page.
CSS goes in the Custom CSS file (i.e. enter it in the Custom CSS editor window).

04.7.2009 | Registered CommenterChris Loosley

Sorry for not getting this yet. What if I am interested in my journal post tags being part of this cloud? Do I need to add this CSS to every post?

THANKS!

04.8.2009 | Unregistered CommenterAngela White