Il bottone ufficiale di Twitter da mettere accanto a quello di Facebook in un blog su Blogger.

Il pulsante Mi Piace di Facebook ha avuto un tale successo che quelli di Twitter hanno pensato bene di rilasciare delle API per inserire nei siti un bottone simile che permetta ai navigatori di twittare o retwittare gli articoli. Credo che la cosa più opportuna sia quella di inserire l'iFrame di Facebook e il bottone di Twitter alla stessa altezza della pagina, uno sulla sinistra e l'altro sulla destra. D'altra parte questi sono i solo social network veramente planetari. Altri pulsanti di condivisione in questo momento mi sembrano più che altro utili solo a appesantire la pagina. Le personalizzazione che si possono fare sono abbastanza numerose e molti grandi blogger stanno già lavorando da alcune ore per presentarle ai colleghi di tutto il mondo.

Mi limiterò a illustrare come inserire il pulsante di Twitter sulla destra di quello di Facebook subito dopo la fine del testo dell'articolo. Naturalmente in base ai modelli si possono scegliere soluzioni differenti. Prima di iniziare la trattazione vi posto il video-tutorial che i ragazzi di Twitter hanno messo in rete

Vengono messi a disposizione tre tipi di bottoni. Quello con il contatore dei tweet in verticale, quello in orizzontale e quello senza contatore.

Il codice da incollare è il seguente

<!--Twitter Inizio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;padding:4px;'>
<a class='twitter-share-button' data-count='vertical' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</div>
</b:if>
<!--Twitter Fine-->

Le personalizzazioni riguardano:

1. Le due righe evidenziate di rosso permettono di vedere il bottone solo nei post e non nelle altre pagine come la Home; si possono eliminare per una scelta diversa
2. float:right serve per posizionare il bottone sulla destra; se si vuole sulla sinistra si sostituisce right con left
3. padding:4px; è la distanza tra il bottone e il resto del layout in tutte le direzioni. Si può variare anche per ogni singola direzione
4. data-count='vertical' serve per scegliere il bottone con contatore verticale. Le altre opzioni sono  data-count='horizontal'  e data-count='none' con ovvio significato
5. data-via='parsifal32' indica il nome dell'utente dell'autore del blog. Ovviamente il mio nick va sostituito con quello del vostro account Twitter
6. Si può aggiungere anche un testo a piacere al tweet che partirà dal blog. Per esempio possiamo sostituire expr:data-text='data:post.title' con expr:data-text='&quot;Sto leggendo: &quot;+data:post.title'. In questo caso il tweet sarà preceduto dall'espressione Sto leggendo:

Il codice va inserito subito dopo quello dell'iFrame di Facebook che è stato incollato nel modello dopo la riga di codice <data:post.body/>. Per ulteriori informazioni sul posizionamento rileggetevi questo post. Come al solito si va su Design > Modifica HTML e si incolla il codice, quindi si Salva il Modello. Ecco lo screenshot

Alcune considerazioni aggiuntive:

1. E' preferibile mettere il bottone Mi Piace e quello di Twitter solo nei singoli post per non rallentare troppo il caricamento della pagina.
2. Per il pulsante Mi Piace di Facebook si può scegliere di mostrare anche gli avatar oppure solo il numero (e eventualmente i nomi) di chi ha cliccato. Se si vogliono mostrare anche gli avatar occorre scegliere un'altezza di 60 pixel in entrambe le occorrenze di "height". Il pulsante di Twitter con il contatore verticale è piuttosto grande quindi è opportuno abbinarlo al pulsante di Facebook che mostra anche gli avatar. Se invece non abbiamo scelto questa opzione allora è preferibile optare per il pulsante di Twitter con il contatore orizzontale o senza contatore che sono più piccoli

Il pulsante con contatore si presenterà in questo modo

nel caso in cui si sia scelta l'opzione di quello verticale abbinato al Mi Piace con gli avatar. Il numero rappresenta quante persone hanno postato l'articolo su Twitter. Se si clicca sopra a Tweet si apre una finestra popup di questo genere

dove la prima parte del tweet è rappresentata dal Titolo del post; a seguire c'è il link accorciato e il nome utente dell'autore del blog da cui si sta postando. Il Titolo può essere modificato come ci pare mantenendo il limite massimo dei 140 caratteri. Quando si clicca nuovamente su Tweet ecco che il post sarà un nuovo aggiornamento di stato per il nostro account Twitter

Si potrà vedere immediatamente il tweet seguendo il link o si potrà chiudere la finestra. Credo che questo bottone, che si basa su un javascript dello stesso Twitter, avrà un successo solo di poco inferiore a quello di Facebook. Da considerare che mentre il pulsante Mi Piace è abbastanza visibile quello di Twitter lo è di meno quindi è preferibile scegliere il pulsante con il contatore verticale che ha dimensioni maggiori. Vedi la demo del pulsante orizzontale con contatore

Per acquisire il codice è anche possibile andare su Tweet Button, pagina appositamente creata da Twitter per i suoi bottoni. Scegliere il tipo di bottone, inserire i dati del nostro account e l'URL del nostro blog quindi copiare il codice nella parte bassa della pagina. E' possibile anche inserire una descrizione ma lo sconsiglio perché si consumerebbero troppi caratteri dei 140 disponibili. Per questo blog il codice potrebbe essere così

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="parsifal32" data-related="www.ideepercomputeredinternet.com">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Si sostituisce a quello proposto da me lasciando i commenti e le righe di condizione. Da notare che il contatore verticale ha dimensioni 55x62 pixel, quello orizzontale 110x20 pixel mentre il bottone senza contatore 55x20 pixel.