Categorie
ricrea-grafica.com
Tumblr: Impostare una thumb per la condivisione su Facebook
L’utilizzo del tag image_src sui vostri siti e blog è molto importante 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 alladocumentazione.
Related posts:
Commenti