Come Ho Inserito un “Endless Scrolling” sulla Homepage di Questo Blog (e come puoi farlo anche tu)

Una luuunga homepage

scritto da Francesco Gavello [+] il 21 ottobre 2011 | 13 Commenti in: Blog Design | Featured | Web Design & UX

Era già da un po’ di tempo che rimandavo su queste pagine l’installazione di un meccanismo di paginazione a “endless scrolling”. Quel meccanismo, per capirci, che permette raggiunto il fondo di una pagina il caricamento dinamico dei contenuti che risiederebbero nella pagina successiva. E così via all’infinito.

Due i principali dubbi che continuavo a portarmi dietro:

  • La visibilità del footer
  • Il tracciamento delle pageviews.

Se da un lato è comodo per utenti di scrollare all’infinito l’homepage di un blog, altrettanto non si può dire del classico “contro”. Il footer diventa così vicino e contemporaneamente così lontano, tanto da frustrare chi cerca di raggiungerlo con la forza bruta delle scrollbar. No, no.

Secondo, ma non meno importante, il corretto tracciamento delle visite conteggiate dinamicamente a ogni caricamento. Anche in questo caso non avevo intenzione di transigere su un aspetto fondamentale per conoscere in quale modo i lettori interagiscono con i miei contenuti.

Ho trovato una soluzione a entrambi.
E oggi ti spiego come ho fatto. :)

La soluzione che ho scelto permette dunque di:

  • Attivare il caricamento di nuovi contenuti solo al click dell’utente
  • Tracciare correttamente le pageviews in Google Analytics
  • Ricadere sulla navigazione standard in tutte le restanti pagine

La soluzione che ho scelto parte dall’omonino progetto Infinite Scroll. Sebbene esista un plugin per WordPress, che in molti potranno sicuramente scegliere per saltare a piè pari tutti gli aspetti avanzati della vicenda, io ho preferito la corrispettiva soluzione manuale.

La logica di base

Il ragionamento è questo: lo script si basa su jQuery, quindi avrai bisogno di questo framework presente sul tuo tema nel modo che ritieni più opportuno. Puoi usare le API di Google per importare sul layout l’ultima versione in maniera semplice, oppure controllare che il tuo tema lo includa già di suo.

Lo script richiede poi quattro variabili di base: l’id del tag del contenitore dei post, l’id del singolo post, l’id del blocco di paginazione standard di WordPress e l’id del link che andrà a scatenare il caricamento infinito.

La logica è quella di identificare il blocco-genitore dove sono contenuti tutti i post, attivare un particolare link al fondo di essi e andare ad “appendere” altri post al termine del suddetto blocco-genitore.

Iniziamo? :)

1. Importa lo script

Per prima cosa importiamo lo script jquery.infinitescroll.js, in header o in footer a seconda di come sia scritto il nostro layout, subito dopo la rispettiva chiamata a jQuey.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.js"></script>

Ricorda di far combaciare il percorso al file javascript così che venga correttamente recuperato e sia pronto all’uso. Questo esempio presuppone che il file js sia nella stessa cartella del tema che usi, ma sul tuo layout potrebbe non essere così.

2. Definisci i puntamenti

Subito sotto l’inclusione del js, ciò che dovremo fare è inserire il relativo blocco di codice in grado di attivare il plugin sui giusti ID del nostro tema. Ricordi? Quegli ID di cui ti parlavo nella logica di base.

Nel blocco che segue puoi vedere come ad ogni riga corrisponda una precisa azione. Ho commentato lo script così che ti sia più facile sostituire gli ID con quelli del tuo layout.

Posizionando questo script dopo lo script di tracciamento standard di Google Analytics questo riesce a passare la giusta variabile relativa alla pagina caricata al volo.

<script>
$(function(){

var infscrPageview = 1;

// #post è il contenitore globale di tutti i post
$('#post').infinitescroll({

	// #mostra-altri è il mio blocco di paginazione standard
	navSelector  : "#mostra-altri",

	// #mostra-altri a:first è il primo link del blocco paginazione standard
	nextSelector : "#mostra-altri a:first",

	// #post .post è il contenitore di un singolo post
	itemSelector : "#post .post",

	// Un po' di testo nel caso non ci fossero altri articoli da mostrare (improbabile)
	donetext      : "Hai raggiunto l'ultimo articolo.",

	// Un'immagine nell'attesa che i post vengano recuperati dal server
	loadingImg   : "http://francescogavello.it/wp-content/themes/blog/img/carica-post.gif",

	// Un testo da aggiungere all'immagine durante il caricamento (non ne faccio uso)
	loadingText  : "" 

}, function() {
	infscrPageview++;
	// passa la giusto tracciamento a Google Analytics
	_gaq.push(['_trackPageview', '/page/' + infscrPageview]);
});

// disabilita auto-scroll
$(window).unbind('.infscr');

// attiva il click manuale sul blocco paginazione standard
$('#mostra-altri').click(function(){
	$(document).trigger('retrieve.infscr');
	$(this).css('display','block');
	return false;
});

// se non ci sono altri post, rimuovi lo scroll infinito
$(document).ajaxError(function(e,xhr,opt){
	if (xhr.status == 404) $('#mostra-altri a').remove();
});

});
</script>

3. Prepara l’HTML

Sul mio layout hai visto come quindi utilizzi un blocco come

<div id="mostra-altri" class="stile_link	">
	<?php posts_nav_link(' | ', 'Pagina successiva', 'Carica articoli precedenti'); ?>
</div>

per paginare (solo in homepage, ricorda) gli articoli.

