Del.icio.us | Perfil | Contato

Carregando...

domingo, dezembro 17, 2006

Google™ API Search - Tutorial de implementação de Busca

Esse post objetiva oferecer uma tradução do post Simple Hack: Basic Ajax Search Utility do Hoctro's place, um blog especializado em Hacks para Blogger™. Nesse tutorial, o Hoctro oferece aos usuários uma caixa de busca do Google™ AJAX API.
Essa caixa, por ser mais estilizada, e poder ser combinada com o AdSense™, pode aumentar a sua possibilidade de ganhos. Além disso, ela tem uma gama de possibilidades de pesquisas. Desde a Web, o próprio Blog, ou o Blogger™.
Ele criou esse post, através de um pedido meu, e como retribuição, em primeiríssima mão, o E-Opportunities traz aos Brasileiros e aos Portugueses um tutorial em Português(PT e BR) sobre a instalação do GOOGLE™ API AJAX SEARCH UTILITY.
Para mais hacks sobre o Blogger™ não deixem de conferir o blog do Hoctro!



Tutorial - Busca - GOOGLE™ API


Passo 1:

Consiga a sua senha/chave API no endereço: http://code.google.com/apis/ajaxsearch/signup.html
É muito fácil e rápido. Basta adicionar o endereço correto do seu blog/site e clicar em sign up que a senha será gerada automaticamente.


Passo 2:

Adicione o CSS e o Código ao cabeçalho, justamente depois da tag ] ] ></b:skin> . Troque as chaves em negrito que aparecem duas vezes no código pela sua chave.

<script

src='http://www.google.com/maps?file=api&amp;v=2&key=wW9cday6o7K3g' type='text/javascript'/>
<script

src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=wW9cday6o7K3g' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }

/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }

/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }

/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }

/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}

</style>
<script type='text/javascript'>
var coreSearch;


function SolutionLoad() {

var controlRoot = document.getElementById("searchControl");

// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

// populate - web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("The Web");
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blogsphere");
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setSiteRestriction("http://hoctro.blogspot.com/");
searcher.setUserDefinedLabel("Hoctro's Place");
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setSiteRestriction("http://googleblog.blogspot.com/");
searcher.setUserDefinedLabel("Google Blog");
coreSearch.addSearcher(searcher);

searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.blogger.com/");
searcher.setUserDefinedLabel("Blogger");
coreSearch.addSearcher(searcher);

coreSearch.draw(controlRoot, drawOptions);

}

function doCoreSearch(q) {
coreSearch.execute(q);
}


registerLoadHandler(SolutionLoad);

function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>


Passo 3:

Adicione essas duas novas Widgets ao seu blog, atentando para o fato de que a opção Expand Widget esteja marcada. No nosso caso estou numerando as duas como 1 e 2. Mas se você já criou widgets antes então eu recomendo você colocar outros números.

<b:widget id='HTML1' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchform'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:widget id='HTML2' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchControl'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Passo 4:

Mova livremente pelo seu template as Widgets através da guia Elementos da página do Blogger. Fique a vontade para colocar onde quiser a widget da caixa de busca e a widget dos resultados.



Note que nessa tela aparecerá um popup de javascript contendo uma mensagem de que a chave não é válida. Ela não é válida porque você está montando o blog em um domínio diverso daquele que foi designado inicialmente. Ou seja, a chave está rodando em um domínio beta.blogger.com e não no seu domínio. Porém quando você salvar vai tudo dar certo.



Passo 5:

Perceba que as guias tem a denotação Hoctro's place. Ou seja, basta a você personalizar a sua caixa de busca para ela apresentar o seu blog.

searcher = new GblogSearch();
searcher.setSiteRestriction("http://hoctro.blogspot.com/");
searcher.setUserDefinedLabel("Hoctro's Place");
coreSearch.addSearcher(searcher);




Integração com o AdSense™


Para integrar com o AdSense™ você vai ter que se cadastrar no site Co-Op do Google e fazer a sua própria página de busca. No painel de controle da Custom Search Engine, você vai achar o seu código. No meu caso é 012143412345664832938:fenhupur9ci.

Então para integrar ao AdSense™ basta você criar uma nova guia com a sua própria Search Engine, adicionando esse código:

searcher = new GwebSearch();
searcher.setSiteRestriction("012143412345664832938:fenhupur9ci");
searcher.setUserDefinedLabel("A Web");
coreSearch.addSearcher(searcher);


Bem, por hoje é só. Espero que tenham gostado.

Abraços


3 comentários:

VF disse...

O nível deste blog está sempre a aumentar. Parabéns!

Blogger disse...

É com grande satisfação que recebo o seu elogio. Me empenho diariamente para trazer aos meus leitores o que há de melhor e mais pertinente a todos.

Muito obrigado,

S.Phoenix

KiX disse...

muito bom o tutorial, mas aqui deu erro

no passo 2, na hora de salvar, o blog acusa erro de xml, que a chave key deve ser terminada com um ;?

voce poderia me ajudar?

abraço!