Have you noticed those strange black and white grids - like demented crosswords - popping up around the place? In newspapers, flyers and the like? No? Well, I have. And I dare say if I lived in Japan I'd have seen them on T-shirts, coffee mugs and a whole lot more.

They're 2D barcodes for your mobile device (primarily phones). You take a photo with the built-in camera and the onboard software automatically extracts some text, a phone number or a link. (If your phone is a bit older, you can download the software from your manufacturer.)

I've been playing around with these mobile codes (QR codes and Datamatrix) for the past few weeks, thinking of things to do with them. As a starting point, Nokia's handy webservice for creating the images needed to meet our friends at Yahoo Pipes.

The result is Mbarcode URL. It's run along the same lines as Embiggen TinyURL: there's a page where you can see it working, plus a bookmarklet for browsers and a button for publishers.

Go on, give it a click! (Click anywhere on the popup to close it.)




One of the limitations with the QR and Datamatrix codes is there's a limit to how much you can pack in. As it gets bigger, the blocks get smaller and the decoding error rate grows. This limits the effective size of a URL to around 50 characters - even less if you want to be robust.

So behind the scenes, Mbarcode uses TinyURL to shorten the target link into something much more compact. Now you don't have to worry about the size. As a result, you can use the data: URI scheme to pack as much into your mobile codes as you want. I've "compressed" a 10K PNG image into a QR code using this approach, effectively achieving far higher resolution than you deserve with a mobile phone camera. Neat.

What's the point? Not sure, really. Here's a couple of ideas:

• You're browsing along on your desktop and you want to send a link to your phone for when you're out and about later. Click the bookmarklet, point your phone at the screen, take a snap. Done. It's in your phone.



• You're out with a cool friend who owns an iPhone with GPS. She's checking out nearby bars on Google Maps. You'd like to look too, but while your phone has a web connection, it has no GPS. What are you going to do? Laboriously type the address or longitude/latitude into Google Maps? No! You're friend clicks the bookmarklet, it creates the QR code, you snap her screen with your phone and now you're both browsing the current location!

Yeah, it's not a lot, but it's still fun to play. Maybe more uses will come later, especially if I figure out what to do with the cool experimental online barcode decoder at ZXing.

Suggestions?

Filed in: webtech, hacks, tinyURL, bookmarklets

