Pubblicato il 27/04/11e aggiornato il

Installare il pulsante Invia o Send in un blog su Blogger insieme al Mi Piace.

Dopo aver presentato nel precedente post il nuovo pulsante Invia di Facebook, passo ad illustrare come fare per inserire questo plugin che permetterà ai visitatori del vostro blog, non solo di condividere un singolo post nel loro Profilo cliccando su Mi Piace, ma anche di inviarlo a uno o più amici con il bottone Send. Nel momento in cui scrivo questo articolo, il pulsante funziona solo se si sceglie la lingua inglese americana ovvero en_US ma ritengo che nei prossimi giorni se non nelle prossime ore sarà perfettamente funzionante anche con quella italiana. Per prima cosa bisogna andare su Create App per creare una applicazione per il nostro sito. Basta inserire un qualsiasi nome e cliccare sul pulsante Create App. In seguito sarà richiesta anche l'URL della homepage del blog. Se avete più siti, è possibile avere una applicazione per ciascuno di essi.

Si va su Sviluppatori - Le mie Applicazioni per poterle gestire. Ogni applicazione avrà un suo ID e le sue API Key che in questo contesto non ci servono

id applicazioni api key 

L'unico dato da acquisire è l'ID dell'applicazione. Per implementare il pulsante Invia (Send) insieme al pulsante Mi Piace bisogna procedere in questo modo. Si va su Design > Modifica HTML e si salva il modello completo. Dopo aver messo la flag a espandi modelli widget, si cerca la riga </body> e, immediatamente sopra, si incolla il seguente codice

<!-- Facebook XFBML asincrono -->
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: &#39;116894568356960&#39;, status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(&#39;script&#39;); e.async = true;
    e.src = document.location.protocol +
      &#39;//connect.facebook.net/it_US/all.js&#39;;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
</script>
<!-- Facebook XFBML asincrono -->

dove al posto dell'ID evidenziato di rosso, inserite l'ID della vostra applicazione. Adesso cercate questo blocco di codice

 <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
   <div class='post-footer'>

Immediatamente sopra incollate il seguente

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script src='http://connect.facebook.net/it_IT/all.js#xfbml=1'/><fb:like expr:src='data:post.url' send='true' show_faces='true' width='530'/>
</b:if>
<!--FACEBOOK MI PIACE FINE - www.ideepercomputeredinternet.com-->

Salvate il modello. Si può naturalmente scegliere anche un'altra posizione per visualizzare i due bottoni. Tra qualche giorno o forse tra qualche ora sarà possibile sostituire en_US con it_IT per avere i pulsanti in lingua italiana. Le altre personalizzazioni riguardano

  1. La presenza o meno del bottone Invia inserendo send='true'  o send='false'  
  2. La presenza o meno degli avatar di chi clicca su Mi Piace: show_faces='true'  oppure show_faces='false'
  3. La larghezza in pixel della finestrella width='530'

Alla fine del post apparirà una cosa di questo genere

like e send facebook

Se si clicca su Mi Piace (Like) si aprirà una finestra in cui inserire un messaggio di condivisione per il post

mi piace facebook condividere

Se invece si clicca su Invia (Send) sarà possibile spedire il post a uno o più amici

inviare post agli amici su facebook

Nel momento in cui si inizierà a digitare un nome, appariranno i suggerimenti in basso . E' anche possibile inviare il post a un gruppo, in questo caso apparirà nella Bacheca insieme all'eventuale messaggio

messaggio invia facebook plugin send

Si termina cliccando su Send (Invia). Con questo sistema sarà spedito il singolo post e non la home page del blog. Il collegamento automatico all'articolo è definito dalla stringa  expr:src='data:post.url' . Nel prossimo articolo mi occuperò di come inserire il pulsante Invia da solo senza il Mi Piace nella speranza che sia già funzionante lo script anche in lingua italiana. Concludo osservando che l'inserimento di questi pulsanti è stato fatto in modo asincrono per migliorare la velocità di caricamento della pagina. Significa che i vari browser continueranno a mostrare tutti gli elementi presenti nel post a prescindere da questo pulsante che sarà visualizzato alla fine.

Aggiornamento: E' già possibile visualizzare i bottoni Mi Piace e Invia in italiano inserendo it_IT nel secondo codice. I pulsanti avranno questa forma

pulsanti invia e mi piace su Facebook

