SEO Guru

Come integrare Twitter @Anywhere in un sito

Twitter Anywhere consente una più completa integrazione tra il noto microblogging e il proprio sito internet.

TweetBox

La principale caratteristica di cui si potrà disporre sarà la possibilità di inviare tweet direttamente dalle pagine del proprio sito; tramite la vostra applicazione registrata anche i vostri visitatori,  utilizzando le loro credenziali Twitter, potranno inviare tweet sui loro profili senza lasciare il vostro blog o il vostro sito.

Predisponendo delle TweetBox in punti strategici del vostro layout potrete facilmente stimolare la diffusione dei vostri contenuti, alimentando il tweeting da parte dei visitatori.

Su questo sito potete osservare diversi esempi di TweetBox personalizzate, come quella collocata subito sotto la fine di questo post o come quella in homepage, sulla barra laterale.

Hovercards

Altra simpatica funzione di Twitter Anywhere è quella che offre la possibilità di visualizzare le hovercards di Twitter sulle pagine del proprio sito.

Le hovercards sono dei semplici tooltips interattivi che compaiono quando il puntatore del mouse scorre su un termine preceduto dalla chiocciola, proprio come fosse una mention su Twitter.

Es.:

@Seo__Guru

Twitter Anywhere

Ho già spiegato come integrare Twitter Anywhere su un blog WordPress utilizzando un plugin. Ora volevo aggiungere le indicazioni utili per aggiungere Anywhere in un qualsiasi sito, utilizzando direttamente il codice fornito da Twitter.

Installare Twitter Anywhere in qualsiasi sito web

Se non avete un sito fatto con WordPress o se semplicemente preferite evitare l’installazione dell’ennesimo plugin potete comunque, molto facilmente, aggiungere al vostro sito il codice necessario per utilizzare Anywhere e le sue funzioni.

1 – Registrate la vostra applicazione Twitter presso il centro sviluppatori.
2 – Inserite il seguente codice nella sezione <head> … </head> del vostro sito:

<script type="text/javascript" src="https://platform.twitter.com/anywhere.js?id=XXXXXXXXXXXXXXXXX&amp;v=1"></script>

Dovrete ovviamente sostituire XXXXXXXXXXXXXXXXX con la ‘Consumer key‘ della vostra applicazione.

Una volta predisposto Anywhere con la chiamata citata sopra potete scegliere quali funzioni attivare.

Hovercards

Per attivare le hovercards di Twitter sara sufficiente aggiungere il seguente codice in un punto qualsiasi del vostro codice, all’interno del tag <body> … </body> (vi consiglio di metterlo poco prima della chiusura del tag <body>, per non rallentare il rendering della pagina):

<script type="text/javascript">
twttr.anywhere(function (T) {
T.hovercards();
});
</script>

TweetBox

Con poche righe di codice potrete inserire in qualsiasi punto della pagina una TweetBox completamente personalizzata. Ecco un esempio.

<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 90,
width: 468,
label: "Etichetta della TweetBox",
defaultContent: "Contenuto precompilato del tweet. Con link e mention @Seo__Guru https://seoguru.it/ "
});
});
</script>

Questo snippet produce una TweetBox larga 468 pixel e alta 90. Modificando il codice riportato sopra potrete quindi modificare le dimensioni e sostituire il testo della ‘label‘ e del tweet vero e proprio, se volete precompilare almeno parzialmente il tweet suggerito dalla TweetBox.

Aggiungi un commento