If you use a lot of TinyURLs on your blog, you might want to checkout this new tool - Embiggen. It expands those cryptic TinyURLs (eg tinyurl.com/2dfmty) to their full version, allowing your readers to make an informed decision about following a link. (That's good URL etiquette.)

It's available as a button to insert into any page eg Blogger, but it's especially handy for micro-blogging services like Twitter. You can also get it as a bookmarklet for when you're browsing around and come across a mysterious TinyURL.

See demo and get buttons

The hack works by using Dapper to grab the URL from the TinyURL preview page and munging the resulting JSON object with regular expressions.

I cobbled this together as part of another project on URL manipulation and tagging, but thought it might be useful enough to release on its own. There's no reason why this approach couldn't be applied to other common-yet-cryptic URLs, like YouTube, so watch this space.

Any other suggestions, feedback, bug reports etc? Please leave a comment.

Filed in: webtech, hacks, tinyURL, bookmarklets

One question that arises regularly with my blogging is the update dilemma - what should to do with those little scraps of information that pertain to an earlier post? This article outlines an approach to dealing with this common issue.

When I'm following a breaking news story or there's delayed developments or even a random thought occurs, I want to inform my readers in the most convenient way. If it's big enough, a whole new post may be warranted (with a link back to the earlier post). Otherwise, I ask myself: should it be done with a comment or with a manual update to the bottom of the original post? Thanks to Hearsay (and other recent comments hacks), a comment will have visibility across all blog pages, informing all visitors (but not subscribers). If there's a lot of comments on a particular post or a high rate of commenting on the blog, important updates can get lost. Alternatively, appending an update (or follow-up, postscript, addendum, errata or correction) to the post may not get out to subscribers and visitors who are interested.

I've tried to get the best of both worlds by using Yahoo Pipes to automatically generate an update feed for my blog. This feed consists of the most recent updates (to any post on my blog) and can be offered to subscribers, much like a regular post or comment feed. It can also be combined with Hearsay to produce a friendly sidebar panel to display the most recent updates to your site visitors.

The rest of this article introduces the Blogger Update Extractor pipe, explains its operation and how you can use it in your blog. I conclude with some possible alternative uses and pointers on future developments.

First of all, to get a clearer idea about the problem I'm talking about (and my solution), have a look at this post about a court case I was following. As you can see, there were five updates (each about two paragraphs) over the twelve months after the original post. This is fairly common with my posts - perhaps a quarter of them feature one or more updates like this.

I have long adopted the convention of using *** UPDATE *** to indicate that the subsequent text has been appended to the original post. I also use a named anchor (eg <a name="update1"> ... </a>) on each update heading. Why? Two reasons. Firstly, it gives me a unique URL for each update (ie http://...#update1) in case someone wishes to bookmark it. Secondly, my Blog-Nav system picks up anchors so that users can jump up and down the page (use the up/down arrow in the top right to see).

What the Update Extractor pipe does is gather my blog's RSS feed (not Atom - see below) and parse out the updates, returning a new RSS feed that consists of just the most recent updates. This works because of handy feature in Blogger's RSS feed that is not present in Atom: when you update any post it automatically goes to the top of your RSS feed. The rest is just straightforward regular expressions in Yahoo's Pipes.

With this new feed, you can offer it to readers (perhaps after burning it through FeedBurner for stats) and/or display it in your blog's sidebar to let all readers know. The links will point to the actual update, not just the post (eg http://...#update1)

Now, the latest Blogger has support for displaying arbitrary RSS feeds: you can simply use that. Or, you can create a "special" feed that will work with the Hearsay hack to give you a bit more control over presentation.

If you want an RSS feed of your recent updates, use this URL:

http://pipes.yahoo.com/pipes/pipe.run?BlogID=xxxxxxxx&_id=pAQ35A322xGwxdeMouNLYQ&_run=1&_render=rss

(replace xxxxxxxx with your blog's Blogger ID)

If you want a Hearsay-style sidebar panel of your recent updates, insert this code into your Blogger template sidebar:

<div id="recent-updates" ><center><br/><br/><br/>Please wait ... <br/>loading updates.<br/><br/><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif"/></center></div>
<script type="text/javascript" src="http://ghill.customer.netspace.net.au/hearsay/hearsay-v01c.js"></script>
<script type="text/javascript">
hearsay("http://pipes.yahoo.com/pipes/pipe.run?BlogID=xxxxxxxx&_id=Ik9FeAz22xGZT18tqWIyXQ&_run=1&_render=json", "recent-updates", true);
</script>

(Again, where xxxxxxxx is your blog's Blogger ID.)

The Update Extractor comes in three flavours: "Full" grabs all the text following an update (ie to the end of the post); "Partial" grabs just the next (substantial) paragraph and "Hearsay" grabs the partial feed but prepares it for display by the Hearsay script. Please feel free to clone and modify the pipes as needed; I'd appreciate it if you could put a comment here so I can have a look.

NB: Using more Pipes, your blog's update feed can be merged easily with your blog's comment feed if that would make more sense for your blog.

One downside of this solution is when there are multiple updates to a post: it will only "see" the most recent (ie physically last) update. This is okay for low-frequency updates but completely inadequate if you put your updates at the top of the blog.

The problem is that the feed doesn't contain any information about the time of all the updates, just the first publication timestamp and the most-recent update timestamp. To deal with this, I'm now using a new convention whereby instead of naming my anchors "update1", "update2" etc I'm using a timestamp "update1177829961000". Future versions of the pipe will be able to see this and handle multiple updates per post intelligently.

Rather than typing all that in each time, I've made a bookmarklet to help out. (See below for code.) The automatically generated update heading looks like this:

<center><a title="Sunday, 29 April 2007 04:59:21 PM" name="update1177829961000"><span style="font-weight:bold;">*** UPDATE ***</span></a></center>

This same basic approach - mark out content with an anchor, process the RSS feed through Pipes and display via JSON - can apply to other content too. For example, I quote heavily from newspapers in my blog posts, so I could create a feed just of quotes. You could also make a feed for hat-tips, code, links, images, citations, headings or pretty much anything else.

So there you have it: blog update feeds for your subscribers and visitors. As usual, comments, criticisms and suggestions are most welcome.

Timestamp Anchor Bookmarklet Code:

javascript:var insert_date= new Date(); insert_timestamp=Date.parse(insert_date); insert_html='<center><a title=%22'+insert_date.toLocaleString()+'%22 name=%22update'+insert_timestamp+'%22><span style=%22font-weight:bold;%22>*** UPDATE ***</span></a></center>'; document.forms.stuffform.htmlPostBody.value+=insert_html; void(0);

*** UPDATE ***
It occurs to me that maybe a live working example on this page might help. This is what I mean by an update - some content added some hours laters. If you mouseover the update heading thingy above, you'll note that it gives you the time of update. At the risk of inducing recursive madness, here's Freshblog's update feed. Note that the embedded link in the feed doesn't just point to this post, it points to this update (via the named anchor).

*** UPDATE ***
After noticing "something screwy" going on, I've modified this Yahoo Pipe to append the now-required orderby=updated to the feed fetch module. Props to Phydeaux3 for the explanation and syntax.

Filed in: blogtech, blogger-hacks, feeds, how-to

In my ceaseless quest for content to clutter up my blog's sidebar, I have found a rich new source: reader search queries, or "buzz". BuzzFlux allows you to retrieve and display these search queries in near-real-time, right in your sidebar, for the amazement of your readership. It also signals my return to blog-hacking after a six month hiatus.

Should I Do This?

First things first: is it a good idea to display your readers "live" search queries on your blog? On the plus side, it gives readers a good idea about what kinds of content your blog has (at least, as far as search engines and their users are concerned). In that sense, search queries may be considered as micro-content, a bit like tags. It may also help keep readers on your page, especially if coupled to your built-in blog search (see below).

On the downside, it may disturb some readers to see their recent queries displayed like this and some may be sensitive to the privacy side of things. Also, you have no control over what readers type into search engines, so you may be displaying potentially defamatory, profane or otherwise inappropriate content on your blog.

I'd be interested in Freshblog's readers' views on this one, so please chime in with your own thoughts on this question.

How Does BuzzFlux Work?

Most blogs worth their salt employ some sort of web stats service. Typically, you put a bit of code into your template that "phones home" to a central server every time a page is hit. Among other things collected is the referring URL, which contains the search query if the reader used a search engine to find your blog.

I think all stats services report on search queries. I use BlogFlux for some of my web reporting. They make some (though not all) of their stats available via RSS, which is handy for hacking. Unfortunately, the search queries page isn't one of them. To get the search page info in a useful form, I made a simple Dapp to retrieve the target page. (Here's the Dapp.) Once the contents are returned as a JSON object (an array of the top search queries), the BuzzFlux script just formats the results for display in the sidebar.

If there are more search queries than space permits, BuzzFlux "rotates" the queries every few seconds. (That is, it swaps in other queries at random).

As a nice add-on, readers can click on a search query of interest and my sidebar searching hack will scour your blog for that query, displaying the results in your sidebar too. By showing readers other people's queries and the results on the page, it's hoped that it will help readers find relevant content without leaving your site. (NB: This extension requires you to install the Recursive Backlinker hack.)

Check out the magic in action on The Speccy (scroll down to "Catch the Buzz" in the sidebar).

How Do I Install BuzzFlux?

First, go and register with BlogFlux and install their stats counter on your blog. (This hack doesn't have to rely on BlogFlux, but that's how it is at the moment.)

Next, put this in the header of your blog template:

<script type="text/javascript">
// BuzzFlux
Buzz = {"divid":"BuzzFlux", "limit":"15", "timer":"2000", "blogid":"1413", "period":"hour", "scan":"", "queries":[]};
</script>

<script type="text/javascript" src= "http://ghill.customer.netspace.net.au/buzzflux/buzzflux.js"></script>

The parameters are as follows:

divid = the ID of the div in your sidebar where all this content will be displayed.
limit = the number of queries to display at any given moment
timer = the delay (in milliseconds) between rotating queries
blogid = the BlogFlux ID number for your blog. Found in the URL of your results pages.
period = the period over which search queries are drawn. Allowable values are month, week and hour. Only use hour for high-traffic blogs since you want a reasonable number of queries to display (ie less than five search hits an hour and it will look a little sparse).
scan = the ID of your in-blog search field. Leave it as "" if you're not using the extension.

Now, edit your blog template to put this in your sidebar:

<div id="BuzzFlux" style="text-align: justify">   ... loading recent search queries ...</div>

Finally, you might consider throwing some CSS styling in. Either add these to your CSS file, or put them in the <style> part of your template header:

.BuzzList{ height: 9em; overflow: hidden; padding: 10px;}

a.BuzzItem{ text-decoration: none;}

a:hover.BuzzItem{ text-decoration: underline;}

Where To Next?

This opens up a range of possibilities. Not least is that FreshTags has for some time supported tag extraction from search queries, providing a means for some sort of query/tag cross-over. Another thought would be to use Yahoo's Pipes to merge, sort and process buzz from other (related? or rival?) blogs too.

As alluded to before, there are also pitfalls too. For example, who owns the copyright on a collection of search queries? Who's liable for publishing them? Of course, it's anonymous - to a degree. Without the aggregation effect of a Google Zeitgeist, it may be more like AOL's search debacle from last year.

Filed in: blogtech, blogger-hacks, search, blogsearch

Solution for the last hundred yards

For those who haven't seen the news yet, Google has announced TiSP, a free in-home wireless broadband service. It's in BETA, and those wishing to participate must apply TODAY, April 1, 2007.

Installation couldn't be simpler: Remove the spindle of fiber optic cable from the installation kit, activate the patented "GFLush" system which connects the cable to one of thousands of TiSP Access Nodes, where Plumbing Hardware Dispatchers (PHDs) complete the access point connection.

Drawbacks: Google Toolbar must be installed, presumably so Google can serve up their ads on this advertising supported service.

Don't forget, incidentally, that today is Internet Spring Cleaning Day.

Labels: google

Although there's still quite a bit going on with Yahoo Pipes, interest in the gee-whiz user interface seems to be waning around the blogosphere. While the drag-and-drop interface is cool, I think one of the more useful and interesting features of Yahoo Pipes is its ability to export data as JSON data.

Yahoo makes all of its data -- including Pipes feeds data -- available as JSON. JSON -- Javascript Object Notation -- is just data presented as Javascript code. That means you can write Javascript to work directly on the data without any XMLHttpRequest objects to open, get and parse. And because Yahoo provides a nifty callback mechanism, you don't run into the cross domain security issues that plague Ajax developers -- everything runs on the client and Yahoo Pipes enables some truly interesting mashup possibilities that go way beyond the "aggregate 200 feeds and filter on my keywords and pull in some Flickr photos" examples that dominate most blog discussion on Yahoo Pipes.

Code for your site

The most frequently asked question I see on the Pipes discussion boards seems to be "How to I put Pipes feeds on my website?" Here are code examples showing how you can pull data from a Pipes JSON feed and display it automatically on any web page.

1. Get the JSON feed data. Here's the code to do that. Replace "PipeID" with the feed you're interested in. Be sure to retain "_render=json&_callback=pipeCallback". More about the callback parameter later. Make sure this script is someplace it will be executed when the HTML page loads.
   

     <script type="text/javascript" 
     src="http://pipes.yahoo.com/pipes/pipe.run?_id=pipeID&_render=json&_callback=pipeCallback">
     </script>

   If you need a real life example, try this:
   

    <script type="text/javascript"
     src="http://pipes.yahoo.com/pipes/pipe.run?_id=lLJMf7HH2xGlUlFRJjBjOg&_render=json&_callback=pipeCallback">
     </script>

   
   


2. Write some CSS. To keep my example simple, I'll use <div> to put things where I want to go. Because this is a callback function, you can't just use document.write because you don't know where the text will actually end up unless you use CSS to place the text. You can define this however you want, but in my sample code I'll use a CSS ID called "leftside" and define a left sidebar.

   
   #leftside {
    position:absolute;
    left:10px;
    width:180px;
    border:1px solid black;
    font-size:0.8em;
    padding:8px;
    margin:8px;
   }

   
   
3. Create the callback function.The <HEAD> section of the HTML page is as good a place as any to put this code.

   
   <script type="text/javascript">
   function pipeCallback(obj) 
    document.write("<div id=leftside><h3>My Pipes Feed</h3>");
    var x;
    for (x = 0; x < obj.count ; x++)
    {
   
     var buildstring = "<b><a href=" + obj.value.items[x].link + ">" + obj.value.items[x].title + "</a></b>. <span id=desc>" + obj.value.items[x].description + "</span><br />";
     document.write(buildstring);
     buildstring = null;
    }
    document.write("</div>");
   
   }
   </script>

   
   
4. Some explanation. The function pipeCallback is called by the JSON method that you loaded in Step (1) above. Note that the name of the function matches the _callback parameter you used in calling the first script. obj is the JSON object with one or more members. I'll describe the members in the next step. You can modify this function to change how the link text looks and where the text is placed, but in this example the Title will be a link to the URL of the original article, and the description is also displayed. In real life, you may want to limit the number of items that are actually displayed.
   
5. Arrays and fields. obj.count is the number of members that are in the object. obj.value.items is an array of the members. These members may have different elements depending on how the Pipe was constructed -- you'll need to look at the actual JSON data to see what's specifically available -- but typical RSS feed things will be there, including
   • obj.value.items[x].title -- the title of the article.
     
   • obj.value.items[x].description -- the text or summary of the article.
     
   • obj.value.items[x].link -- the URL to the original article.
     
   • obj.value.items[x].pubDate -- the publication date of the article.
   
   

If you're able to make use of this code, please feel free to post your example in the comments.

Technorati has their top 100 blogs, with popularity based on the number of links to the blog. These popular blogs are high volume and tend to be heavy on geek-tech subjects, though a number of political blogs are also featured.

These blogs are linked to because the content tends to be pretty good, but the busy blogger may not have time to follow these feeds effectively. If you blog about a niche topic, you've probably been scooped by some of your friends who caught a mention of your favorite subject on BoingBoing or engadget.

I've created a handy, subject-filtering tool just for you. Enter the keywords you're interested in and you'll have your own, custom RSS feed that search for those keywords from many of the most popular, English-language blogs. Subscribe to that feed and you've narrowed your view of these high volume blogs to just the topics you're interested in.

For example, I blog about bicycling. I watch for the terms bike, cyclist and bicycl. With these words, I get bikes, bikers, bicyclist, bicycling and so forth. I tried "cycle" at first, but I got a lot of posts about recycling, budget cycles, and the water cycle. You may need to experiment similary.

Let me know if you find this tool helpful. I've created it with Yahoo Pipes; if you need more than four keywords or you need some flexibility in where the searches are done, it's not difficult to copy my Pipe and create your own.

Try out the user provide keyword search for top blogs tool.

Labels: blogging, yahoo

I plan to post a series of tips on how to use RSS to help with your blogging. This first one comes from howtogeek.com.Digg.com can be a great source of traffic to your site. If you want to know if an article has been Dugg, follow the link and read the post.



read more | digg story