Skip to main content

Mobile Friendly Link

Posted by rah003 on March 7, 2010 at 2:30 PM PST

Last time we looked at writing command and shortening the URLs using simple TinyURL API. This time, lets try to take this one step furter and generate URLs that are mobile-users friendly, i.e. URLs that can be easily recognized and processed by various mobile devices. Such are urls in QCode or DataMatrix scan codes.

I'm sure almost everybody have seen those somewhere already, be it on printouts or on the actual websites. In difference to the classic bar code QCode or DataMatrix are rectangular, and capable of encoding more information then the barcode. For years already I wanted to write one such generator myself, but looking recently I found there are so many of those, free or commercial around that there is really no point writing one anymore.

I've found the invx.com service that allows generating such codes for free even for commercial so I thought I might demonstrate how to retrieve and store the image of the code in Magnolia. Unfortunately this service doesn't allow other clients then browser to retrieve the codes so in the end I used service from kaywa.com, which is free for non commercial use and provides only the QCodes. And I resolved to demonstrate use of the tags by very simple approach since kaywa provides permalinks to the generated codes - just have paragraph to find out current page url and then generate image link to the kaywa server to retrieve the image.

We will create the paragraph that can be placed anywhere on the page that will take the url, run it through TinyURL API (tho the dot codes like QCode and DataMatrix can encode more information then a barcode, they still have some limits and too long url might be truncated while creating the code) and then we will have paragraph to render the img tag with link to the code.

Freemarker Paragraph template (this is really as simple as it gets):

[#assign cms=JspTaglibs["cms-taglib"]]
[#assign cmsu=JspTaglibs["cms-util-taglib"]]

[@cms.editBar /]

<img src="${model.link!}" />

 

Paragraph model snippet:

    public String getLink() {
        AggregationState state = MgnlContext.getAggregationState();
        String origUrl = state.getOriginalURL();

        // shorten the url first (exactly same method as in TweetCommand)
        String shortened = shortenUrl(origUrl);
      
        // assemble the link
        return KAYWA_PREFIX + shortened;
    }

Full code at Magnolia svn as usually.

 

And here's the screenshot of the result.

And one tag for my blog:

qrcode

 

It is really that simple.

Enjoy.

 

AttachmentSize
sample-qcode.png4 KB