Adding Tags to Content and Creating Tag Clouds

Community Engine provides DWR functionality to add tags to a content. The Java method implementing this feature is com.ndc.tag.ajax.TagPluginAjax#addTag().

To call methods on the TagPluginAjax class through DWR, a JavaScript file needs to be included in your JSP file. This JavaScript file contains JavaScript methods generated by DWR to call methods of TagPluginAjax class.

<script type='text/javascript'
  src='<util:valueof param="publication.url"/>dwr/interface/TagPluginAjax.js'></script>

If you look into http://yoursite:port/your-publication/dwr/interface/TagPluginAjax.js , you will find a method TagAjaxAccess.addTag which allows you to add a tag to a content item.

Once you have tagged a content item, you probably will want to show this tag on the content page without reloading the page. Here is a JavaScript method submitTag which will call the TagAjaxAccess.addTag method and the callback method submitTagCallBack which will add the newly added tag to the given element of the HTML of your content page.

function submitTag(tagName, articleId, sectionId, userId, element) {
  try {
    var meta = { userId:userId,
                 articleId:articleId,
                 sectionId:null,
                 publicationId:null };
    TagAjaxAccess.addTag(meta, tagName,
                         {
                           callback:function(tag) {
                             submitTagCallBack(tag, element);
                           }
                         }
    );
  } catch (ex) {
    // handling the exception
  }
}

function submitTagCallBack(tag, element) {
  if (tag != null) {
    var elementHTML = $(element).html() + "&lt;span&gt;" + tag[0].name + "&lt;/span&gt;";
    $(element).html(elementHTML);
  }
}

Now, if you want to create a tag cloud, you can use the tag <tag:cloud/>. Here is an example script which will create a tag cloud with the top 20 tags sorted alphabetically. The text size of the tag labels will be based on the tag popularity.

<tag:cloud id="tags" max="20" sizeMax="20" sizeMin="10" />
  
<c:forEach items="${tags}" var="tag">
  <a style="font-size: ${tag.tagSize}px" href="${your-tagpage-rul}/${tag.name}">
    ${tag.name}(${tag.frequency})
  </a>
</c:forEach>
      

For more details on the tag library provided by Community Engine for tagging functionality, see Escenic Community Expansion Taglib Reference: Chapter 9: tag and <stats:tagSuggest/>, <stats:tagPopularityList/> in Escenic Community Expansion Taglib Reference: Chapter 8: stats.