Feeds de redes sociales para tu blog todo en uno

  Escrito por Lautarorx            El 26 de octubre de 2012


RSS es un protocolo que facilita mucho las cosas cuando se trata de hacer widgets con las últimas actualizaciones de cuentas propias y ajenas.
Si uno tiene todas los datos de cada uno de ellos para las diferentes RS que usemos, podemos lograr integrar todo en uno. Esto es lo que explicó JMiur en Vagabundia para poder obtener todos los datos mediante un script de JQuery e integrarlos mediante una cadena o lista a un widget único.

Para empezar primero les introduciré al tema: resulta que con una serie de enlaces podemos obtener la información de las distintas páginas en formato RSS de forma uniforme, o sea, sin tener que hacer modificaciones. Y es gracias a esta característica que podemos hacer esto.

A continuación les dejo toda la lista de feeds disponibles que deben reemplazar a su gusto según su usuario o lo que deseen mostrar:

Instagram: imágenes por etiqueta.
http://instagr.am/tags/etiqueta/feed/recent.rss

Wordpress: últimas entradas.
http://nombre.wordpress.com/feed/

Tumblr: últimas entradas.
http://nombre.tumblr.com/rss

Picasa: búsqueda por palabras.
http://photos.googleapis.com/data/feed/base/all?alt=rss&kind=photo&q=palabra

YouTube: últimos videos subidos.
https://gdata.youtube.com/feeds/api/users/usuario/uploads

YouTube: videos según etiqueta.
https://gdata.youtube.com/feeds/api/videos/-/etiqueta

YouTube: búscar videos por palabras.
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=relevance

YouTube: búscar videos por palabras ordenados por fecha.
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=published

YouTube: búscar videos por palabras ordenados por visitas.
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=viewCount

Flickr: imágenes subidas por usuario.
http://api.flickr.com/services/feeds/photos_public.gne?id=ID_usuario

Flickr: imágenes públicas por etiqueta.
http://api.flickr.com/services/feeds/photos_public.gne?tags=etiqueta

Pinterest: imágenes subidas por usuario.
http://pinterest.com/usuario/feed.rss

Blogger: últimas entradas.
http://nombre.blogspot.com/feeds/posts/default

Facebook: últimas publicaciones.
https://www.facebook.com/feeds/page.php?format=atom10&id=ID_DE_FACEBOOK

En cada uno de los casos hay que reemplazar por lo que corresponda que está resaltado en amarillo. En el caso de la ID de Facebook, hay que buscarla en la URL misma de nuestra página o perfil o bien si tenemos un nombre personalizado ponemos el nombre de nuestra página en lugar de la palabra resaltada.

https://graph.facebook.com/nombredelapagina

Entonces nos aparecerá algo como esto, donde el número resaltado en rojo es la ID:
{
   "name": "Nombre de la p\u00e1gina",
   "is_published": true,
   "username": "NombreDeLaPagina",
   "category": "Community",
   "id": "377091945655061",
   "link": "http://www.facebook.com/NombreDeLaPagina",
   "likes": 3
}

¿CÓMO HACER EL WIDGET?


Bueno aquí les mostraré los diferentes codigos que van a necesitar hechos por JMiur, son fácilmente configurables y no hace falta saber mucho de programación...digamos que prácticamente nada, solo una noción muy básica.

PASO 1: JAVASCRIPT


Primero que nada deben verificar que tengan la última versión de jQuery instalada en su plantilla, si no la tienen entonces deben pegar esto justo después de <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Ahora seguimos con este script que sirve para programar las funciones del widget, lo ponemos antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function FEED_primerimagen(cual) {
  var t = "", s, a, b, c, d;
  s = cual;
  a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5);
  if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {t = d;}
  return t;
}

function FEED_eliminartags(cual,longitud){
  var r = cual.split("<");
  for(var i=0;i<r.length;i++){
    if(r[i].indexOf(">")!=-1){
      r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
    }
  }
  r = r.join("");
  var sss = "", p;
  var r2 = r.split(" ");
  for(var i=0;i<r2.length;i++){
    p = sss + r2[i] + " "
    if(p.length>=longitud) {break;}
    sss = p;
  }
  sss = $.trim(sss);
  if(sss) {sss += " …" }
  return sss
}

