Lijit sparked my attention as a serious option to the overall pretty excellent Google Co-Op solution with their inclusion of the social sphere. I can easily add my YouTube, Flickr, Twitter account, and a lot more above that, for inclusion in the search queries sent through the Lijit search box on my site. That way, a user can search across all my presences online, bringing them closer together. That is, of course, a good thing.

The Brief

I'll use my own site, tdhedengren.com, as an example for this tutorial. It is in a sort of redesign mode, far from finished, which means that it is OK to play with it. Actually, it would be anyway, it is mine after all, but that's beside the point. I'm running WordPress, but there won't be any WordPress specifics in this tutorial, since it doesn't matter to Lijit. I've got the search functionality from WordPress already, but I'm removing it in favor of Lijit.

So let's get started!

Step 1 - Getting Lijit

Signing up to Lijit is ridiculously easy. Just visit lijit.com and type your URL in the field, and you'll be thrown into a guide where you can tell Lijit where you've got an online presence, add blogs and sites you want to be included in the search, beside your own of course, and things like that. In fact, you can even ask Lijit to pull the blogs from your blogroll into your search, a nifty feature if any.

The list of online services is easily edited. Just click tha checkbox and fill out your username (you'll get a check link when done typing, to make sure it is the right user on that particular online service), and you're done.

There are a lot of online services and places to choose from, including MyBlogLog, Digg, Viddler, Tumblr, Disqus, Reddit, Facebook, and a bunch others, beside the ones already mentioned. And should your online poison not be there, you can always submit an URL or RSS feed, and Lijit will add it to the network.

These things are pretty straight forward. When you're done, you can get your Search Wijit, which is the search box we want to integrate on our site. If you get lost in all the account settings and other things, just click the link in the top top right called My Search Wijit and you're good to move on to step 2.

Step 2 - Integrating the Search Wijit

It is easy enough to get the Lijit search box, called the Search Wijit, on your site. Just click My Search Wijit in the top right when logged in, choose a Wijit Style, color, and logo color, make some other pretty obvious picks (add/remove features like a popular searches keyword cloud, icons, and so on), and save the settings. Clicking Install the Wijit button will get you your code, and then you just need to copy-paste this to where on your site you want the Lijit search box to be. It is simple enough. When installed, you won't have to install it again, you just change your settings and save, and it is there automatically on your site, since everything is fetched from the Lijit servers.

However, let's not get ahead of ourselves. Back to my blog. I wanted the Lijit search box up right away, so I unchecked all the extra features (content icons and so on), picked the Big Rounded style, Grey color, and Grayscale for the logo color option. The preview shows how it'll look, but I put it up anyway, setting the width of the Search Wijit to 280 which I know would fit my sidebar.

Simple enough, right. Clicking Install the Wijit gives me a page where I can do quick installs if I have a TypePad or Blogger blog, but since I'm a WordPress user, I get a simple JavaScript code snippet to include.

<script type="text/javascript" src="http://www.lijit.com/informers/wijits?username=tdhedengren&js=1"></script>
<a style='color: #999' href='http://www.lijit.com' id='lijit_wijit_pvs_link'>Lijit Search</a>

Since I think that the Lijit logo is enough, I removed the link, and then pasted this code in my sidebar, where I previously had the WordPress native search box.

<script type="text/javascript" src="http://www.lijit.com/informers/wijits?username=tdhedengren&js=1"></script>

Simple as that, I've got an integrated search solution powered by Lijit. The great thing is that search results are served in a layer floating above my site, which means that visitors searching for something on my blog won't have to leave, unless they get a hit from any of my other online presences (be it a story on Devlounge, a tweet, or something else from my network), which then will lead to this place, of course.

Simple as that, it took a few minutes playing around to get my very own Lijit search on my site.

Just for fun, let's see how the search box would look with all extra bling-bling enabled, like keyword clouds, extra buttons and icons, and so on.

No, I don't want that, it is too much for me. I like the more minimalistic approach, serving up content from all my online presences when people ask for it (ie search), rather than pushing it forward in this way. But that's up to you, you might like it!

Step 3 - Customizing the Search Wijit for Your Design

While I do think that the Lijit search box looks OK with these basic settings, naturally, I'd like it a bit more customized for my design. This is done by adding some CSS to your stylesheet, which will control the design of the Lijit box just as it would when doing a traditional search form.

However, before you can do this, we'll need to visit the My Search Wijit page again, and choose Style My Own from the Wijit Style dropdown menu, and save. This will change the Lijit search box to something we can style using CSS.

Not too pretty anymore, but we'll fix that. For me, I want a clean and simple form just like the ones I have for posting comments and whatnot on my site. There is not many CSS elements we need to mess with.

• #lwp_main is the main div container
• #lwp_sfb is the form
• #lwp_sfd is the input box
• #lwp_2_searchbutton is the submit button
• #lwp_ps is the container for the search cloud

By adding these to your stylesheet, you can easily style the Lijit search box to fit your design. I just did some minor edits:

#lwp_main { float:right; width: 130px; text-align:right; } /* main div */
#lwp_sbf { overflow:hidden; margin:0; padding:0; } /* the form */
#lwp_sfd { width: 110px !important; margin-bottom: 3px; padding: 2px; border: 1px solid #555; text-align:right; } /* the input box */
#lwp_2_searchbutton { background: #555; color: #fff; font-size: 12px; font-weight:bold; border: 0; text-transform: lowercase; } /* the submit button */
#lwp_2_searchbutton:hover { background:#0c1; }
#lwp_ps {} /* the container for the search cloud */
#lwp_f { width: 130px !important; }

The result is a floated little search box in my larger search box. Since #lwp_main is the containing div, I used that one for this, and put in my own code to float a div with the small informational type to the left. Naturally, you can do a lot more fancy stuff using the custom CSS, so find whatever fits your site and go with it. Most likely, all you'll need to do is take your current code for your searchbox, and put this in the corresponding Lijit CSS element in your stylesheet.

Step 4 - Search Result Variations

Personally, I like the layered div that displays the search result above my design. However, if you want to really embed the search result on your site, this is possible to. It works pretty much like Google Co-Op, which means that you'll create a page on your site containing a code snippet that will display your result.

Setting it up is a breeze. Just go to My Search Wijit and chose On my blog (advanced) in the Display search results dropdown. Then write the URL to your search result page, and paste the code listed in the box below on this page. That's it, very simple, just don't forget to save your settings.

Finished! That's it! As you can see, the amount of work needed to get a working Lijit search on your site is minimal. If you want to customize it, you'll need to mess around a bit more, but it is really more of an issue with your current site's code and design, rather than something clunky in Lijit's interface.

The pro and cons of going with Lijit rather than Google Co-Ops can be discussed, of course. The latter offer the option to include your very own Adsense code, which could generate some money, but Lijit has got the social web thing going in a cooler way. If you've made this choice, feel free to share your reasoning, as well as your verdict should you have one.

Happy searching!