Seu site na barra de buscas do navegador

E ai galera! Esta dica é mais voltada para donos de sites ou blogs, mas qualquer pessoa que gosta de praticidade na hora de realizar buscas em seus sites preferidos, pode aproveitá-la também.

A grande maioria dos usuários que utilizam as versões mais recentes de seus navegadores favoritos ( Firefox 2 e 3 e Internet Explorer 7 e 8 ) conhecem e usam a famosa barra de buscas que normalmente fica situada na parte superior direita do navegador, que provê acesso rápido a vários mecanismos de buscas em um único formulário, de uma forma simples e rápida.

Por padrão, os principais mecanismos de busca já se encontram incluídos neste formulário, como Google, Yahoo e Live Search, além de algumas buscas extras, como Wikipédia, Buscapé e Mercado Livre.

Se o navegador não julga o meu site como importante o suficiente para ser incluído como busca padrão em sua barra, como eu posso adicionar a busca do meu site neste mecanismo?

Simples, basta criar um adicionador usando o padrão OpenSearch e disponibilizá-lo para que os visitantes possam adicionar a minha busca entre seus provedores de busca favoritos. O padrão OpenSearch normaliza os padrões de sintaxe usados na criação de sistemas de buscas, tornando-os compatíveis com a maioria dos navegadores, para que os pobres desenvolvedores não precisem criar uma busca diferente para cada navegador utilizado pelo usuário. Padrões abertos são importantes e facilitam a vida! Certo, Microsoft?

1. Definindo o Sistema de Busca: Para se criar um provedor de buscas, o site em questão deve possuir um sistema de buscas interno que possa receber parâmetros pelo método GET, ou seja, receber o conteúdo que deseja ser buscado através de uma URL.

Exemplo: Blogs baseados no sistema WordPress, possuem um mecanismo de buscas interno onde a expressão buscada, no caso a palavra Linux, é passada para o arquivo responsável pela busca (index.php) através da variável “s”, onde a busca é feita e retornada ao usuário. O mesmo exemplo é facilmente observado no Google.

http://pliniotorres.wordpress.com/index.php?s=linux

http://www.google.com.br/search?q=linux

2. Montando o Arquivo de Adição: Após definir a busca, vamos montar o arquivo XML responsável por adicionar a sua busca ao sistema de buscas da barra do navegador. Abra um arquivo em branco no bloco de notas e adicione os seguintes comandos:

<?xml version=”1.0″ encoding=”iso-8859-1“?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”>
<ShortName>Blog do Plínio Torres</ShortName>
<LongName>Blog do Plínio Torres – O equilíbrio que mantém os sistemas funcioando</LongName>
<Description>Blog sobre informática e tecnologia</Description>
<Url type=”text/html” template=”http://pliniotorres.wordpress.com/index.php?s={searchTerms}”/>
<Image height=”64″ width=”64″ type=”image/png”>http://pliniotorres.wordpress.com/imagens/icone64.png</Image>
<Image height=”16″ width=”16″ type=”image/png”>http://pliniotorres.wordpress.com/imagens/icone16.png</Image>
<Language>pt-br</Language>
<OutputEncoding>iso-8859-1</OutputEncoding>
<InputEncoding>iso-8859-1</InputEncoding>
</OpenSearchDescription>

Salve o arquivo com a extensão XML, usando um nome minúsculo e sem espaços: busca.xml

Download do exemplo aqui.

Explicando:

Este é o cabeçalho do arquivo OpenSearch. O padrão para o encoding deste documento é UTF-8, mas para evitarmos problemas com acentuação, definiremos a encoding iso-8859-1.

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”>

Em ShortName, LongName e Description, preencha as tags com o nome e a descrição do seu site ou blog, como no exemplo abaixo. Este nome aparecerá na hora de selecionar o provedor na barra de buscas.

<ShortName>Blog do Plínio Torres</ShortName>
<LongName>Blog do Plínio Torres – O equilíbrio que mantém os sistemas funcioando</LongName>
<Description>Blog sobre informática e tecnologia</Description>

A tag template é a mais importante do arquivo. Aqui é definido o endereço que será usado pela busca interna do seu site. Basta adicionar o endereço da busca, mais o local onde o termo pesquisado deve ser encaixado no endereço. O local onde o termo será adicionado é representado pela variável {searchTerms} e não deve ser modificado.

<Url type=”text/html” template=”http://pliniotorres.wordpress.com/index.php?s={searchTerms}”/>

Outro exemplo:
<Url type=”text/html” template=”http://www.seusite.com.br/busca.php?termo={searchTerms}”/>

A tag image define os ícones que aparecerão na lista de provedores disponíveis na barra do navegador. Crie dois Favicons, um de tamanho 16X16 e outro 64X64 pixels, ambos em formato PNG e indique o caminho onde eles se encontram hospedados no seu site.

<Image height=”64″ width=”64″ type=”image/png”>http://pliniotorres.wordpress.com/imagens/icone64.png</Image>
<Image height=”16″ width=”16″ type=”image/png”>http://pliniotorres.wordpress.com/imagens/icone16.png</Image>

A tag Language define em qual linguagem o site de buscas se encontra e as tags OutputEncoding e InputEncoding definem em qual padrão o termo de busca deve ser introduzido no formulário e como o resultado da pesquisa deve ser mostrado para o internauta. Como eu citei anteriormente, o padrão aqui é UTF-8, mas devido a alguns problemas na busca de palavras acentuadas, mudei a encoding para iso-8859-1 e o problema foi solucionado.

<Language>pt-br</Language>
<OutputEncoding>iso-8859-1</OutputEncoding>
<InputEncoding>iso-8859-1</InputEncoding>

Finalizando, fechamos o arquivo com a tag </OpenSearchDescription>.

3. Adicionando o Provedor de Buscas: Agora, basta disponibilizar um link onde o usuário possa adicionar o provedor de buscas criado ao seu navegador. Para isso, crie um link em um texto ou em uma figura, através do chamado JavaScript window.external.AddSearchProvider, para o arquivo XML hospedado em sua página.

Exemplo:

<a href=”javascript:void(window.external.AddSearchProvider
(’http://www.seusite.com.br/busca.xml’));”>
Adicionar este site a lista de Provedores de Busca!</a>

Infelizmente, o WordPress não permite o uso de JavaScript em suas páginas e esta é a única maneira de se adicionar o provedor. Então, para demonstrar o funcionamento do script, criei um link com o adicionador no meu site pessoal, confira:

Clique aqui para adicionar o Blog do Plínio Torres a Lista de Provedores de Busca

Após adicionar o Provedor de Buscas, basta selecioná-lo e digitar o termo a ser pesquisado e pronto! Você tem acesso rápido e direto ao sistema de buscas do seu site.

O adicionador funcionou bem com o Firefox e ao Internet Explorer. Peço aos leitores de plantão que testem o recurso em outros navegadores, com o Opera.

Espero que este post seja útil, dúvidas nos comentários!

Tags: busca, dica, firefox, ie, javascript, Livre, navegador, opensearch