Al momento non è ancora possibile cambiare lingua nel primo codice, quindi i comandi per inviare il post o annullare la richiesta permangono in lingua inglese (Send e Cancel).

Aggiornamento n°2: Si può sostituire en_US con it_IT anche nel secondo script. I pulsanti appariranno in italiano

invia send facebook pulsante

con Invia e Annulla al posto di Send e Cancel.





29 commenti :

  1. AL MOMENTO NON FUNZIONA NEL SENSO CHE NON MI FA CREARE L'APPLICAZIONE..SARA' UN PROBLEMA DI FACEBOOK???

    RispondiElimina
  2. @TUTTI GLI SCANDALI DEL VATICANO Per tutto il giorno di ieri mi è stato impossibile accedere ai messaggi, sono in manutenzione per questo nuovo pulsante.

    RispondiElimina
  3. Ho fatto un mezzo pastrocchio con questo nuovo plugin. Avevo già inserito il tasto "mi piace" sopra il post e precisamente sotto il titolo dell'articolo.
    Come aggiungere il tasto Invia assieme al Mi piace sempre poco sotto il titolo?

    Per fortuna avevo fatto backup del modello :)

    RispondiElimina
  4. @Nicola Segui le istruzioni dell'articolo e inserisci la prima parte del codice come indicato. La seconda parte la sostituisci al codice che hai sotto il titolo.

    RispondiElimina
  5. ciao, siccome sono molto spratico in materia e avevo già inserito il tasto mi piace, cosa devo eliminare dal mio template per poi reinserire il tutto insieme? (http://sonyericssongen.blogspot.com/)
    grazie :)

    RispondiElimina
  6. @SE-Gen
    Togli dal tuo modello il codice che inizia così
    < iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php....

    Segui le istruzioni del post. Il secondo codice lo inserisci al posto di quello che avevi tolto cioè subito sotto
    < div class='post-body entry-content' >
    Se vuoi vedere i pulsanti anche in homepage devi eliminare dal codice la seconda riga cioè
    < b:if cond='data:blog.pageType == "item"' >
    e la penultima cioè
    < /b:if >

    RispondiElimina
  7. come sempre grazie mille provo a vedere cosa combino ;)

    RispondiElimina
  8. Ok tutto fatto, ottimo. Solo una cosa, come mai per vedere i pulsanti anche in homepage eliminando dal codice la seconda riga < b:if cond='data:blog.pageType == "item"' > e la penultima < /b:if >
    il pulsante mi piace diventa generico della home page? E' normale?
    Ancora Grazie e a presto ;)

    RispondiElimina
  9. @SE-Gen Il pulsante serve per condividere una pagina, nella home ce ne sono 7 in media. La cosa migliore da fare è inserire il Mi Piace solo nei post e poi mettere dei pulsanti di condivisione generici flottanti come questi
    http://www.ideepercomputeredinternet.com/2011/03/come-aggiungere-in-blogger-una-barra.html
    che funzionano nei post, in home e nelle pagine delle etichette

    RispondiElimina
  10. Bene, grazie. Comunque ho trovato una mezza alternativa utilizzando il codice precedente più il codice nuovo... adesso nella home vedo solo il mi piace specifico sotto ogni post e nel singolo post vedo il mi piace e il invia in alto e il mi piace in basso... :P

    RispondiElimina
  11. @Ernesto T.
    ho provato a installarlo,anche eliminando il mi paice che avevo impostato ma stranamente con questo metodo non vedo nè il pulsante mi piace nè quello invia nella home(il che è abbastanza logico visto che sono collegati..).visto che nel post ho il pulsante di tweet non mi piace l'effetto,quindi in teoria o lo elimino oppure lascio il mi piace e installo il pulsante invia.ho fatto anche questa prova ma il pulsante invia si vede solo nel post.perchè????

    RispondiElimina
  12. Il pulsante si vede solo nei post perché ci sono questi due tag condizionali

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    </b:if>

    che comunque possono essere tolti

    RispondiElimina
  13. @Ernesto T.

    Come al solito sei gentilissimo,ti ringrazio vivamente per questi articoli e soprattutto per rsipondere cordialmente alle mie domande.cordiali saluti!

    RispondiElimina
  14. @Ernesto T.

    Funziona :) peccato che se li installi entrambi si perodono i mi piace che hanno ricevuto i tuoi articoli,per quello se non risolvono questo inconveniente non penso sia buona installarlo insieme al mi piace.

    RispondiElimina
  15. @TUTTI GLI SCANDALI DEL VATICANO
    Non si perdono i Mi Piace. Guarda questo post di più di un anno fa
    http://www.ideepercomputeredinternet.com/2010/04/come-inserire-il-plugin-piace-di.html
    ha un tale numero di Mi Piace che certo non si riferiscono solo agli ultimi giorni :)

    RispondiElimina
  16. ho visto!non o so,ma quando l'ho installato nella home i numero dei vari articoli era zero,cosa impossibile visto che non è così.non so magari riproverò fra qualche giorno.

    RispondiElimina
  17. E io che ho il blog con la skin scura come posso visualizzare "Di' che ti piace prima di tutti i tuoi amici." in bianco?

    RispondiElimina
  18. @Pierzollo
    Bisogna inserire questo parametro
    colorscheme=dark
    Per ulteriori informazioni leggi questi due post
    http://www.ideepercomputeredinternet.com/2010/07/come-rendere-visibile-il-pulsante-mi.html
    http://www.ideepercomputeredinternet.com/2011/03/come-inserire-e-personalizzare-il-mi.html

    RispondiElimina
  19. Grazie Ernesto! Comunque ho dato una correzione al tuo codice, per questo sarebbe meglio mettere colorscheme='dark' altrimenti non te lo mette valido ;)

    RispondiElimina
  20. @Pierzollo
    Ti ho dato i riferimenti di due post poi dipende da che tipo di pulsante e quindi da che tipo di codice scegli

    RispondiElimina
  21. scusate a me dice che c'è un errore e non mi invia i messaggi. L'installazione l'ho fatta e ho seguito perfettamente tutti i passaggi... ancora non è attivo!?!?!??!

    RispondiElimina
  22. @MartilaMi
    Dove che ti dà l'errore? Se è Facebook che non ti permette di creare l'applicazione significa che non hai ancora fatto la verifica telefonica dell'account

    RispondiElimina
  23. mio blog http://glamourmarmalade.blogspot.com ... praticamente se provo ad inviare con il simbolo di fb della posta come se fosse un email... mi dice che c'è un errore! la verifica dell'account l'ho già fatta!
    grazie per la tua risp... e se vuoi provaci a mandare un mio post con quel tasto... nn succede nnt!

    RispondiElimina
  24. @MartilaMi
    Complimenti per il bellissimo blog. Il tuo pulsante Invia funziona correttamente come puoi vedere da questo screenshot
    http://i.min.us/idhLs0.png
    Mi è anche correttamente arrivato il messaggio con l'allegato
    http://i.min.us/idirqw.png
    Non vedo quale sia il problema.

    RispondiElimina
  25. Ciao!
    Ho appena installato il tutto, ma ho riscontrato lo stesso problema del commento n. 8 (SE-Gen).

    Togliendo i tag condizionali, mi condivide l'home page e non i singoli post.

    Non c'è alcuna alternativa per poter visualizzare i pulsanti Mipiace/invia in home page, che condividano i singoli articoli e non la home page?

    Dormirei lo stesso, sonni tranquilli, se non si potesse fare. Giuro :D

    Grazie per l'infinita pazienza! :D

    RispondiElimina
  26. @Sarù
    Tu puoi fare come ti pare ma se clicchi il pulsante quando sei in homepage viene condivisa la pagina il cui URL è nella barra del browser cioè l'homepage. Non ci sono alternative. E' per questo che il pulsante è utile solo nei post. Poi puoi metterne anche uno flottante tipo quello nella barra che avevo io fino a qualche giorno fa. Viene comunque sempre condivisa la pagina corrente.

    RispondiElimina
  27. ciao Ernesto, io ho installato il pulsante mi piace + invio ma mi capita che in home mi dia un numero fisso di mi piace x tutti i post e solo entrando singolarmente veda i mi piace effettivi di quel post, come mai secondo te? grazie...

    RispondiElimina
  28. @ViviTaranto
    Perché questi pulsanti sono fatti per i post e non per la home. Dovrebbero essere visibili solo nei post utilizzando i tag condizionali
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina
  29. Ah ok, anche se credo lo lascerò cmq dato che non spezzo i post in home page, ma forse dovrei pensarci...grazie tante

    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.