Gadget personalizado para búsqueda en YouTube | Oloblogger Este es un cacharrito muy cortito de código (si le quitáis los comentarios mucho más), que permite mostrar en un gadget una serie de resulta...

25 de marzo de 2014

Gadget personalizado para búsqueda en YouTube

Este es un cacharrito muy cortito de código (si le quitáis los comentarios mucho más), que permite mostrar en un gadget una serie de resultados de búsqueda sobre YouTube, en función de ciertas palabras programadas de antemano.

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>

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}

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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

10 comentarios :

  1. eso no hace efecto a una pagina con adsense para que aparescan solo video de musica

    ResponderEliminar
    Respuestas
    1. Lo 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.

      Eliminar
  2. Muchas gracias Oloman, ya lo coloqué <3

    ResponderEliminar
  3. Bueno 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

    ResponderEliminar
    Respuestas
    1. Me alegro. Es la misma manera en que aprendo yo :)

      Eliminar
  4. Hola Oloman, hay alguna manera de obtener algo asi:

    searchControl.execute("AQUI MI TITULO O ETIQUETA");

    Así mostraría cosas relacionadas al post.

    Gracias de antemano

    ResponderEliminar
    Respuestas
    1. No 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

      Eliminar
  5. Anónimo9/8/15, 4:27

    Hola Oloman, sabe si hay manera de obtener la url del primer video y colocarla en un iframe ? gracias.

    ResponderEliminar