Links rápidos: conteúdo, navegação, busca.

Navegação

Criando um Plugin de Busca OpenSearch para o seu Site

6. 08. 2008 – Categoria: Firefox, SEO

Depois de dar algumas dicas de plugins de busca e de atalhos para agilizar a operação da caixa de busca do seu browser, agora vou explicar de forma simples e objetiva como criar um plugin de busca para o seu site.

OpenSearch

O OpenSearch é um formato de descrição para plugins de busca. Os plugins que utilizam a sintaxe de descrição do OpenSearch (OpenSearch Description Syntax) são compatíveis com o IE7 e o Firefox, sendo que o Firefox suporta algumas sintaxes adicionais que não fazem parte do OpenSearch Description Syntax como por exemplo o auto suggest. Neste artigo vou mostrar como fazer um plugin que funcione nos dois browsers.

Sintaxe básica do Plugin

A criação do XML que descreve o plugin é bem simples. Abaixo vou mostrar um template, onde as propriedades que estiverem marcadas em negrito devem ser personalizadas para sua engine de busca.


<OpenSearchDescription
 xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Nome</ShortName>
<Description>Descrição do motor</Description>
<InputEncoding>Encoding</InputEncoding>
<Image width="16" height="16"
type="image/vnd.microsoft.icon">Url da imagem</Image>
<Url type="text/html" method="método" template="URL" />
</OpenSearchDescription>

Onde…

Nome

É o nome do seu motor de busca. É aconselhável que não seja um nome grande.

Descrição do motor

Descrição curta de seu motor de busca.

Encoding

O encoding que será usado (Ex.: UTF-8)

Url da imagem

Ícone que será exibido na caixa de busca. Normalmente usado o favicon.ico de seu site. Vale ressaltar que para imagem, existem 2 formas de se usar. A primeira é como foi mostrado no exemplo acima, onde você passa somente a url da imagem. A segunda forma é colocando a imagem codificada em Base-64. Dessa forma ficaria algo como: <Image width="16" height="16">data:image/x-icon;base64,AAABAAEAEBAAA</image>. Existem vantagens e desvantagens ao usar cada forma de passar a imagem, ai vai depender de como você entende suas necessidades. Exemplo, se você colocar a url para sua imagem, sempre que você atualizar seu favicon.ico ele vai atualizar no plugin. Já se você usar os dados da imagem na Base-64, vai diminuir a quantidade de requests. Sobre os prós e contras vou pedir que vocês me ajudem enviando um comentário com sua opnião;

Método

GET ou POST, lembrando que para IE7 o POST não funciona.

URL

Página do site que mostra o resultado da busca. A url deve ser concatenada com a string {searchTerms} para que o browser possa substituir na url as palavras digitadas na caixa de busca. Caso você precise passar mais de 1 parâmetro na url, eles deve ser concatenados com "&" e não somente com "&". Exemplo de url: http://busca.globo.com/Sites/G1/buscar.ssp?query={searchTerms}&ordem=data

Exemplo

Clique aqui e veja um exemplo de xml pronto!

Disponibilizando o plugin de busca no seu site

Para disponibilizar o plugin no seu site você pode optar pelo link para instalação e/ou pelo descobrimento automático. As duas opções são bem simples e fácil de implementar.

Criando um link para instalacao

Basta colocar o seguinte código e trocar a string #LINK_PARA_O_XML# pelo seu valor real: <a href='#LINK_PARA_O_XML#' onclick="window.external.AddSearchProvider('#LINK_PARA_O_XML#');"> baixar </a>

Descobrimento automático

Instalacao no IE7

O funcionamento do descobrimento automático é, ao abrir a página o browser identifica por uma tag no html que aquele site disponibiliza um ou vários plugins para instalação, e ao clicar nas opções de busca da caixa de buscas do seu browser ele gera um ítem de sugestão com o plugin do seu site.

Para usar essa funcionalidade basta colocar o seguinte código entre a tag <HEAD> do seu site e trocar as strings #NOME_DO_SEU_SITE# e #LINK_PARA_O_XML#' pelo seu valor real: <link rel="search" type="application/opensearchdescription+xml" title="#NOME_DO_SEU_SITE#" href="#LINK_PARA_O_XML#' " />

Considerações finais

Vale ressaltar que o XML deve estar bem formado, pois o browser verifica a formação dele e caso esteja com problemas, não deixa prosseguir a instalação.

Baixe e sugira plugins de busca aqui!

Aprenda os atalhos para usar a busca do seu browser

6 Responses to “Criando um Plugin de Busca OpenSearch para o seu Site”

1
Kenji Yamamoto Says:
agosto 6th, 2008 at 17:27
Enrico, fiz um teste aqui que acho que a galera da globo.com vai gostar, nosso sistema de Telefonia agora no OpenSearch do Firefox.
http://kenjiyamamoto.com/telefonia/
[]´s
2
Enrico Says:
agosto 6th, 2008 at 19:21
Boa Kenji! Já adicionei aqui!
3
Vai dar gosto de usar o Plugin de Busca do Firefox. Atalhos! | Enrico Fonseca Says:
agosto 27th, 2008 at 1:13
[...] No próximo artigo vou mostrar como criar um plugin de buscas usando o formato open search. [...]
4
Websites tagged "opensearch" on Postsaver Says:
setembro 26th, 2008 at 23:47
[...] - Criando um Plugin de Busca OpenSearch para o seu Site saved by ladyofEarth2008-09-22 - Jeff Waugh: Projects that make my WordPress rock! saved by [...]
5
Pirrassa Says:
junho 21st, 2009 at 18:11
Enrico,
Muito boa sua dica.
O link para: “Clique aqui e veja um exemplo de xml pronto!” - “http://www.enricofonseca.com.br/blog/wp-content/uploads/opensearch/g1.xml” está quebrado, o resultado é “Página não encontrada”.
A propósito, URL deve ser referido como “O” URL.
De “Uniform Resource Locator”, em português “Localizador de Recursos Universal”, portanto no masculino.
6
Plugins de Busca úteis para Firefox e IE7 - opensearch Says:
setembro 1st, 2009 at 12:47
[...] Criando um Plugin de Busca OpenSearch para o seu Site [...]