Abbiamo già parlato di quanto sia importante l’utilizzo del tag image_src sui vostri siti e blog, perchè vi permette di impostare l’immagine di anteprima in modo automatico, quando condividete una pagina web su Facebook.
Lo stesso tag può tornare molto utile anche sul vostro Tumblr, soprattutto se i vostri post vengono spediti in automatico su Twitter e poi ripubblicati su Facebook. Sì, perchè quando il link viene condiviso su Facebook dall’applicazione, l’immagine associata sarà la prima presente nella pagina e non sempre è quella che desideriamo.
Come fare allora ad impostare una thumb per le pagine di Tumblr?
1. Scegliere l’anteprima
Il problema di Tumblr è che ogni post può essere di diverso tipo: foto, citazione, video, link, audio… Dovremo allora decidere un criterio per impostare le thumb.
Personalmente ho deciso che:
- nel caso ho un foto-post, metto come anteprima la foto stessa;
- se è una citazione, metto come anteprima un’immagine con delle virgolette disegnate;
- se è un video, metto l’immagine di una cinepresa;
- e così via…
2. Il codice
Quanto appena detto, si traduce nel seguente codice da inserire tra i tag head del nostro template Tumblr:
{block:Posts}
{block:Photo}
<link rel="image_src" href="{PhotoURL-100}" />
{/block:Photo}
{block:Quote}
<link rel="image_src" href="http://www.vostro-sito.it/images/quote.jpg" />
{/block:Quote}
{block:Text}
<link rel="image_src" href="http://www.vostro-sito.it/images/quote.jpg" />
{/block:Text}
{block:Link}
<link rel="image_src" href="http://www.vostro-sito.it/images/link.jpg" />
{/block:Link}
{block:Chat}
<link rel="image_src" href="http://www.vostro-sito.it/images/chat.jpg" />
{/block:Chat}
{block:Audio}
<link rel="image_src" href="http://www.vostro-sito.it/images/audio.jpg" />
{/block:Audio}
{block:Video}
<link rel="image_src" href="http://www.vostro-sito.it/images/video.jpg" />
{/block:Video}
{/block:Posts}
{/block:PermalinkPage}
In questo modo, il tag {block:PermalinkPage} specifica che verrà mostrato solamente se siamo in una pagina interna del tumblelog, mentre tutti i blocchi dentro vanno a specificare il comportamento, a seconda del tipo di post.
Ovviamente dovrete inserire le url delle immagini che vorrete usare.
3. Modificare il template
Come? Non sapete come modificare il template per inserire il codice?
E’ semplice: basta che aprite il vostro Tumblr, cliccate su “Customize”, quindi sulla voce “Theme” e poi su “Use custom HTML”. Vi si aprirà una finestra con codice html misto a template-tag.
Trovate il tag <head> ed inseritevi all’interno il codice sopra.
Per maggiori informazioni sulle variabili e la modifica del template, date uno sguardo alla documentazione.
Ciao a tutti,
non essendo propriamente un “addetto ai lavori” spero di non essere fuori tema. Utilizzando Facebook Connect quando posto un nuovo articolo sul mio blog questo compare automaticamente anche nella pagina FB, e fin qui ok: ma in FB mi esce automaticamente la foto del mio profilo non quella relativa al post.
C’è qualcuno che sa come ovviare a questo problema?
Cmq sia, grazie 1000
Simone
bell’articolo, ma non ho capito una cosa: come faccio ad impostare il thumb per il foto-post? devo cambiare l’url del valore href ogni volta che posto una nuova foto?
No no. Il codice
{PhotoURL-100}che ho inserito è un template-tag di tumblr: farà comparire in automatico l’url della thumb.mmm…sembrerebbe una genialata ma purtroppo non mi funzia. Sto usando il feed importer implementato nella bacheca di fb, senza tutti i passaggi per friendfeed e twitter che spieghi negli altri post, e non c’è verso di avere l’anteprima (con blogger invece visualizzava tutto). Visualizza solo “photo” e reindirizza alla nota dove è possibile vedere l’immagine, ma nulla più. Al momento quindi ho iniziato a usare l’applicazione tumblelog ma non mi soddisfa pienamente. Chissà dove ho sbagliato.
succede pure a me la stessa cosa… sicuri che {PhotoURL-100} sia corretto?
tutto il resto funziona benissimo.
grazie comunque dei consiglie e complimenti per il blog.
Sarebbe interessante inserire i thumbnail dei video come immagine d’anteprima, ma la vedo dura (non potendo usare linguaggi diversi dall’XHTML)… magari in JavaScript?
Eh, lo so, ci avevo pensato pure io, ma non esiste un template-tag per mostrare l’immagine del video. Figurati che non c’è nemmeno quello per mostrare l’url del video.
In Javascript è escluso: il parser di Facebook legge l’html della pagina, non esegue gli script.