OpenSearch-enabling your blog

January 30th, 2009. Tagged: WordPress

Have you noticed when you visit some sites, there's a bluish glow in the search engine field in Firefox. Like this:

open search example firefox

What does that even mean? Well, it means you can add this site's search to the drop down list of search engines. This functionality is following the open search standard.

The things are actually pretty simple. You need to have an XML file <link>-ed to from your page.

For example on this blog I have this in the head:

<link 
  rel="search" 
  type="application/opensearchdescription+xml" 
  href="http://www.phpied.com/wp-content/plugins/open-search/open-search-xml.php" 
  title="phpied.com : Search in posts"
/>

So how do you add open search capability to your blog? With the OpenSearch plugin for WordPress, naturally.

BTW, if you're running PHP4 you might get errors during installation, in this case just open up the open-search-class.php and

  • replace all "public static" with empty string
  • replace all "private static" with empty string
  • replace all "self::" with "OpenSearch::"

This is it, enjoy and if you want to change the default icon, you need to look into replacing the image found in /wp-content/plugins/open-search/default-favicon.png

Here's what you get at the end:

And now your readers can add your search to their browser and quickly find content on your blog. Sweet.

Tell your friends about this post: Facebook, Twitter, Google+

15 Responses

  1. Nice one. I’ve just sent this to Word-reference.com so I can translate words by righ-clicking them. I’ve set this up myself on my home PC but can’t be bothered doing it on every PC I use.

  2. Niice, thanks Stoyan …
    How do people see these things … that tiny glowing blue dot on gray background yak! :)

  3. yep, Sorin, very subtle :)

    On red hat looks more visible:

  4. hey stoyan
    another way to do the image is to include it in the xml itself as a base64 encoded png
    I at least prefer that way in sites I’ve worked on after I’ve optimized the png

  5. Thanks lolol, that’s what this plugin seems to do.

    Good point about optimizing the png :)

  6. ah how foolish of me to not actually look through the code
    maybe I am breaking some sort of standards by not using os: tags like you
    Also will wordpress always make such a ridiculously long description line?
    optimization seems to usually matter more for things that get encoded to base64, as in your image’s case 342bytes for image = 484bytes of base64, while optimized only a 66 byte diff of 276bytes for the optimized image is a difference of 116 bytes for the encoded file compared to the original

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA20lEQVR4XmXN3ypFQRSA8cVzUN5hnZ7KioP4EYipdIJnahDhAokuSU6J5v9d8xsn9VUk5m9vsv1mzWisySZ5Ekrsihhsq6wvSNEx9rqf5LbvqL2ffHJO4431gNZkNzRYmi1koIPHA0VG0oCMEwYs88uW2yGryTXrQdYnGbpDczPniNgeOME445YJ89dthmngItXGko+U7BNRdMOWXCEYeMaWIQ3zBal4IHbrnhikvOtekA+Kz2E0rAC8888cg9dz4bgV8lw3oFfkamdv1wbUrJxM+yjNQOy3QjfgORR5brtfZAAAAAElFTkSuQmCC

  7. I am sorry if I post this comment at the wrong place , but I can’t found any other ways to contact YOU.

    When I was reading the book “Object-Oriented Javascript”, at page 103 ,Chapter 4 , I doubt the correctness of your examples.

    You said :

    >>> function Hero(){}
    >>> var h = new Hero();
    >>> var o = {};
    >>> h instanceof Hero;
    true
    >>> h instanceof Object;
    false
    >>> o instanceof Object;
    true

    How can “h instanceof Object” be false ? I guess you want to say o instanceof Hero be false , am I right ?

    Notify me through email ,please .

  8. Yes, Zel, you’re absolutely right. instanceof follows the inheritance chain so

    h instanceof Object is indeed true

    Also

    >>> Object.prototype.isPrototypeOf(Hero)
    true

  9. thanks , another question .
    I doubt the example from your explanation of “Lazy defination”.

    At page 273 ,chapter 8 .

    Your code like this :

    *****************************
    var MYAPP = {};
    MYAPP.myevent = {
    addListener: function(el, type, fn){
    if (typeof el.addEventListener === ‘function’) {
    MYAPP.myevent.addListener = function(el, type, fn) {
    el.addEventListener(type, fn, false);
    };
    } else if (typeof el.attachEvent === ‘function’){
    MYAPP.myevent.addListener = function(el, type, fn) {
    el.attachEvent(‘on’ + type, fn);
    };
    } else {
    MYAPP.myevent.addListener = function(el, type, fn) {
    el['on' + type] = fn;
    };
    }
    MYAPP.myevent.addListener(el, type, fn);
    }
    };

    ************************************
    This code should be runnable , but does addListener() only be defined once like this ?

    There is no return statement in your code , how can the subsequent calls of addListener() avoid running the branching?

    Notify through email please . Thanks

  10. hey Zel,

    Thanks for the question

    MYAPP is a global variable, when you modify
    MYAPP.myevent.addListener
    even from inside a function, you’re still modifying the property of a global object.

    same if you go something like:
    GLOBAL = 1;
    function a() {
    GLOBAL = 2;
    }
    a();
    alert(GLOBAL); // 2

    In the example you quote, the branching happens only once and during that first call the function overwrites itself. So the second time you use it, it has a new body which doesn’t have branching code in it.

    You can easily test though. Just add a console.log call, like:

    ...
    MYAPP.myevent = {
      addListener: function(el, type, fn){
        console.log('called');
        if (typeof el.addEventListener === 'function') {
          //....
    

    then use the function like
    MYAPP.myevent.addListener(window, 'click', function(){alert('click')});
    (this will pring “called” in the console)
    and then again one more time
    MYAPP.myevent.addListener(window, 'click', function(){alert('click 2')});
    (this will not print in the console)

    Hope that helps!

    S

  11. [...] OpenSearch-enabling your blog / phpied.com (tags: tutorial php blog plugin webdev opensearch firefox) [...]

  12. [...] OpenSearch-enabling your blog / phpied.com http://www.phpied.com/opensearch-enabling-your-blog – view page – cached Stoyan’s blog about (x)html, ajax, bookmarklets, browsers, css, firebug, javascript, json, mdb2, mysql, pear, performance, php, phpbb, tools, yslow, yui, writing, music,… life and everything. — From the page [...]

  13. “This functionality is following the open search standard.”
    What I can not believe!

  14. Great post. I was checking continuously this blog and I’m impressed!
    Extremely useful info specially the last part :
    ) I care for such information much. I was looking for this particular info for a long time.
    Thank you and good luck.

  15. Wonderful website. Plenty of useful information here.
    I am sending it to some pals ans additionally sharing in delicious.
    And obviously, thanks to your effort!

Leave a Reply