Pubblicato il 13/08/10 - aggiornato il  | 21 commenti :

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

codice-twitter

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

pulsante-twitter

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

pulsante-twitter[5]

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

post-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

twitter-pulsante-contatore-orizzontale

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.





21 commenti :

  1. grazie della dritta :)
    con difficoltà sono riuscito quasi ad affiancare i due bottoni di facebook e twitter..puoi dirmi e se si può fare meglio di così?e c'è un metodo specifico pr avvicinarli?io naturalemente li ho messi dopo

    div class='post-footer'

    e ho ridotto la larghezza del pulsante mi piace..

    RispondiElimina
  2. A me sembrano abbastanza allineati. Non so se lo hai già fatto ma prova a mettere prima il codice di Twitter e poi quello di Facebook.

    RispondiElimina
  3. @Ernesto T.

    si ci ho provato ma il risultato peggiore.così si nota poco.invece c'è un modo per avvicinarli di più?ho visto alcuni siti tipo tuttosport.com che ce l'hanno affiancati.

    RispondiElimina
  4. Prova a inserire accanto a padding:4px; anche
    margin-right:80px; prima dell'apostrofo di fine CSS;
    dove 80px lo puoi personalizzare a piacere

    RispondiElimina
  5. @Ernesto T.

    così sinceramente non ha funzionato,ma ho capito che devo lavorare sulla terza stringa,su float,padding e con quel margin right o left che tu hai segnalato.al momento ho trovato una soluzione con float left per twitter.ho capito pure che la terza stringa la posso inserire sia nel pulsante invia che su quello send.ci lavoro un po' già ora sono riuscito ad affiancare i due pulsanti.grazie del suggerimento,mi è davvero servito.

    RispondiElimina
  6. Ciao, ho messo il pulsante Twitter e quello di Google +1 anche nella home, ma a differenza del +1, con il pulsante di Twitter non riesco a far twittare i singoli post nela home....non riesce a distingure tra la pagine e uno dei post, è possibile una modifica?

    RispondiElimina
  7. @ivabellini
    Non possiamo intervenire nello script di Twitter. La presenza dell'espressione
    expr:data-url='data:post.url
    fa sì che venga condivisa la pagina il cui indirizzo è nel browser

    RispondiElimina
  8. peccato, ho anche ilcaos.it dove grazie a un plugin di wordpress, Twitter funziona nella home dal singolo post, mentre qui no.
    Vorrà dire che se uno vuole indicare il post andrà più in basso nei pulsanti di blogger....a proposito, non riesco a togliere questi pulsanti, sono bloccati e non si possono nemmeno spostare, come mai?

    RispondiElimina
  9. @ivabellini
    Prova così
    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html

    RispondiElimina
  10. ho provato così:

    .sb-email{display:none}
    .sb-blog{display:none}
    .sb-twitter{display:none}
    .sb-facebook{display:none}
    .sb-buzz{display:none}
    .sb-g:plusone{display:none}
    ]]>

    ma si vede ancora il +1, ho sbagliato il comando vero?

    RispondiElimina
  11. @ivabellini
    Togliendo la spunta semplicemente non ti funziona? Non conosco l'ID della classe del Plusone

    RispondiElimina
  12. con o senza spunta non va, nemmeno spostando i vari oggetti non cambia nulla, ho provato con gplusone g:plusone plusone +1 gplus niente da fare :(

    RispondiElimina
  13. @ivabellini
    Prova a cercare nel modello questo codice
    <div class='post-share-buttons goog-inline-block'>
    <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
    </b:if>
    </div>
    e cancellalo. Ricordati di salvare il template e di espandere i modelli widget

    RispondiElimina
  14. Ma per pubblicare i post di blogger sulla pagina ufficiale di facebook?
    Come devo fare?

    RispondiElimina
  15. @Marta
    Puoi scegliere tra NetworkedBlogs
    http://www.ideepercomputeredinternet.com/2009/09/creare-una-pagina-fan-del-blog-ed.html
    e RSS Graffiti
    http://www.ideepercomputeredinternet.com/2011/03/rss-graffiti-per-importare-gli-articoli.html
    oppure usare anche tutte e due.
    Se vuoi importare nella pagina fan anche i commenti del blog (tutti o solo i tuoi) puoi utilizzare Twitterfeed
    http://www.ideepercomputeredinternet.com/2009/11/come-postare-i-commenti-del-blog-su.html

    RispondiElimina
  16. grazie per il tuo post! grazie anche per quello su facebook, ottimi.
    solo non riesco a "tirar su" il tasto follow di twitter, come vedi rimane in basso, non allineato con quello di facebook, come posso fare? grazie ancora

    RispondiElimina
  17. @paternamente.it
    Ecco il post che fa per te
    http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
    Per l'allineamento verticale agisci sui valori di padding-top

    RispondiElimina
  18. Ho inserito il bottone ma provando a twittarlo non compare mai il titolo. Ad esempio col codice che indichi compare un twitt del tipo:
    data:post.title linkpostblog via @utente

    Cioè il data:post.title viene riportato come testo e non modificato col titolo del post che si vuole twittare.

    (non so se sono riuscito a esprimermi chiaramente)

    RispondiElimina
  19. @Alessio Angelico
    Ma lo inserisci su un blog di Blogger? Se sì prova a inserire l'ultimo codice cioè questo
    <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>
    modificando URL del blog e nome utente. Deve funzionare per forza. Poi metti anche i tag condizionali
    all'inizio
    <b:if cond='data:blog.pageType == &quot;item&quot;'> e
    </b:if>
    alla fine

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.