Wednesday, June 26, 2019

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

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 comments:

Post a Comment