(function ($) {
  $.fn.FeedEk = function (lasopciones) {
    var opciones = {url: '', clase: '', cantidad: 3, lenres: 120};
    if (lasopciones) {$.extend(opciones, lasopciones)}
    var elID = $(this).attr('id');
    if (opciones.url == null || opciones.url == '') {
      $('#' + elID).empty();
      return
    }
    $.ajax({
      url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?',
      dataType: 'json',
      success: function (data) {
        $('#' + elID).empty();
        $.each(data.responseData.feed.entries, function (i, entry) {
           var laimagen = FEED_primerimagen(entry.content);
           var contenido = FEED_eliminartags(entry.content,opciones.lenres);
           var salida = "<div class='ItemFeed "+opciones.clase+"'>";
           salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>";
           salida += "<div class='ItemContent'>";
           if(laimagen){
             salida += "<img src='"+ laimagen +"' />";
           }
           if(contenido){
             salida += "<p>" + contenido + "</p>";
          }
          salida += "</div>";
          salida += "</div>";
          $('#' + elID).append(salida);
        })
      }
    })
  }
})(jQuery);
//]]>
</script>
Y este otro para definir la lista de feeds que vamos a usar:
<script type='text/javascript'>
  var lista_feeds=new Array();
  lista_feeds[0] = &quot;&quot;;
  lista_feeds[1] = &quot;https://gdata.youtube.com/feeds/api/users/elecasoft/uploads&quot;;
  lista_feeds[2] = &quot;http://photos.googleapis.com/data/feed/base/all?alt=rss&amp;kind=photo&amp;q=informatica&quot;;
  lista_feeds[3] = &quot; http://api.flickr.com/services/feeds/photos_public.gne?tags=informatica&quot;;
  lista_feeds[4] = &quot;http://pinterest.com/microsoft/feed.rss&quot;;
  lista_feeds[5] = &quot;https://www.facebook.com/feeds/page.php?format=atom10&amp;id=265566123479513&quot;;
  lista_feeds[6] = &quot;http://elecasoft.blogspot.com/feeds/posts/default&quot;;
  // y el evento de jQuery apra detectar el click en esos enlaces
  $(&#39;#fenlaces a&#39;).live(&#39;click&#39;, function(e) {
    e.preventDefault(); // evito qe se ejecuta el href del enlace
    var url = lista_feeds[$(this).attr(&#39;rel&#39;)]; // leo el número de orden de la lista (1, 2, 3, 4, etc)
    var clase = $(this).attr(&#39;class&#39;); // leo la clase de ese enlace
    // y ejecuto la función para leer los feeds
    // donde cantidad es el número de entradas a leer y lenres es la longitud máxima
    $(&#39;#divRss&#39;).FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 });
  });

  // y por defecto, muestro el primero de la lista
  $(document).ready(function() {
    $(&#39;#fenlaces a&#39;).first().click();
  });
</script>
Las palabras en rojo pueden ser reemplazadas por los respectivos datos que necesiten, cantidad es el número de actualizaciones que se muestran y lenres es la longitud máxima de los feeds.
Para agregar o modificar los que ya están hay que notar que los arrays o cadenas se estructuran de la siguiente manera:
lista_feeds[1] = "URL_DEL_FEED";
Cada número tiene que ser diferente ya que después servirá para poner el link que lo llamará y lo ejecutará, nótese que las comillas son reemplazadas por &quot; debido a que estamos hablando de XML. En el próximo paso veremos como queda estructurado.

PASO 2: HTML

En un widget o en la sección de la plantilla que queramos colocamos el código que va a mostrar el feed, junto con los enlaces:
<div id="divRss"></div>
<br />
<div id="fenlaces">
  <center><a href="#" rel="1" class="fyoutube"> <img src="http://3.bp.blogspot.com/-AUF_qi7oBCY/UImpgXPmNsI/AAAAAAAADos/Eqt5d51up1U/s36/1351198972_youtube.png" /> </a>
  <a href="#" rel="2" class="fpicasa"><img src="http://3.bp.blogspot.com/-xoI5ORsAitM/UImpflVB4gI/AAAAAAAADog/TzHozxzd-8M/s36/1351198967_picasa.png" /></a>
  <a href="#" rel="3" class="fflickr"> <img src="http://4.bp.blogspot.com/-iwySUSshg98/UImqU1Z5qnI/AAAAAAAADpM/ZPh_JZAveZI/s36/1351198988_social_flickr_button.png"
/> </a>
  <a href="#" rel="4" class="fpinterest"> <img src="http://2.bp.blogspot.com/-j5_QcZDHm8Y/UImqUk90paI/AAAAAAAADpE/4VzANBCkMYY/s36/1351198983_Pinterest_Favicon.png" /></a>
<a href="#" rel="5" class="ffacebook"> <img src="http://1.bp.blogspot.com/-p3Ijx08_QtI/UIq_t9Qh2uI/AAAAAAAADsU/pCYXwNtgxp0/s36/1351270259_facebook.png" /></a>
<a href="#" rel="6" class="fblogger"> <img src="http://2.bp.blogspot.com/-ebEdw6jXZFA/UIq5dfsMoQI/AAAAAAAADq0/OUOt6W8WlHo/s36/1351201118_blogger.png" /></a>

</center>

</div>
Aquí vemos que los enlaces contienen los enlaces a los diferentes feeds que habiamos puesto y las clases de cada uno que sirven por si queremos personalizar los enlaces individualmente.
Si queremos agregar más o modificarlos está es la estructura de cada enlace:
<a href="#" rel="NÚMERO" class="CLASE_DEL_FEED"> <img src="URL_IMAGEN" /></a>
El número es el que se corresponde según la lista de feeds que vimos anteriormente, la clase es lo que va a servi para más tarde agregar el CSS que puede ser la que queramos y la imágen es por si queremos mostrar los diferentes feeds con las mismas.

PASO 3: CSS

Ahora solo queda aplicar los estilos para ver como quedará nuestro feed, es totalmente personalizable y ahora veremos las diferentes opciones que posee, estas van ubicadas justo después de <b:skin><![CDATA[  :
 #divRss { /* el contenedor */
    background-color: #EEE;
    margin: 0 auto;
    outline: 3px solid #fff;
    padding: 10px;
    width: 280px;
    overflow:hidden;
    border-radius:5px;
 }
 #divRss:hover { /* el contenedor */
     margin: 0 auto;
     outline: 3px solid #fff;
     padding: 10px;
     width: 280px;
     overflow:hidden;
     border-radius:5px;
  }
 #divRss .ItemFeed { /* personalizar cada entrada individual */
    font-size:10px!important;
    border-bottom: 1px dotted #000;
    color: #666;
    padding: 5px 0;
    overflow:hidden;
  }
 #divRss .ItemFeed:hover, #divRss .ItemTitle a:hover{ /* efecto al pasar el cursor */
    border-bottom: 1px dotted #000;
    color: #000;
    padding: 5px 0;
    overflow:hidden;
  }
  #divRss .ItemTitle { text-align: center;/* Estilo de los títulos */
  font-size:15px!important;
}
  #divRss .ItemTitle a { text-align: center; /* Estilo de los links */
color:grey !important;
white-space: nowrap;
word-wrap: break-word;
font-size:20px;
overflow:hidden;
overflow:none;
}
  #divRss .ItemTitle a:hover { text-align: center; /* Efecto al pasar el cursor del título */
