Malgrado Tumblr sia un social network “chiuso”  sotto molti aspetti, è facile integrare l’attività di un utente tumblr su qualunque sito.

Sostanzialmente esistono due modalità di incorporare dei contenuti TUMBLR su un sito:

• via RSS feed
• via JavaScript

 

TUMBLR RSS FEED

il feed RSS di un utente è molto semplice da ottenere:

http://nomeutente.tumblr.com/rss

Usare il feed RSS di tumblr è senza dubbio il metodo più semplice, ma probabilmente anche il meno versatile (e lo dice un fan degli RSS!).

TUMBLR JAVASCRIPT

L’embed dei singoli contenuti non è possibile (o almeno non mi risulta sia possibile). In alternativa agli RSS, esiste un javascript per embeddare l’intero blog tumblr in un sito:

<script type="text/javascript" src="https://nomeutente.tumblr.com/js"></script>

In questo caso agli elementi è possibile aggiungere facilmente uno stile via css.

Personalizzare i contenuti via CSS

Il codice fornito da tumblr permette un’ampia personalizzazione attraverso CSS e un gran numero di HOOKS CSS:

.tumblr_posts {

  .tumblr_post {
    .tumblr_title {}
    .tumblr_body img {}
    .read_more_container {}
    .read_more_container a.read_more {}
  }

	.tumblr_text_post {
		.tumblr_title {}
		.tumblr_body {}
	}

	.tumblr_photo_post {
		.tumblr_photo {}
		.tumblr_caption {}
	}

	.tumblr_quote_post {
		.tumblr_quote {
			.tumblr_open_quote {}
			.tumblr_close_quote {}
		}
		.tumblr_source {}
	}

	.tumblr_link_post {
		.tumblr_link {}
		.tumblr_description {}
	}

	.tumblr_chat_post {
		ul {
			li {
				.tumblr_label {}
			}
		}
	}

	.tumblr_audio_post {
		.tumblr_audio_player {}
		.tumblr_caption {}
	}

	.tumblr_video_post {
		.tumblr_video {}
		.tumblr_caption {}
	}

}

Ovviamente non serve impostarli tutti. Ad esempio, si può ottenere un effetto evidente con questo css:


.tumblr title {
font-family: Arial, SimHei;
font-size: 64px;
line-height: 4em;
color:#FFFFFF;
}


.tumblr_body {
font-family: Arial, SimHei;
font-size:16px;
line-height:1.5em;
}

.tumblr_caption {
font-family: Arial, SimHei;
font-size: 64px;
}


Vale la pena fare qualche prova per dare il giusto stile ai contenuti incorporati 🙂 ma grazie al css fornito non dovrebbe essere troppo difficile.

Parametri supportati dal JS

Il javascript di tumblr supporta una serie di parametri con cui è possibile personalizzare ulteriormente i contenuti visualizzati. In particolare:

• num: con cui è possibile decidere QUANTI elementi visualizzare. 
  

  <script type=”text/javascript” src=”http://nomeutente.tumblr.com/js?num=5″></script>

• type: che permette di filtrare in base al tipo di elemento, e può assumere i valori photo, video, quote, text, audio. 
  

  <script type=”text/javascript” src=”http://nomeutente.tumblr.com/js?type=text”></script>

• tag: con cui è possibile filtrare in base alle etichette utilizzate. 
  

  <script type=”text/javascript” src=”http://nomeutente.tumblr.com/js?tag=love”></script>

Ovviamente questi parametri possono essere combinati in and (&) per ottenere personalizzazioni ancora più particolari. 

<script type=”text/javascript” src=”http://nomeutente.tumblr.com/js?num=3&type=text&tag=girl”></script>

 

Enjoy! =)

P.S. Se l’articolo ti è piaciuto lascia un commento!

-N