Tumblr es un servicio de blogs con una interfaz elegante para crear y publicar contenido. En este tutorial, lo utilizaremos como base de un sistema de publicación de noticias. Vamos a desarrollar un widget simple que recorre las publicaciones más recientes en un blog de Tumblr y las presenta como noticias a sus usuarios. La adición de noticias se realizará mediante la creación de nuevas publicaciones de blog en su tablero de Tumblr.
El HTML
El código que estamos escribiendo se organizará como un complemento de jQuery, lo que lo hará portátil y fácil de insertar en un sitio web existente. Cuando se ejecuta el complemento, solicitará las últimas publicaciones de su blog con AJAX y generará el siguiente marcado:
Código generado
<div class="tn-container">
<h2 class="tn-header">Tumblr News Ticker</h2>
<div class="tn-data">
<ul>
<li class="tn-post"><a href=
"http://tzinenewsdemo.tumblr.com/post/41782608890" target="_blank">HTML5 Showcase
for Web Developers: The Wow and the How</a> <span>about 20 hours ago</span></li>
<li class="tn-post" style="display: list-item;"><a href=
"http://tzinenewsdemo.tumblr.com/post/41782593600" target="_blank">The New jQuery
Plugins Site is Live!</a> <span>about 20 hours ago</span></li>
<li class="tn-post" style="display: list-item;"><a href=
"http://tzinenewsdemo.tumblr.com/post/41782522976" target="_blank">Parsley.js - A
Small JavaScript Forms Validation Library</a> <span>about 20 hours
ago</span></li>
<!-- More news items here -->
</ul>
</div>
<div class="tn-footer"></div>
</div> La lista desordenada alberga las noticias, pero solo se muestran 5 a la vez. Los elementos con la tn las clases están diseñadas por la hoja de estilo del complemento y puede personalizarlas para que coincidan con el diseño de su sitio.
El código JavaScript/jQuery
Primero, echemos un vistazo a la respuesta que recibimos de Tumblr, para que tengas una mejor idea de qué datos están disponibles para nosotros.
Cada blog de Tumblr viene con una API JSON pública. Simplemente tienes que agregar /api/read/json después del final de la URL de su blog para obtener un objeto JSON con sus publicaciones recientes. Esta es una bocanada de aire fresco en comparación con la dirección que han tomado Facebook y Twitter con sus API, que requieren tokens de acceso y registros incluso para los casos de uso más simples.
Respuesta de ejemplo
{
"tumblelog": {
"title": "A web development news site",
"description": "",
"name": "tzinenewsdemo",
"timezone": "US\/Eastern",
"cname": false,
"feeds": []
},
"posts-start": 0,
"posts-total": 11,
"posts-type": "regular",
"posts": [{
"id": "41782723088",
"url": "http:\/\/tzinenewsdemo.tumblr.com\/post\/41782723088",
"url-with-slug": "http:\/\/tzinenewsdemo.tumblr.com\/ ..",
"type": "regular",
"date-gmt": "2013-01-29 13:49:36 GMT",
"date": "Tue, 29 Jan 2013 08:49:36",
"bookmarklet": 0,
"mobile": 0,
"feed-item": "",
"from-feed-id": 0,
"unix-timestamp": 1359467376,
"format": "html",
"reblog-key": "zEQ0b5OB",
"slug": "image-picker-jquery-plugin-that-turns-a-select",
"regular-title": "Image Picker - jQuery plugin that turns a ..",
"regular-body": "<p><a href=\"http:\/\/rvera.github.com\/image-picke .."
}
// More posts here
]
}); Obtiene identificaciones, fechas, el título y el cuerpo, etiquetas, fotos y más. Solo usaremos el título y la fecha en este ejemplo, pero puede mejorarlo agregando más datos.
Y aquí está el complemento que manejará las solicitudes de AJAX, generará el marcado y recorrerá las respuestas:
activos/js/jquery.tumblrNewsTicker.js
(function($) {
var defaults = {
time: 5000,
title: 'Tumblr News Ticker',
blog: 'http://tzinenewsdemo.tumblr.com'
};
$.fn.tumblrNewsTicker = function(options) {
// Handle the default settings
var settings = $.extend({}, defaults, options);
// Remove trailing slashes and assemble the Tumblr API URL
var url = settings.blog.replace(/\/$/,'') +
"/api/read/json?num=20&type=text&callback=?";
this.append('<div class="tn-container">\
<h2 class="tn-header">'+ settings.title +'</h2>\
<div class="tn-data"><ul></ul></div>\
<div class="tn-footer"></div>\
</div>');
var postList = this.find('.tn-data ul');
//Get the posts as json
$.getJSON(url, function(data) {
$.each(data.posts, function(i,posts){
// Remove any HTML tags
var title = posts['regular-title'].replace(/<\/?[^>]+>/gi, '');
// Calculate the human-readable relative time
var time = $.timeago( new Date( posts['unix-timestamp'] * 1000 ) );
postList.append('<li class="tn-post">\
<a href="' + posts.url + '" target="_blank">'+title+' </a>\
<span>' + time + '</span>\
</li>');
});
// Show the first 5 news items
postList.find('li')
.slice(0,5)
.show()
.last()
.addClass('no-border');
// Rotate posts every settings.time ms
// (only if they are more than the limit)
if(data.posts.length > 5) {
setInterval(function() {
var posts = postList.find('li');
posts.first().slideUp('slow', function() {
$(this).appendTo(postList);
})
posts.eq(4).removeClass('no-border');
posts.eq(5).slideDown('slow').addClass('no-border');
}, settings.time);
}
});
return this;
};
})(jQuery); Primero está generando la URL de la API. Tenga en cuenta que solo estoy seleccionando publicaciones de texto . Si ha publicado fotos, videos u otro tipo de contenido, no se mostrarán. Sin embargo, puede cambiar esta línea y eliminar el parámetro type=text para seleccionarlo todo. Algunos tipos de contenido no devuelven un título, por lo que debe probarlo a fondo.
Para calcular la cadena de tiempo relativa, estoy usando el complemento timeago. Devuelve una forma legible por humanos del tiempo transcurrido desde que se publicó la publicación. Para construir el objeto de fecha, multiplico la marca de tiempo de Unix devuelta por 1000 para obtener la cantidad de milisegundos (según lo requiera el objeto de fecha).
Y aquí está cómo llamar al complemento:
activos/js/script.js
$(function() {
// Call the plugin
$('#main').tumblrNewsTicker({
time: 5000,
title: 'Tumblr News Ticker',
blog: 'http://tzinenewsdemo.tumblr.com/'
});
}); Todos estos argumentos son opcionales, pero lo más seguro es que desee pasar una URL de blog diferente.
No voy a presentar el CSS aquí, pero puedes encontrarlo en el assets/css/ carpeta.
¡Listo!
¡Con esto, nuestro tablero de noticias está completo! Puede modificar este widget e incrustarlo en su panel de administración o en la barra lateral del blog. Con un poco más de codificación, podría combinarlo con el mini tutorial del sistema de ayuda del mes pasado y obtener un sistema de ayuda totalmente funcional y fácil de actualizar con búsqueda en tiempo real.