Create a Tag Cloud Widget

by Stan

In KickApps 3.0 we introduced a tag cloud feed containing the 50 most frequently used tags in your community. With a little server-side coding, you can parse this feed and generate your own tag cloud widget. Don't want to mess with code? No sweat. We've created a handy-dandy Tag Cloud Widget Tool that will do it all for you. Just input a few parameters and out pops an HTML tag cloud widget. You can customize the look of this widget by entering the URL of a custom stylesheet into this form as well. Then just paste the widget code into any webpage to add a tag cloud widget to it.

If you prefer to code your own tag cloud widget with JavaScript or PHP, you can follow the steps that we took to build the Tag Cloud Widget Tool and download our PHP source code below.

TAG CLOUD WIDGET TOOL

Enter your site's Affiliate Site ID. You can find this number in the
"as=" parameter at the end of any profile page URL.

You can customize the tag cloud by referencing your own CSS file. For example: http://www.kickdeveloper.com/tagcloud/cloud.css. Make sure to start with "http://".

Max. 50

Widget Preview

To code your own tag cloud widget:

1. Build a tag cloud feed from your site on the fly.

Simply enter your Affiliate Site ID into the "as=" parameter in the URL below. You'll find this number in the URLs of your KickApps-powered pages.

http://affiliate.kickapps.com/kickapps/service/getFeed.kickAction?as=####mediaType=tags

2. Use an RSS parser to format your tag cloud feed into HTML.

There are a number of RSS libraries that you can use to do this. In the case of Javascript, there are a number of choices such as the open source JavaScript library Magic RSS . If you are using PHP, you can use MagpieRSS or SimplePie, two freely-available PHP libraries for consuming, parsing, and displaying RSS feeds within a page's HTML code.

In this case we used SimplePie. Here's the source code: http://www.kickdeveloper.com/tagcloud/cloud.php.

3. Create a stylesheet for your widget

In the tag cloud widget tool, we set the default CSS to KickApps standard tag cloud styling from ka_generalStyle.css (download the whole thing, or copy just the relevant section from below):

/* TAG CLOUD */
div.ka_tagCloud {
margin:0;
padding:8px;
font-family:Tahoma;
font-weight:900;
text-align:center;
line-height:22px
}
a.ka_tag {text-decoration:none !important}
a.ka_tag1 {font-size:.8em;font-weight:900}
a.ka_tag2 {font-size:.95em;font-weight:900;font-style:italic}
a.ka_tag3 {font-size:1.1em;font-weight:900}
a.ka_tag4 {font-size:1.25em}
a.ka_tag5 {font-size:1.4em}
a.ka_tag6 {font-size:1.55em}

If you'd like a different look, you can create your own stylesheet, like this one (download): /* TAG CLOUD */
div.ka_tagCloud {
font-family:Tahoma;
font-weight:900;
line-height:22px;
margin:0pt;
padding:8px;
text-align:center;
}

.cloud {
background:transparent url(http://www.kickdeveloper.com/tagcloud/blue.gif) repeat-x scroll left top;
font-family:arial;
float:left;
margin:0pt 0pt 15px;
padding:0pt;
width:300px;
text-transform:lowercase;
}
.cloud a { color:#953738; }

a.ka_tag { text-decoration:none !important; }
a.ka_tag1 { font-size:0.8em; font-weight:900; }
a.ka_tag2 { font-size:0.95em; font-weight:900; }
a.ka_tag3 { font-size:1.1em; font-weight:900; }
a.ka_tag4 { font-size:1.25em; }
a.ka_tag5 { font-size:1.4em; }
a.ka_tag6 { font-size:1.55em; }

4. Build the widget paste code.

See our PHP source code to see how we did this.

Here's a breakdown of the parameters in the URL that is the src of our <script>tag:

http://www.kickdeveloper.com/tagcloud/cloud.php?as=AAA&css_url=BBB&tag_step_count=CC&num_items=DD

as: affiliate site ID (default: 1)
css_url: Reference to the style sheet (default: http://static.kickapps.com/kickapps/css/ka_generalStyle.css)
tag_step_count: Step scaling factor (default: 6)
num_items: Number of tags to show(default: top 50)

These are the main steps. If you create a custom tag cloud widget, show it off! Drop us a link and a line about how you pulled it off on the Tutorials Talk forum.