martes, 26 de junio de 2012

Mostrar feeds de cualquier sitio con jQuery

FeedEkes un plugin para jQuery que nos facilita la tarea a la hora de mostrar contenido de sitios externos a través de sus feeds; tanto de nuestro sitio como de cualquier otro..

En la página de los desarrolladores podemos descargar el archivo RAR que contiene un ejemplo completo y del que sólo necesitamos el archivo FeedEk.js que alojamos en un servidor, incluimos en la plantilla o agregamos a un elemento HTML:
<script type="text/javascript" src="URL_FeedEk.js"></script>
Luego, donde quisiéramos que se mostrase el contenido, pondríamos un DIV vacío de este modo:
<div id="divRss"></div>
Lo único que nos faltaría es ejecutar la función:
<script type="text/javascript">
$(document).ready(function(){
$('#divRss').FeedEk({
FeedUrl : 'URL_FEED',
MaxCount : 3,
ShowDesc : true,
ShowPubDate: true
});
});
</script>
donde tenemos una serie de opciones a elegir:
MaxCount es la cantidad de entradas a mostrar (por defecto 5)
ShowDesc permite mostrar u ocultar el contenido (por defecto true)
ShowPubDate permite mostrar u ocultar la fecha de publicación (por defecto true)

El único dato obligatorio s la URL del feed a mostrar que colocaremos en FeedUrl y que puede ser casi cualquiera; sólo es cosa de probar y ver:

http://miblog.blogspot.com/feeds/posts/default
http://miblog.com/feeds/posts/default
http://feeds2.feedburner.com/miblog
http://miblog.com/feed.php


otro feed reset

Obviamente, el estilo con que se mostrarán puede ser personalizado. Para comenzar, pueden usarse algunas de las reglas que se inlcuyen en el archivo FeedEk.css que son bastante sencillas:

#divRss {} es el contenedor general, el DIV donde se mostrará el feed
#divRss .ItemTitle {} es un DIV con el título de cada entrada
#divRss .ItemTitle a {} es el enlace con el título de cada entrada
#divRss .ItemDate {} es un DIV con la fecha
#divRss .ItemContent {} es un DIV con el contenido

Detalles extras que dependerán del contenido pueden ser configuradas por separado:

#divRss .ItemContent p {}
#divRss .ItemContent img {}

No hay comentarios:

Publicar un comentario