Quickly create a Tag Cloud with the REPORTS module

Location: BlogsAll BlogsDNN Development    
Posted by: mamlin 5/13/2009 3:42 AM

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!

Permalink |  Trackback

Your name:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
You are here:  
 
>> Back to the top of the blog list...

 
        account   advanced   blog   click   cloud   code   content   create   data   different   events   example   feature   file   files   free   function   good   google   just   line   list   module   modules   need   option   page   pages   query   results   role   roles   script   search   select   settings   simple   site   skin   solution   step   tags   terms   time   user   users   value   version   want  
Minimize Google AJAX Search
 
Search ES:  
This is an example of a Google AJAX Search with asynchronous search execution for two searches.  See our blog series, 'Add Google AJAX Search to your DNN skin' for info and sample code.
 
     
Minimize Get the T-Shirt
 
Shirts by Eguana Solutions
(Be cool like us!)
 
     
Minimize Most-Commented Blogs
 
 
     

Minimize Looking for more info?
 

There are tons of helpful
posts from Eguana Solutions 
on the DotNetNuke.com forums.
  
 
Click HERE to see our posts.

 
     
Minimize Modules for Sale
 

Looking for Eguana's modules? 
We're still working on them!
  

Until ours are ready to dazzle and
amaze, you'll have to make do with
the thousands of modules already
available on SnowCovered.

 
     
Minimize Favorite Modules
 

There are many great DNN modules.
A few we highly recommend are:
 
Dynamic Registration
Total control over the user signup process.  Create custom forms, execute your own SQL, use the integrated payment processing features to assign user roles, validate USERNAMEs via AJAX and much more.  Very cool.
 
URL Master
Change to friendly URLs that really ARE friendly.  Add keywords into your page URLs for better SEO.  Create 301 redirects for individual pages.  Force visitors (and search bots) to a single domain (i.e., make everyone use the "www" version of your site's URL or vice versa).  One of the single best upgrades for any DNN site.
 
Document Exchange 5 (DMX5)
Drag-and-drop from Windows Explorer directly into the DMX file manager!  File versioning, file and folder moderation, extend user permissions down to the file level (for user groups and even for individual users).  Infinite file and file info presentation options via custom display templates.  Store files locally or remotely via UNC (i.e., can securely store files somewhere besides your web server).  Much more.
 
XMOD by DNNDev
Rock-solid form module for data collection.  From simple feedback / email forms to complex, multi-part tabbed forms.  XMOD is different from other form modules because XMOD does not create a new database table for every new form definition -- an important feature if you plan to create dozens or hundreds of forms over the life of your DNN instance!  Excellent support from the developer and an active community around this module.
 
If you desire your form module to create a new DB table for each new form definition, a great alternative to XMOD is the Dynamic Forms module from DataSprings.  Dynamic Forms offers direct DB access beyond that found in XMOD as well as an easy drag-and-drop form builder option to help you get up and running very quickly.

 
     

Login