Se trata específicamente de una biblioteca javascript que proporciona unos objetos simples que realizan búsquedas en línea sobre un número de servicios de google (búsqueda Web, búsqueda local, vídeo y búsqueda de Blog); todo ello a través de programación javascript y XML (AJAX).
Constituye una de las tecnologías que compone los Web service. Esto significa que el usuario puede acceder a un sitio Web que implementa esta api, realizar una consulta y obtener los resultados de la misma en el mismo sitio Web sin saber que se esta empleando un servicio Google. Éste es el concepto detrás de Web service
Se ofrece gratuitamente para que los desarrolladores puedan probarla, ya que aun no existe ninguna versión comercial. Pero para poder empezar a utilizarla es necesario registrarse previamente y obtener una clave que otorga un máximo de 1000 peticiones por día. Esto a fines de evitar que otro servidor Web (que implementa servicios de búsqueda de Google) funcione paralelamente a Google.
El tema es como implementarlo en tu propio blog de blogger, aunque Google y otros blogs proveen de amplia información con respecto a este tema, el problema es que la mayoria de estos se encuentran en ingles, asi que puede resultar sumamente incomodo y toda una aventura al mas mismo estilo de los suicidas.
Por supuesto yo siempre curioso logre entender y encontre una forma alternativa para colocar los API´s de Google en el blog, la mayoria de blogs con respecto a este tema dan instrucciones de como introducir esta herramienta como un widget, yo no pude hacerlo no se aún bien porque, asi que me implemente otro camino.
STEP 1: Primero tienes que obtener la API key de http://code.google.com/apis/ajaxsearch/signup.html , es muy simple, acepta las condiciones e ingresa la dirección de tu blog.
STEP 2: Busca
</HEAD> y debajo de este tag y antes del tag <BODY>
coloca el siguiente CODE 1
[+/-] CODE 1
<!-- Google AJAX Search API, Google Maps API -->
<!-- url http://andercismobeta.blogspot.com/ for keys -->
<script src='http://www.google.com/maps?file=api&v=2&key=ABQIAAAAnFoVIBXhN1RjxwjC4sDf5hTteoHnU6ix2Ndytz9-EdaUJYxNFRSEJf-APiCLO8gpW2JROBSK6DPp7Q' type='text/javascript'/>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAnFoVIBXhN1RjxwjC4sDf5hTteoHnU6ix2Ndytz9-EdaUJYxNFRSEJf-APiCLO8gpW2JROBSK6DPp7Q' 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'/>
<!-- video search solution -->
<script src='http://www.google.com/uds/solutions/videosearch/gsvideosearch.js' type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/videosearch/gsvideosearch.css' rel='stylesheet' type='text/css'/>
<!-- map search solution -->
<script src='http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js' type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/mapsearch/gsmapsearch.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;
}
/* mapsearch styles */
#mapsc { width : 100%; }
#mapsc .gsmsc-idleMapDiv { height : 260px; }
#mapsc .gsmsc-mapDiv { height : 260px; }
#mapsc .gs-localResult { color : #676767; }
#mapsc a:link,
#mapsc a:visited { color : #0000cc; }
#hotspots {
padding-left : 8px;
}
#hotspots ul.hotspots {
margin : 0px;
margin-bottom : 4px;
padding : 0px;
}
#hotspots ul.hotspots li {
text-indent : 0px;
font:bold 70%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
display : inline;
padding : 0px;
margin-right : 8px;
cursor : pointer;
}
#hotspots ul.hotspots li:hover {
text-decoration : underline;
}
h3.sidebar-subtitle {
margin:.25em 0 .25em;
font:bold 75%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
/* center column search stuff */
#searchform { width : 100%; margin-bottom : 8px;}
#searchControl .gs-result .gs-title,
#searchControl .gs-result .gs-title * {
color : rgb(153,170,221);
}
#searchControl .gsc-resultsHeader {
border-bottom-color : rgb(99,99,99);
}
#searchControl .gsc-control {
width : 100%;
}
#searchControl .gsc-tabHeader.gsc-tabhActive {
border-left: 1px #636363;
border-right: 1px solid #636363;
border-top: 2px solid rgb(153,170,221);
background: #e9e9e9;
}
#searchControl .gsc-tabHeader.gsc-tabhInactive {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 2px solid #636363;
background: black;
}
</style>
<script type='text/javascript'>
var mapSearch;
var videoSearch;
var coreSearch;
function SolutionLoad() {
var videoOptions = {
twoRowMode : true,
startupDelay : 50
}
videoSearch = new GSvideoSearchControl(
document.getElementById("videosc"), // container
defaultTags, // default tag array
null, // optional load function
null, // optional save function
videoOptions // optional options
);
// set title to the Googleplex and the link to
// the Google corporate information page
// set the hotspot list to the list above
var mapOptions = {
title : "Marks House",
url : "http://en.wikipedia.org/wiki/Santa_Barbara,_California",
hotspots : hotspotsList
};
// create the map search control
mapSearch = new GSmapSearchControl(
document.getElementById("mapsc"),
"Montecito, CA",
mapOptions
);
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
searcher = new GblogSearch();
searcher.setSiteRestriction("http://weblogmusic.blogspot.com/");
searcher.setUserDefinedLabel("Weblog Music");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction("http://andercismo.blogspot.com/");
searcher.setUserDefinedLabel("Andercismo");
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();
searcher.setSiteRestriction("http://cinema00.blogspot.com/");
searcher.setUserDefinedLabel("Cinema");
coreSearch.addSearcher(searcher);
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("The Web");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blogsphere");
coreSearch.addSearcher(searcher);
coreSearch.draw(controlRoot, drawOptions);
}
function doCoreSearch(q) {
coreSearch.execute(q);
}
function doMapSearch(q) {
mapSearch.newSearch(q);
}
function doVideoSearch(q) {
videoSearch.vsf.input.value = q;
videoSearch.searchByString(videoSearch.vsf);
}
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>
2.1 Reemplaza YOUR KEY por tu codigo que obtuviste en el STEP 1
2.2 Este paso es una de las mejores funcionalidades de GOOGLE SEARCH AJAX API, tenes cinco opciones de busquedas, digamos que cinco lugares donde realizar busquedas, uno de ellos es GOOGLE.COM, el otro es BLOGSEARCH , los otros tres seran lugares que eligas segun tus propias preferencias, puede ser tu propio blog, pagina web o cualquier otro site que sea de tu preferencia. Reemplaza DIRECCION WEBLOG por la URL del site o blog donde se hara la busqueda y reemplaza NOMBRE DE LA WEB O BLOG por el nombre del sitio.
STEP 3: Busca el siguiente tag <div id='content-wrapper'><div id='main-wrapper'> y debajo de eso coloca la siguiente linea <div id='searchControl'>Loading...</div>
STEP 4: Busca el tag <div id='sidebar-wrapper'> . Aqui es donde empiezan los widgets, la forma en que colocaremos el GOOGLE SEARCH no sera mediante un widget.
<!-- core -->
<h2 class='sidebar-title'>Google Search</h2>
<div id='searchform'>Loading...</div>
<!-- videos -->
<h2 class='sidebar-title'>Google Video Search</h2>
<div id='videosc'>Loading...</div>
<!-- videos -->
<h2 class='sidebar-title'>Google Map Search</h2>
<div id='mapsc'>Loading...</div>
<h3 class='sidebar-subtitle'/>
<div id='hotspots'>
<ul class='hotspots'>
<li id='hs01'/>
<li id='hs02'/>
<li id='hs03'/>
<li id='hs04'/>
<li id='hs05'/>
<li id='hs06'/>
<li id='hs07'/>
<li id='hs08'/>
<li id='hs09'/>
<li id='hs10'/>
</ul>
</div>
<script type='text/javascript'>
var hotspotsList = [
];
var defaultTags = [
{
query : "BUSQUEDA",
label : "NOMBRE ETIQUETA"
},
{
query : "BUSQUEDA/NOMBRE ETIQUETA"
}
];
</script>
QUERY y LABEL tienen que ver con el GOOGLE VIDEO SEARCH, si tu etiqueta es una frase de dos o mas palabras utiliza QUERY para poner el nombre de la busqueda y LABEL para poner el nombre que sera mostrado, si solo es una palabras simplemente usa QUERY y coloca lo que buscas.
Este código definira la posición de los buscadores en el blog, si los colocas antes de <b:section class='sidebar' id='sidebar' preferred='yes'> los buscadores iran al principio del SIDEBAR, si lo colocas depués de </b:section>; y antes de </div> los buscadores quedaran al final del SIDEBAR, el lugar puede variar incluso lo podes colocar al final del blog o al principio.
Ahora guardas la plantilla. Si le das una vista previa te saldra el siguiente aviso:
no te preocupes solo dale aceptar. Guarda la plantilla y mira tu blog. Tambien es probable que aparesca ese aviso cuando quieras editar los ELEMENTOS DE LA PAGINA , pero no te preocupes solo dale click y listo (no estoy seguro si se debe a algun error, si es asi y alguien sabe como corregirlo que me lo digan por favor), ahi tenes los GOOGLE AJAX SEARCH API. Espero que les sirva la info.
0 comentarios:
Publicar un comentario