After a 48 hour marathon of honest web development (minus a IMAX Batman Begins break and a chicken fingers meal), Particletree is proud to submit our Y!Q Challenge implementation. We call our baby “Lazy Linking” and the system is what’s generating all the purple Y!Q search links on this site.

Lazy Linking is for the sloth blogger in you that’s tired of having to find interesting links to pepper your blog posts to make them more interactive. Essentially, Lazy Linking finds the keywords in your post and turns them into Y!Q search links “automagically”.

The clever part of our implementation is that it’s integrated with our content manager, Textpattern (although it could be easily adapted for Movabletype or even WordPress). It creates minimal impact on the accessibility of our pages thanks to some clever unobtrusive JavaScript and it won’t overwrite your current links thanks to some smart php/regex action under the hood.

Because we’re a huge fan of Textile and Markdown, we made it a requirement that using Lazy Linking on our site shouldn’t affect the text readability we get from using such humane text filters. So our functions are called on AFTER Markdown does it’s magic in Textpattern, but before going into the mySQL database.

Basically, we wrote a php function to take the html formated post (after Markdown is done with it) and send it up to Yahoo Term Extraction to give us their interpretation of the post’s keywords. We then take those keywords and compare them with any keywords we might have already added in Textpattern. We join the two arrays together, remove any duplicates and update the keyword column in the mySQL database. Those keywords are then used by a smarter function to determine what words or phrases in the post should be Y!Q-ized.

What’s nice about this is that if you don’t feel like coming up with keywords/tags for your post, you don’t have to — just hit save and Lazy Linking will have Yahoo do it for you AND you’ll see them in your keyword field for your post. If you do have keywords, it’ll just enhance the Y!Q Lazy Linking experience.

We want to also emphasize that the term extraction (keyword determination) isn’t done everytime a user looks at a page or entry. It only does it when you save your post in Textpattern. This method keeps your users from using the maximum allowable 5000 calls to yahoo’s server very quickly.

If you take a quick view of the source on this page you’ll notice the only markup designating a lazy link is a ‘span’ tag designated as a ‘yqlink’ class. The other ten lines of form and input code that Yahoo requires to make each Y!Q link work is being put in thanks to some clever unobstrusive JavaScript. This makes it very easy for us if we ever wanted to intentionally make a word or phrase lazy linked—just add those span tags and the javascript will handle it for us. The nice thing about this method is that it makes creating a contextual search VERY easy and it keeps our markup looking clean. Because they’re just span tags instead of links, they shoudn’t ruin search engine crawling and ranking, because those little bots won’t see a link, just words with spans.

Other features that are nice about our implementation:

  • Doesn’t replace links we’ve created.

  • Doesn’t lazy link more than three words per paragraph so it doesn’t look excessive.

  • Lazy links don’t show up in your rss feed (this prevents the forms needed for Y!Q search to work frommessing them up)

  • Ensures that every Yahoo keyword is lazy linked at least once

  • Implements some selective randomness to ensure links are organically distributed throughout a post.

  • You can easily tell it what HTML elements should not be Lazy Linked. (For example we don’t want it to do headlines, cites or code tags).

  • We added some pretty-making JavaScript to make the link color results cycle through a set of colors to make them more interesting to look at and match our site design.

HTML Form Builder
Kevin Hale

Y!Q Challenge Submission by Kevin Hale

This entry was posted 5 years ago and was filed under Notebooks.
Comments are currently closed.

· 6 Comments! ·

  1. proph3t · 5 years ago

    I must say, I’m impressed. Are we going to see this as a plugin eventually?

    One suggestion: Make lazy links have a visual difference from regular links.

    Great job guys.

  2. Chris Campbell · 5 years ago

    Thanks! There is always some plugin possibility for the future. At a minimum we’ll eventually explain how we implemented it. Also, the normal links and yahoo links should be different colors.

  3. Ryan Campbell · 5 years ago

    Thanks Proph3t.

    We think we will most likely turn it into a plugin. Also, lazy links are purple and normal links are red, but I just looked from my laptop and they seem to blend together. Thanks for pointing that out. We originally had images next to the lazy links, but that distracted from the reading of the article. It’s just one of those things we’ll have to play with to get it just right.

  4. James · 5 years ago

    In Firefox 1.0.4 on Linux, I’m getting a JavaScript error:

    bq. Error: document.getElementById(“yschweb”) has no properties Source File: http://particletree.com/scripts/particle.js Line: 37

    Also, even though they’re links, Firefox’s “middle-click to open in new tab” behavior doesn’t appear to work on the lazy links; instead, I get the scrolling widget.

  5. Kevin Hale · 5 years ago

    Hmm, the problem appears to be with the color rotation script I use to cycle the li element’s link colors in the dhtml pop-up (like we do on the front page with headlines). Right now we just set it to a setTimeout so that it’ll run after the results are fetched, but apparently some results take longer to retrieve than others. I’ll turn it off for now, until I can get it going smoothly. Thanks, James.

  6. Kevin Hale · 5 years ago

    Hot dang. Color rotation in Y!Q links now work. Woot!