GizBuzz » Web development

Making your own OpenSearch plugins

Peter — Mon, 19 Mar 2007 16:48:15 +0000

You may notice that a while back, I did a post on adding Gizbuzz to your Firefox/IE7 search box. You might have wondered how I actually got that to work.

Well, I'm actually going to write a quick tutorial on how you make OpenSearch plugins (which is what that Gizbuzz one was). Normally, my tutorials are the realm of Gizbuzz's sister site FOSSwire, but since this one has quite a lot of relevance to the web in general (not just free/open source software), I thought I'd put it on Gizbuzz.

OpenSearch is a standard being pushed by Amazon's research arm, A9.com. To create a search plugin, you simply need to write a really short XML file containing instructions to the web browser on how to perform the search. The search plugins currently are supported in both Firefox 2.0.x and Internet Explorer 7. Unfortunately, Microsoft's implementation is sadly incomplete, so to retain full cross-browser support you can't use all features of OpenSearch.

Start off by opening up a text editor. Not a word processor, just use something like Notepad (or a dedicated code editor if you have one). Paste in the following as a template:

PLAIN TEXT

XML:

xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
>My test search>
>Searches a test website>>
>utf-8> type="text/html" method="get" template="http://example.com/search?q={searchTerms}">>

Let's have a look at each line in detail:

PLAIN TEXT

XML:

xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">

This line starts off our document. Like the root tag in a web page, it describes what type of document this is.

PLAIN TEXT

XML:

>My test search>

This line identifies the 'short name' of your search plugin. This is the name that will appear on the list of search providers and is the normal text used to identify this search plugin. Keep it nice and short and sweet ('Google', 'eBay' and 'Gizbuzz' are all nice, short names for this).

PLAIN TEXT

XML:

>Searches a test website>

This should be a slightly longer description of what exactly you are searching (for example 'Gizbuzz Blog Archive').

PLAIN TEXT

XML:

>utf-8>

Unless you have a specific reason to change this, leave it as it is.

PLAIN TEXT

XML:

type="text/html" method="get" template="http://example.com/search?q={searchTerms}">>

This is the line that actually makes it all happen, and it's the hardest line to set up (but still really easy). You need to fill the template element with a URL that will perform your search.

The easiest way to snag such a URL is to do this. Head over to the desired site and perform a search for something recognisable (like OPENSEARCHTEST). Now, copy the URL from your browser's location bar and paste it in.

Simply replace OPENSEARCHTEST in the pasted URL with {searchTerms}, and let OpenSearch do the rest.

If you can't see that in the URL of the search results page, you may have come across a site that uses a slightly different method of doing a search. I'm not going to go into how to work with these kind of searches in this tutorial, but I might follow up on this a bit later.

PLAIN TEXT

XML:

Finally, we close everything off. Save that file with a .xml extension and upload it onto a web server somewhere.

The one last step you probably want to do is to actually provide the ability to add your search plugin to a browser. There are two main ways to do this:

Add it to the browser with metadata

The first way is to add it to a web page's metadata. In the section of your page:

PLAIN TEXT

HTML:

href="http://example.com/yoursearchplugin.xml" rel="search" type="application/opensearchdescription+xml" title="My search plugin" />

