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&v=2&key=wW9cday6o7K3g' type='text/javascript'/>
<script
src='http://www.google.com/uds/api?file=uds.js&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
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&v=2&key=wW9cday6o7K3g' type='text/javascript'/>
<script
src='http://www.google.com/uds/api?file=uds.js&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
