Quantcast
Channel: Blog – Diseño Web Roger Soto en los Olivos
Viewing all articles
Browse latest Browse all 11

youtube widget wordpress

$
0
0

En Diseño Web Roger Soto siempre digo No hay que inventar la rueda a menos que sea absolutamente necesario, y al parecer este fue el caso, necesitaba un youtube widget wordpress que me muestre una lista de los ultimos videos subidos por un usuario a youtube, y claro busque por internet a ver si ya habia uno y como no lo encontre me hice uno, en realidad no es dificil es basicamente un lector de rss y basado en el api de youtube

La implementaciones super facil:

Primero solo abren el administrador de wordpress escojen apariencia/widgets buscan el que dice “Texto o HTML arbitrario” lo arrastran hasta su sidebar o footter, y dentro del windget pegan el codigo que esta mas abajo, guardan actualizan.

Segundo
van al canal de youtube de donde van a mostrar los videos, como ejemplo usaremos el canal de desarrolladores de google

https://www.youtube.com/user/GoogleDevelopers
y vamos a copiar la parte que esta despues de “/user/” osea “GoogleDevelopers”

Por ultimo buscamos la variable user en el codigo y la reemplazamos por el nombre del canal
user=”GoogleDevelopers”
max_video=4

Actualizan y Listo!!

Si les gusto, siguenos en facebook, y comparte!!

<style>
#youtube ul{
	list-style:none;
}
#youtube li img{
	width:100px;
	height:auto;
	float: left;
	margin: 0 15px 0 0;
}


 
#youtube h3 {
  font: bold 11px Helvetica, Verdana, sans-serif;
  margin:0;
  padding:0;
}
 
#youtube li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
#youtube li {
  padding: 10px;
  overflow: auto;
}
 
#youtube li:hover {
  background: #eee;
  cursor: pointer;
}
#youtube a{
	text-decoration:none;
}

</style>

<div id="youtube"></div>
<script type= text/javascript>
$(document).ready(function()
            {
			 user="PeruQuiropractico1"
			 max_video=4
			
              $.ajax({
                type: "GET",
                url: "http://gdata.youtube.com/feeds/base/users/"+user+"/uploads?max-results="+max_video,
                dataType: "xml",
                success: parseXml
              });
            });
  
        function parseXml(xml)
        {
          var htmltext = '<div><ul> '  
          $(xml).find("entry").each(function()
            {
				link_video=$(this).find("link[rel='alternate']").attr('href');
                htmltext+="<li><a HREF='"+link_video+"' TITLE= '"+$(this).find('title').text()+"' TARGET='_blank' >"+ "<img src='"+img_youtube(link_video, 'small')+"'/><h3>"+$(this).find('title').text()+"</h3></a></li>"; //linea realmente fregada texto = +$(this).find('title').text()
            });
            htmltext+="</ul></div>";
            $("#youtube").append(htmltext);
            //console.info(htmltext);
        }
		
		function img_youtube(url, size){
		    if(url === null){ return ""; }
			size = (size === null) ? "big" : size;
		    var vid;
		    var results;

		    results = url.match("[\\?&]v=([^&#]*)");

		    vid = ( results === null ) ? url : results[1];

		    if(size == "small"){
			      return "http://img.youtube.com/vi/"+vid+"/2.jpg";
		    }else {
			      return "http://img.youtube.com/vi/"+vid+"/0.jpg";
		    }
		}
		
</script>

La entrada youtube widget wordpress aparece primero en Diseño Web Roger Soto en los Olivos.


Viewing all articles
Browse latest Browse all 11

Latest Images

Trending Articles





Latest Images