scroll - personalizar - Usar el botón Me gusta de Tumblr con desplazamiento infinito

personalizar tumblr

Question

Intento utilizar los nuevos botones de Tumblr like dentro de Infinite Scroll (lo que permite que tu tema sea un botón similar en publicaciones individuales de Tumblr desde la página de inicio) para las primeras 15 publicaciones de la primera ''página'', pero tan pronto como carguen otra página el botón Me gusta deja de funcionar. Estas son las instrucciones dadas por Tumblr en la página de Documentos:

Función: Tumblr.LikeButton.get_status_by_page (n)
Descripción: llame a esta función después de solicitar una nueva página de Publicaciones. Toma el número de página que acaba de cargarse como un número entero.

Función: Tumblr.LikeButton.get_status_by_post_ids ([n, n, n])
Descripción: Solicitar estado Me gusta para publicaciones individuales. Toma una serie de ID de publicación.

Como no estoy seguro de cómo aplicar correctamente JQuery, no estoy seguro de dónde agregar estas funciones, aquí está mi JS para mi tema actual:

 // MASONRY
var $container = $(''#content'');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: ''.entry'',
columnWidth: 220
});
});
// INFINITE SCROLL
$container.infinitescroll({
navSelector : ''#pagination'',
nextSelector : ''#pagination li a.pagination_nextlink'',
itemSelector : ''.entry'',
loading: {
img: ''http://static.tumblr.com/glziqhp/K37m9yaub/257__1_.gif''
}
},
function( newElements ) {
var $newElems = $( newElements ).css({
opacity: 0
});
$newElems.imagesLoaded(function(){
$newElems.animate({
opacity: 1
});
$container.masonry(
''appended'', $newElems, true
);
});
});

Answer 1

Primero, debes agregar una ID de publicación única a cada una de tus publicaciones:

<div class="entry masonry-brick" id="{PostID}">...</div>

La documentación menciona que se solicita el estado similar una vez que las nuevas publicaciones (o página nueva) se han anexado / cargado:

function( newElements ) {
var $newElems = $( newElements ).css({
opacity: 0
});
// Create Array of $newElems IDs
var $newElemsIDs = $newElems.map(function () {
return this.id;
}).get();
$newElems.imagesLoaded(function(){
$newElems.animate({
opacity: 1
});
$container.masonry(
''appended'', $newElems, true
);
// Let''s just see what we have, remove console.log() if working
console.log($newElems, $newElemsIDs);
Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
});
});

Espero que eso te señale en la dirección correcta.