white-space: nowrap;
word-wrap: break-word;
font-size:20px;
overflow:hidden;
overflow:none;
color:CornflowerBlue !important;
}
  #divRss .ItemContent img {height: auto; /* Imagenes */  width: 50%;margin-top:10px!important; margin-left:25%!important;
background: none repeat scroll 0px 0px rgb(238, 238, 238);
border: 1px solid white;
box-shadow: 0px 0px 5px rgb(204, 204, 204);
padding: 5px;}
  #divRss .ItemContent img:hover {-moz-transition: all 0.5s ease 0s; /* Borde de las imágenes al pasar el cursor*/
border: 1px solid white;
box-shadow: 0px 0px 10px rgb(153, 153, 153);}
 También podemos editar cada feed según de la red social que sea, por ejemplo para personalizar individualmente el de YouTube:
#divRss .ItemFeed.fyoutube {/* Personalizar feed*/ }
#divRss .ItemFeed.fyoutube .ItemTitle { /* Personalizar título*/}
#divRss .ItemFeed.fyoutube img {/* Personalizar imágenes*/ }
Una vez que hayamos agregado todo, este será el resultado final:



Fuente | Muchos feeds y un solo script para mostrarlos (2)

El contendio de esta entrada esta protegido bajo Derechos de Autor y leyes de Copyright. Su reproducción PARCIAL O TOTAL sin mencionar la fuente esta penada por la Ley 11.723 y la DMCA vigente en EE.UU. Todo el contenido está bajo licencia de Creative Commons.

Related Posts Plugin for WordPress, Blogger...


New Games + Hacks | Diseñado por Lautaro Rodríguez Xavier

© Informatics 2011-2012 | Se recomienda el uso de Mozilla Firefox