Lo script di cui sopra riconosce questo blocco identificato dal div “mostra-altri” e va a puntare il primo link (“a”) presente al suo interno, rendendolo il nostro magico scroll infinito. Quando lo scroll raggiunge il termine il blocco viene rimosso così che non crei problemi.

Nota anche come una semplice riga al posto giusto (vedi commenti sopra) permetta il passaggio a Google Analytics del giusto riferimento della pagina da tracciare.

E questo è …tutto. :)

Questa è l’idea. Un paio di script e il giusto HTML per rendere la homepage uno scroll infinito al click dell’utente. Per il momento il componente non sembra supportare la paginazione di archivi e le pagine successive alla home.

Non che fosse qualcosa che andavo ricercando, tuttavia per mantenere coerente il resto del sito potresti avere bisogno di qualcosa del genere:

<?php
	$numeroPagina = (get_query_var('paged')) ? get_query_var('paged') : 1;
	if ($numeroPagina == 1) { ?>
	
	<div id="mostra-altri" class="stile_link	">
		<?php posts_nav_link(' | ', 'Pagina successiva', 'Carica articoli precedenti'); ?>
	</div>
	
<?php } else { ?>

	<!-- Qui la normale paginazione -->
	
<?php } ?>

che non fa altro che mostrare il blocco utile ad attivare lo scroll infinito solo nella prima pagina, lasciando invariata la normale paginazione (qualunque essa sia, magari tramite plugin su misura) in pagina 2 e seguenti.

Sembra complicato? :) Non così tanto come può sembrare.

La cosa migliore che puoi fare a questo punto è dare uno sguardo alla demo del creatore dello script, su questa pagina, e trovare i rispettivi riferimenti che ti ho mostrato. Se hai seguito i miei precedenti consigli e disponi di una sandbox locale dove testare idee come questa per il tuo blog, è il momento giusto di mettersi all’opera.

Trovo che la “paginazione infinita” sia un buon modo di portare i lettori un po’ più in profondità nelle nostre pagine. Una volta compresa questa logica, il temibile muro di pagina 2 diventa tanto semplice da superare quanto un click senza reload a fondo pagina.

Un bel vantaggio. :)

Che ne pensi?
Hai mai fatto uso di soluzioni simili?

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

13 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. vik ha detto:

    Sicuramente sarebbe stato più figo se il caricamento dei nuovi contenuti avvenisse automaticamente quando l’utente fa scroll fino in fondo pagina. In ogni caso è una soluzione che non mi aggrada perché rompe la struttura e si perdono footer in basso, ma alla fine anche header in alto e sidebar a destra perché si rimane sempre al centro.

    Rispondi
    • Francesco Gavello ha detto:

      Ciao Vik, cosa intendi per “rompere la struttura”? In fin dei conti è solo il box della home che si allunga, nient’altro si modifica. E le restanti pagine (dalla 2 in poi) sono invariate in tutto e per tutto.

      L’auto-scroll e il posizionamento a caricamento concluso sono due aspetti che ho volutamente ricercato in questo modo. Vero che l’auto scroll a là Twitter & Facebook può apparire migliore e più “cool”, ma imho è vantaggioso quando non si ha un footer da presentare o (nel caso di Twitter) il tuo footer è in una colonna a lato. :)

      Con un auto-scroll automatico avrei perso ogni speranza di far arrivare a fondo pagina i lettori, mentre così il caricamento avviene solo quando richiesto.

      Anche la posizione del browser al click credo possa rendere meglio se non si salta direttamente al fondo dei nuovi contenuti. Se sto leggendo l’articolo 10 e premo “Mostrami altri contenuti” probabilmente vorrò leggere l’undicesimo, non il ventesimo.

      Che ne pensi?

      Rispondi
  2. YouON ha detto:

    Cosa succede quando il bot di Google segue il link “Carica articoli precedenti”?

    Rispondi
  3. marco ha detto:

    …Bella dritta…ma…questo procedimento funziona solo su WP o posso inserirlo anche su Blogger???

    Rispondi
  4. Riccardo Mel ha detto:

    Utilissimo! penso che lo integrerò anche nel mio blog XD

    Rispondi
  5. Marco ha detto:

    Ottima segnalazione, complimenti.
    Per curiosità però ho provato ad usare il plugin ed ho visto che ora c’è anche la possibilità di caricare manualmente le pagine cliccando su un link.

    Rispondi
  6. Lorenzo ha detto:

    Ciao Francesco,
    ho visto che sul tuo sito si riescono a visualizzare anche i tasti share all’interno degli articoli dell’endless scrolling. Ho provato ad inserirli tramite funzione all’interno di the_content, tuttavia quando carico gli ultimi articoli non mi fa visualizzare i tasto share.
    Come se non caricasse i .js.

    Rispondi
  7. Tony Bellardi ha detto:

    ciao a tutti, mi scuso con Francesco per la mia irruenza, datosi che l’ho contattato immediatamente e spudoratamente in FB per capire quel che poi avrei trovato cercando un’attimo nel suo SPLENDIDO sito ! ed eccomi qui, ho letto l’inserimento manuale a fatica ne sarei capace tanto che uso appunto infinite scroll…

    Ma ho alcuni grossi problemi, al caricamento dei nuovi post non mi funzionano tante cose come ad esempio un flash relativo a cooliris, le gallerie immagini ed altre cose, per quella più importante (per il mio sito) cioè la musica ho risolto aggiungendo nell’apposito spazio che il setting di infinite scroll mette a disposizione chiamato Callback questo:

    YAHOO.MediaPlayer.addTracks( window.document );

    e almeno il player viene richiamato, ma per il resto cosa posso aggiungere ?? grazie mille. Se mi potete aiutare vi dico per “il resto” quali plug e funzioni, non funzionano usando infinite scroll.

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!