Tag Clouds are a common item in the "Web 2.0" era but the feature is still conspicuously absent from the DNN core offerings. Fortunately, all you need to create your own custom Tag Cloud is the free REPORTS module and about 5 minutes of setup...
Tag Cloud -- What Is It?
A "tag cloud" is most often a collection of descriptive terms that are associated with your site's content. Tags may be attached to photos, blog entries, products, etc. DotNetNuke uses the term "keyword" interchangeably with "tag". For instance, each page in DNN has a "keywords" field where you may enter descriptive terms in a comma-delimited list.
A "tag cloud" displays such terms together in a small area of a web page. Tag clouds may be just plain text, clickable links (or buttons) or even animated, interactive objects (Flash example here; Silverlight example here). More common/popular tags may be highlighted by different colors, bigger fonts, etc. This is referred to as tag "weighting".
Clouds can be used in different ways. You may constrain a cloud to terms only appearing for items on the currently-viewed page. You may instead elect to have your cloud represent all terms appearing on your website. In this case, by displaying a "whole-site" cloud on each page of your site, search engines are more likely to associate your entire site with the terms included in the cloud rather than just associate the individual pages that contain the terms (though individual pages should still get ranked higher for associated tags thanks to the actual page content). Another use of tag clouds has nothing to do with SEO: instead of attempting to get better search results placement, a tag cloud may exist to help site visitors identify popular subjects ("weighted" clouds are great for this).
We'll use DNN's KEYWORDS field (set via individual pages' SETTINGS) as the source for our tag cloud terms. We could just as easily substitute any TAGS or KEYWORDS field from any module (or even a user-added field ala the Repository module custom attributes feature). With a little more work we could combine TAGS from multiple sources into a single cloud. For now, though, we'll keep things simple and stick to just a plain text tag cloud with no "weighting".
Making Your Own Cloud
I often cite the free Advanced Datagrid module or the also-free SQLView module for database query tasks. The core REPORTS module is just as effective, however, and is already included as a core module so we'll use that for our example.
Before we configure our SQL query in the REPORTS module, we first need to add a "helper" database function. The helper function will give us a SPLIT feature which will allow us to pass in a single delimited string and return a table of individual string values.
STEP 1: Add the helper SPLIT function to your database
Log in as host and go to HOST->SQL. Add the following SQL and then click "Execute" (do not select Run as Script):
CREATE FUNCTION dbo.Split
( @List nvarchar(2000), @SplitOn nvarchar(5) )
RETURNS @RtnValue table
( Id int identity(1, 1), Value nvarchar(100) )
AS BEGIN
While (Charindex(@SplitOn, @List)>0) Begin
Insert Into @RtnValue (value)
Select Value =
ltrim(rtrim(Substring(@List, 1, Charindex(@SplitOn, @List)-1)))
Set @List =
Substring(@List, Charindex(@SplitOn, @List)+len(@SplitOn), len(@List))
End
Insert Into @RtnValue (Value)
Select Value = ltrim(rtrim(@List))
Return
END
NOTE: This helper function comes courtesy of Corey Aldebol from 4GuysFromRolla.com.
You can test to make sure the function was added to your database with the following query (again, do not run as script):
select value from split('a,b,c',',')
Step 2: Add REPORTS module to your DNN page
Almost there. Create a test page and add the REPORTS more to it. Remember to ALWAYS try new queries out on a test page just in case your query goes very, very wrong and you can no longer access the page to change REPORT module settings (so you can simply delete the page from the TABS module and start over).
In the REPORTS module SETTINGS, add the following to the QUERY entry field:
SELECT DISTINCT value
INTO #myTemp
FROM Split
((SELECT keywords + ',' AS [text()]
FROM tabs
WHERE (portalid = @portalID
AND len(keywords) > 0)
FOR XML PATH('')),',')
WHERE LEN(value)>0
SELECT value + ' .. ' AS [text()]
FROM #myTemp FOR XML PATH('')
DROP TABLE #myTemp
Also un-check the option "Show Header". Click "Update" and see the results of your "DNN page keywords Tag Cloud Generator".
Sample output:
AJAX .. blog .. C# .. database .. development .. DNN .. DNN on Twitter .. dotNET
.. dotnetnuke .. Eguana Solutions .. Google .. Google AJAX Search .. javascript ..
reviews .. search .. SEO .. source code .. SQL .. tips .. tricks .. Twitter .. VB
Pretty basic, eh? We get an alphabetical list of distinct words / phrases pulled from each pages' keywords (assuming some were entered). We can easily control the basic presentation (font, color, width, height, etc) using the REPORTS module's HTML templating ability or more crudely using the module's HEADER and FOOTER tags to encompass the content in a DIV with inline CSS. All in all, not too shabby for a 5-minute solution.
About that Query
So....what's up with the query in step 2? In a nutshell, the query creates a concatenated list of all keywords from all portal tabs, breaks those apart into a list of distinct terms and then concatenates the distinct list back into a single string of "tag" terms. In our example, the result is delimited by the double period ".." for readability.
A more advanced solution would incorporate "weighting" by counting the number of times a tag appears (popularity) and listing such "popular" tags first and/or in larger fonts. Such a solution leveraged on the REPORTS module could be done by returning cloud data as XML and generating appropriate HTML via XSLT.
Easy jQuery Improvement: Weighted Cloud
DNN 5.x users might want to play with the free DynaCloud jQuery tag cloud generator from Johann Burkard. DynaCloud allows you to specify one or more HTML elements to scan for tags. DynaCloud then generates a weighted tag cloud (more popular terms in bigger fonts). For our solution, you'd remove the "DISTINCT" directive from the first line of the REPORTS query in order to allow all instances of a tag to be included for proper weighting. To have the script parse our tags (but keep the raw data hidden from view), you'd use the REPORT module's HEADER setting to add "< div class='dynacloud' style='display:none' >" and also add a closing DIV tag in the FOOTER setting. Below the closing tag in the footer, add another DIV with ID of 'dynacloud' to serve as the target area for rendering the weighted tag cloud: < div id="dynacloud" >< /div >
Other Options
It'd be nice to implement our own weighted cloud without the use of an external script. Another good option would be to render individual terms as links to the tags' source pages.
For those who love the idea of a tag cloud but don't care about creating your own from scratch, there is always the option of a third party module. Quite a few cloud generator modules are available for DNN. Two solutions from well-regarded module developers are Tagger Module from iFinity and Dynamic Tags from DataSprings. These two modules take very different approaches to picking tags for the tag clouds. The iFinity module relies on user-specified tags for its cloud content. By contrast, the DataSprings module uses DNN Search to find the top recurring words across all modules and employs an "exclusion list" to filter out common words such as "and", "it", "the", "is", etc. Neither approach is "right" or "wrong" and the fact that the two approaches are so different helps to illustrate that a tag cloud is not as simple and straightforward a thing as one might imagine. Of course, this is also part of what makes them fun to blog about so a "Part 2" to this posting is a near certainty. Stay tuned!