OpenSearch – Adicione seu site na barra de buscas do navegador

Os navegadores um pouco mais modernos tem uma barra de buscas pra você pesquisar na Internet.

opensearch

O Firefox em português por exemplo além da busca no Google já vem com busca pra Wikipedia, Yahoo, Buscapé, Mercado Livre, etc (e boa parte dos lucros da Mozilla vem dessa barra de busca, acreditem).

Mas o que pouca gente sabe, é existe um método em javascript capaz de adicionar uma fonte nova de pesquisa na barra.

Primeiro é necessário criar um xml:

< ?xml version="1.0" encoding="UTF-8"? >
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Buscar no TidBits</ShortName>
<Description>Programação Front End e Arquitetura de Informação</Description>
<InputEncoding>iso-8859-1</InputEncoding>
<OutputEncoding>iso-8859-1</OutputEncoding>
<Url type="text/html" template="http://www.tidbits.com.br/?s={searchTerms}"/>
<Image height="16" width="16" type="image/x-icon">http://www.tidbits.com.br/img/tidbits_fav_ico.gif</Image>
<Language>pt-BR</Language>
<Developer>Danilo Augusto Martins</Developer>
</OpenSearchDescription>

A estrutura como podem ver é bem simples, o único truque está na Url da busca :
<Url type=”text/html” template=”http://www.tidbits.com.br/?s={searchTerms}”/>

Onde {searchTerms} é a palavra que o site vai receber do Navegador, ou seja, o que o usuário digitou.

Depois, é necessario colocar no <head> uma linha específicando que existe uma aplicação opensearch:

<link title="Busca no TidBits" rel="search" type="application/opensearchdescription+xml" href="http://www.tidbits.com.br/opensearch.xml">

Agora o comando em javascript que faz isso é mais simples ainda, é só chamar o xml através do método AddSearchProvider:

window.external.AddSearchProvider('http://www.tidbits.com.br/opensearch.xml');">

Ou seja, de uma maneira porca, basta um onClick num link / botão:

<a href="#" onclick=" window.external.AddSearchProvider('http://www.tidbits.com.br/opensearch.xml');">
Adicione o TidBits na busca do seu navegador
</a>

E veja o resultado:


Adicione o TidBits na busca do seu navegador

O método não funciona em todos os browsers, pelos meus testes, funcionou no Firefox 2, Firefox 3 e Internet Explorer 7. Num total os 3 browsers, hoje, tem uma participação de 50% aproximadamente do mercado de browsers. Na especificação do IE8, diz que o método funciona, mas pelo que testei, não rolou, e ví bastante gente em fóruns reportando o mesmo problema (se alguém tiver alguma solução, poste aqui nos comentários por favor).

Mas, obviamente, o ideal é verificar o browser do usuário, e só mostrar o botão de adicionar se for um desses browsers:

Então vamos lá, crie o html:

<a id="opensearch" href="#">
Adicione o TidBits na sua barra de Busca do seu navegador
</a>

No css, deixe o botão com display:none :

#opensearch{ display:none; }

E no javascript:

var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf("msie 7")!=-1 || agt.indexOf("firefox/2")!=-1 || agt.indexOf("firefox/3")!=-1) {
document.getElementById("opensearch").style.display = 'block';
document.getElementById("opensearch").onclick = function(){
window.external.AddSearchProvider("http://www.tidbits.com.br/opensearch.xml");
return false;
}
}

Bom, é isso.

Implementei um desses no meu site sobre o Corinthians, quem quiser ver (e obviamente estiver usando FF2, FF3 ou IE7), olha lá:


http://www.noticiasdocorinthians.com.br

Espero que tenham gostado.

Abraços,

4 thoughts on “OpenSearch – Adicione seu site na barra de buscas do navegador

  1. Legal!

    Não sabia dessa feature, interessante isso aí, o site do corinthians também tá bem bacana.

    Faz mó cara que não posta nada hein Danilão. Sem tempo pra nada ?

    Abraço.

  2. Só faltou dizer que
    template=”http://www.tidbits.com.br/?s={searchTerms}”

    funciona para sites geridos pelo WordPress. Para um outro, tem que deixar a estrutura da url conforme o sistema de busca do seu site!

    Abs!

Leave a Reply

Your email address will not be published. Required fields are marked *