youtube widget wordpress
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>