Simply fill in the URL and a description of your plugin and then if you go to your site, you should notice the arrow on the search box will glow a different colour. Click this, and you should be able to add your new plugin!One potential pitfall - the URL for your plugin must be absolute (it must contain the http:// and the full domain name as well as the path to the XML file).

Add a button

If you want your plugin to be more noticeable, you might want to make a button on your website, which, when clicked, adds the plugin. In your page, include the following JavaScript:

PLAIN TEXT

JavaScript:

function addSearchProvider() {
try {
window.external.AddSearchProvider('http://example.com/yoursearchplugin.xml');
}
catch (e) {
alert("Currently, the search provider function requires either Firefox 2 or Internet Explorer 7.");
return;
}
}

Now make a button which calls this JavaScript when clicked:

PLAIN TEXT

HTML:

value=" Add to search box! " onclick="addSearchProvider();" type="button" />

Once again, fill in your URL in the JavaScript. The same absolute URL pitfall applies here too.

Finishing up

Once you've built your OpenSearch plugin and you're broadcasting it on a web page using either (or both) of the above methods, anyone using Internet Explorer 7 or Firefox 2 can add that search plugin. Once they have, they can just click the arrow on the search box, choose the new plugin and get searching straight away!

I think I've pretty much covered everything - apart from searches that use POST, and of course a couple of advanced topics (like how to add pretty icons to your search plugins). If people liked this, I'll make sure to revisit these topics in a future tutorial!

Control the web from your IM

Huw — Mon, 05 Mar 2007 07:30:19 +0000

IMified, an instant messenging bot which allows you to easily control various different third party web services through their APIs (see explainer post) has risen to popularity over the past couple of weeks.

It's easy to see why - with IMified you can currently post to Wordpress, Blogger, Livejournal, Moveable Type and Typepad blog, keep yourself organised with Remember the Milk, Google or 30boxes calendar and Backpack and collaborate with Basecamp. That's on top of their own Todo, Reminder and Notes apps, all of which work very nicely.

The three services I'm making use of are IMified's own Reminders and Todo list functions, as well as using it to post to my personal blog. At first I was a little sceptical as to whether it was a gimmick or a genuinely useful product, but I have actually found it the latter.

IMified represents one of the good things about Web 2.0 - open architecture. It would be brilliant if this could be expanded so that over my IM I can have notifications of new email, updates on selected feeds and maybe even TV listings.

I'm particularly keen to see IMified and Twitter integration. A post about Twitter, a 'nano blogging' service which allows you to answer the question 'what are you doing?' in 140 characters or less and recieve updates from your friends via IM, text message and web interface, is coming soon on Gizbuzz. Despite the fact that Twitter already uses IM, it would be nice to be able to use it from one bot which does everything.

Over time I would hope that more and more services would be added. At the moment, services must be added by the IMified team, and so perhaps they should look at developing an IMified API that would allow third party developers to integrate their systems into IMified without any help from IMified.

IMified is a service I'm really excited about, and I think it could do extremely well in time. On a sidenote, as far as I can tell, IMified is a side project for its developers and unfunded. I think it's an excellent example of how far a good idea can come without needing to enter the private equity game.

Twitter Compromised

Chris — Sun, 14 Jan 2007 22:04:42 +0000

Today a Twitter user who goes by the name "Bon" utilized a flaw in Twitter's code to post messages on other accounts (through the Twitter API).

Bon's exposure of the bug posted this message on hundreds of Twitter accounts:

Looking at Bon's Twitter page - http://twitter.com/x

Innocent enough, however the fear of hacking was in the air. Soon after the initial run of posts, Bon (who's page appears to be victimized by the flaw as well) posted this message:

Hello everyone. Twitter has not been hacked. It has merely been taken advantage of. This is my little experiment. Everything is safe. Go back to bed.

The messages continued however and there was no certainty as to whether private information (passwords) had been accessed. Drew McClellan set aside those fears and posted this:

looked at Bon's page with curl He's using a CSS url hack to post with the API. It uses the fact that your browser is logged in. Account not compromised

As of right now Twitter appears to be back to normal. Twitterers are twittering that they're sending emails in, so this issue should be resolved shortly.

In the meantime, this begs the question - how much customization is too much? At what point do we need to worry about compromising a user's security? Of course, major sites like MySpace face this problem on a daily basis - in fact we reported on a similar issue at Google a few weeks ago. The web 2.0 space demands customization - however there are obvious drawbacks. It will be occurrences like these that help to define the line between security and creativity.

Update: Jack from Twitter responds in the comments below, noting that Bon did in fact alert Twitter about the bug. It is now patched!

YouTube Redesigns (again)

Chris — Thu, 07 Dec 2006 16:43:12 +0000

YouTube has rolled out the latest element in its recent redesign efforts, now focusing on the upper "fold" of its site.

The San Bruno based site has recently made an effort to enhance their public image, likely due in part to the Google transition. Their logo was enhanced to a more "web 2.0" style, with gradients and reflections, and their interface went through a slight change.

One notable part of this redesign is that it's now extremely image intensive, something most Web 2.0 sites have attempted to drift away from using a combination of XHTML and CSS. Surprisingly, most of YouTube's "mission critical" elements, portions such as the tabs along the top, or something as simple as an "Upload Video" link are now images. From a web design standpoint, these parts could be effectively substituted with standard text (this would also decrease loading time/bandwidth, and no doubt they have problems witih that).

It's a dramatic change as well in YouTube's image, as they've largely dropped their red colouring (it's only prevalent in their logo and flash player). It's an enigmatic change that leaves us asking where are they going next -- what are they preparing for?

Edited slightly to clarify a point, thanks to Sam in the comments for pointing out my mistake.

Is Aptana what I have been looking for?

Huw — Fri, 04 Aug 2006 21:53:51 +0000

Everyone's talking about Aptana, the new open source WebDev IDE on the block, currently in a 0.31 beta release. It's features are listed as:

Code Assist on JavaScript, HTML, and CSS languages, including your own JavaScript functions
Outliner that gives a snapshot view of your JavaScript, HTML, and CSS code structure
Error and warning notification for your code
Support for Aptana UI customization and extensions
Cross-platform support
Free and open source. (Source available soon)

It's the code assist function that got me most excited. I'm not a good web developer at all, and I love the code assist features in Visual Studio which really hold your hand through writing even tricky code syntax. In Aptana I was pleased to find that the feature had been very well executed, closing tags and quotes automatically, and providing useful suggestions. However, problems arose when I forgot a tag within which I wanted to nest a series of others, and so some sort of easy 'off switch' for the automation would be useful.

The only major feature which Aptana is lacking at the moment as far as I can see is PHP support. The developers say they are working on this, and once it is finished I have no doubt that Aptana will become a valuable part of many web devs, both professional and amateur.