Integrare TUMBLR in qualsiasi sito
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
breve e chiarissimo! ottimo e grazie..
interessante e chiaro, grazie!
Ciao!
non riesco a capire se sia possibile mostrare i tag di tumblr in fondo ai post che pubblica sul sito grazie allo script js.
C’è un modo? Perché funziona tutto molto bene, tranne che i tag non ci sono.
Articolo aggiornato con i parametri JS 😉