AutoTags Umbraco DataType

20 Aug 2009

One of my biggest irritations as a web developer is populating web pages with content. Ok, it needs to be done, but it can get a little tedious. One of the more tedious tasks are SEO, and page categorisation. So wouldn't it be good if you could automatically generate keywords that relate to the page content, categories for news articles and tags for blog posts?

With this in mind I have written a Custom DataType for the Umbraco CMS (Version 4) which does exactly this. I've ported Dan Grossman's Open Calais class; written in PHP, to the .Net Framework so it can be used with Umbraco. You can find Dan's PHP class here.

It takes the content from the body of the web page and using the OpenCalais API, generates a list of words which relate to the content. You can then select the words which you feel relate best to the page and even add your own.

Configuration

Before you can use this DataType, you need to register for an API key. Its free and you can get it here. When you have your key, open up the Web.Config file for your website, and add the following in the <appSettings> element:
<add key="AutoTags" value="APIKEYHERE" />
Download it here or navigate to the AutoTags project via the "Projects" link in the menu at the top of the page and save to to the desired location.

Log into your Umbraco instance and navigate to the Developer tab, and select "Packages" then "Install local package". Follow the steps and it will install the necessary files required to use the datatype, as well as an example XSLT macro.


Usage

IMPORTANT: In order for the DataType to work, there must be a property with an alias of 'bodyText'. The content of this property will be used to generate the keywords. This is a limitation which I will be working on, so bear with it for now.

So once you have added the property to your Document Types, the datatype will render out as in the screenshot below.

Clicking on the 'Get Tags' button will generate a list of key words. Add a tag by clicking on the '+' next to the tag and it will appear on the left.
Clicking on the red 'x' will remove a tag from the list.

You can also add your own tag by entering it in the textbox. These tags may contain spaces and can be removed in the same way.

Once you're happy with the keywords, save and publish the page.

And there we have it. If anyone can suggest any improvements please feel free.
I am now also hosting this project on our.umbraco.org, and came be found here

Comments

Comment by: Grail Technology

Fixed, please download again (if only to get the new images)

Comment by: Jeremy Holland

This is a minor cosmetic issue, but I thought you should know about it. I noticed the "plus" and "minus" icons were not rendering when adding or removing tags. After crawling into the page source I found that your code is generating an image with a src attribute of "plus-icon20.png" and "minus-icon20.png", but the images the package comes with are JPGs. I was able to convert both images easily using MSPaint. I'm assuming you wanted the corners of the button to be transparent, but that was lost with the original JPG conversion so the icons don't flow as nicely with the background of the Umbraco workarea.

Comment by: DanDiplo

First, let me congratulate you on an excellent package - very impressive. Once I got the API key it all worked very well. Only problem I noticed was that icons were missing - got broken image links for 'plus-icon20.jpg'. Couldn't find them in the package, either. Any chance of adding them to the package? Thanks!

Comment by: Grail Technology

I've done a few tests and everything seems to be working. I will say that you won't always get any results back, this is a limitation of Open Calais. They've released a new version with some additional features which may generate a more tags/keywords. I will be looking at these in the near future.

In the mean time, download this file and put the contents into the bodyText field of a new page to test everything is working. This text generates several tags so should prove everything is happening as it should.

Comment by: Grail Technology

Siko, Firstly thanks for your feedback about the commenting system, a small oversight on my part! I'm afraid to say this is a limitation with the Open Calais system. The keywords themselves are generated by Open Calias, and therefore, sometimes will not return any results. I shall check this when I get home

Comment by: SiKo

Well, the code is running (added key in web.config), but no tags get generated (and I do have a 'bodyText' aliased field on my document type and we put in our content). Any ideas where to check what's not working?

Comment by: SiKo

Running W7 x64 RC with IIS7 and SQL Server Express 2008. Umbraco v4.0.2.1 I rechecked the web.config and apparently I missed a crucial section in the web.config. (I missed to copy the section *duh*! BTW the right web.config for umbraco v4 to under .NET 3.5 is here: http://tinyurl.com/mccukr) Thanks for the quick reply, all seems fine now :) (=error is gone!).

Comment by: Grail Technology

SiKo, What is your system setup? Umbraco version etc.
Make sure you are running Umbraco V4 and have .NET v3.5 installed. If the problem persists, try looking at this forum. Or post back here

Thanks for trying this package, I hope we can get this issue sorted

Comment by: SiKo

I get an error when inserting the AutoTag datatype into a document type:

Server Error in '/' Application.

Parser Error
Description: An error occurred during the parsing of a resource required to service this request.
Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The base class includes the field 'upnl_Display', but its type (System.Web.UI.UpdatePanel) is not compatible with the type of control (System.Web.UI.UpdatePanel).

Source Error:

Line 4:  
Line 5:  <div id="pnlAutoTagsLeft" style="float:left;width:325px;
margin-right:10px">
Line 6:  <asp:UpdatePanel ID="upnl_Display" runat="server"
UpdateMode="Conditional">
Line 7:      <ContentTemplate>
Line 8:      <asp:Label ID="lblOwn" runat="server" 
AssociatedControlID="tb_OwnTags" Text="Add Own Tag" />


Source File: /usercontrols/AutoTags.ascx Line: 6

Version Information: Microsoft .NET Framework Version:2.0.50727.4918; ASP.NET Version:2.0.50727.4918

Any ideas what is causing this?

Comment by: Ismail Mayat

nice post. get it packaged and onto our.umbraco.org as a project looks really useful and get yourself some karma! Regards Ismail

Enter the letters from the image on the right
Captcha image

Developed by Grail Technology, hosted by DjangoEurope, powered by Django