Como cosas extra, el usuario podrá introducir sus propias palabras para obtener otros resultados e incluye diversas opciones de configuración para este.
Puede servir para poner vídeos relacionados con la temática de vuestro blog o incluso afinando bien con las palabras clave, para que salgan algunos en concreto que queráis mostrar expresamente.
El código está casi tal cual lo encontré en una demo para la API de YouTube, así que no preguntéis mucho sobre posibles variaciones que va a ser que no sabré. Lo que pillé ya lo he comentando en el propio código. Sería este:
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
function OnLoad() {
// Crea un control de búsqueda
var searchControl = new google.search.SearchControl();
// Los resultados aparecen expandidos por defecto
options = new google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
// Crea un buscador de vídeos personalizado
var videoSearch = new google.search.VideoSearch();
// Indicar el parámetro(s) para ordenar los resultados
videoSearch.setResultOrder(google.search.Search.ORDER_BY_RELEVANCE);
videoSearch.setResultOrder(google.search.Search.ORDER_BY_DATE);
// Añadimos nuestro buscador al control
searchControl.addSearcher(videoSearch, options);
// Inserta el buscador en la página mediante una id (busquedaYT)
searchControl.draw(document.getElementById("busquedaYT"));
// Sustituir "blogger" por la palabra(s) que queráis que se busquen por defecto
searchControl.execute("blogger");
// También se puede buscar mediante un feed de YouTube
}
google.setOnLoadCallback(OnLoad);
</script>
<script type="text/javascript">
google.load('search', '1');
function OnLoad() {
// Crea un control de búsqueda
var searchControl = new google.search.SearchControl();
// Los resultados aparecen expandidos por defecto
options = new google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
// Crea un buscador de vídeos personalizado
var videoSearch = new google.search.VideoSearch();
// Indicar el parámetro(s) para ordenar los resultados
videoSearch.setResultOrder(google.search.Search.ORDER_BY_RELEVANCE);
videoSearch.setResultOrder(google.search.Search.ORDER_BY_DATE);
// Añadimos nuestro buscador al control
searchControl.addSearcher(videoSearch, options);
// Inserta el buscador en la página mediante una id (busquedaYT)
searchControl.draw(document.getElementById("busquedaYT"));
// Sustituir "blogger" por la palabra(s) que queráis que se busquen por defecto
searchControl.execute("blogger");
// También se puede buscar mediante un feed de YouTube
}
google.setOnLoadCallback(OnLoad);
</script>
Luego, dónde queramos que aparezca el buscador simplemente insertamos una caja con la id busquedaYT. Si todo lo anterior lo pusimos en un gadget tipo HTML/JavaScript, esto simplemente lo añadimos a continuación.
<div id="busquedaYT">Loading...</div>
El resultado con ese mismo código sería este:
Loading...
El gadget es adaptable, pero si necesitáis algunos ajustes CSS:
/* Contenedor general */
#busquedaYT {}
/* Caja del buscador */
#busquedaYT table.gsc-search-box {}
/* Contenedor de cada resultado */
.gsc-result {}
/* Imagen en miniatura */
.gs-result img.gs-image, .gs-result img.gs-promotion-image {}
/* Caja de texto */
.gs-result img.gs-image, .gs-result img.gs-promotion-image {}
/* Paginación */
.gsc-results .gsc-cursor-box {m}
#busquedaYT {}
/* Caja del buscador */
#busquedaYT table.gsc-search-box {}
/* Contenedor de cada resultado */
.gsc-result {}
/* Imagen en miniatura */
.gs-result img.gs-image, .gs-result img.gs-promotion-image {}
/* Caja de texto */
.gs-result img.gs-image, .gs-result img.gs-promotion-image {}
/* Paginación */
.gsc-results .gsc-cursor-box {m}
En este enlace de Google Code Playground podéis experimentar con este JavaScript para conseguir vuestros artilugios algo más personalizados.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
muy bueno gracias
ResponderEliminareso no hace efecto a una pagina con adsense para que aparescan solo video de musica
ResponderEliminarLo de Adsense no tiene nada que ver. Simplemente deberás escoger adecuadamente las palabras clave para el buscador, de manera que salgan el tipo de vídeos que quieres.
EliminarMuchas gracias Oloman, ya lo coloqué <3
ResponderEliminarBueno Olo, que bien tu el tutorial...me pusiste a hechar "coco" pero al fin logre colocar el cachorrito en mi blog "ensayo y error" de tu instrucciones. Gracias
ResponderEliminarMe alegro. Es la misma manera en que aprendo yo :)
EliminarNo sé si sería muy eficaz la búsqueda de vídeos basada en las etiquetas, pero me ha gustado la idea. Me la apunto y a ver si puedo probarla. Si me sale algo que sirva ya lo publico. Gracias
ResponderEliminarHola Oloman, sabe si hay manera de obtener la url del primer video y colocarla en un iframe ? gracias.
ResponderEliminarHola Andrew ¿el primer vídeo de qué?
Eliminar