Pubblicato il 09/06/13e aggiornato il

Pulsante per invitare gli amici di Facebook a visitare il blog.

Come installare su Blogger un bottone per dare la possibilità ai lettori di invitare gli amici a visitare il nostro sito.
La stragrande maggioranza dei lettori dei blog hanno anche un account Facebook con una media di 150-200 amici per ciascuno. Se un navigatore ritiene utili i contenuti di un sito web perché non dargli la possibilità di condividere questo apprezzamento con una parte o con tutti i suoi amici di Facebook? Ecco quindi che Facebook ha reso disponibile per gli utenti quello che forse è uno dei modi più efficaci per aumentare le visite al sito.

Si può infatti installare nel blog un pulsante su cui i lettori possono cliccare e che aprirà una finestra popup in cui potranno invitare tutti gli amici che vorranno e che riceveranno una notifica in tal senso nella sezione Richieste. Per evitare abusi Facebook ha messo il limite di 50 inviti per volta ma dopo aver fatto il primo invito a 50 persone se ne può fare un altro ad altre 50 e così via.

La condizione per l'inserimento di questo pulsante è la creazione di una applicazione Facebook che può essere fatta accedendo alla pagina Facebook Developers. Se non avete mai verificato il vostro account con un codice inviato per SMS non vi sarà data possibilità di creare una applicazione. Bisogna creare una applicazione per ciascun sito che si gestisce in quanto il suo funzionamento è legato al dominio su cui opera. Andate su Crea applicazione se non ne avete ancora una per il vostro blog. Se invece la avete già creata andate su Edit Setting per verificare che sia tutto a posto

creare-applicazione-facebook

E' fondamentale inserire l'URL in App Domains e in Website with Facebook Login e quindi salvare le modifiche. Il primo URL va messo senza http iniziale mentre nel secondo va inserita anche questa parte. In App Domain ho dovuto mettere il suffisso .it perché con .com non funzionava ma potrebbe essere stato un caso. Il dato che ci interessa è quello del codice identificativo della applicazione (App ID).

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<style>
.bottone_invito a{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif ! important;
    font-weight:bold ! important;
    font-size:12px ! important;
    width:150px ! important;
    border:solid #29447e 1px ! important;
    border-bottom:solid #1a356e 1px ! important;
    cursor:pointer ! important;
    padding:6px 6px 6px 6px ! important;
    background-color:#5c75a9 ! important;
    border-top:solid #8a9cc2 1px ! important;
    text-align:center ! important;
    color:#fff ! important;
text-decoration:none  ! important;
}
.bottone_invito a:active{
    background-color:#4f6aa3;
}
</style>
<script src="http://connect.facebook.net/it_IT/all.js"></script>
<script>
FB.init({
appId:'479289442099719',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Invita i tuoi amici a visitare questo blog se lo ritieni interessante'
});
}
</script>
<div id="fb-root"></div>
<span class="bottone_invito"><a href='#' onclick="FacebookInviteFriends();">
Invita i tuoi amici di Facebook</a></span>
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>

Si salva dopo aver opzionalmente inserito anche un titolo. Il bottone avrà questo aspetto

invita-amici-facebook

e quando qualcuno ci cliccherà sopra vedrà aprirsi questa finestra popup

finestra-per-invitare-amici
in cui si potranno invitare fino a 50 amici per volta a visitare il sito in oggetto. Le espressioni colorate di rosso possono essere personalizzate a piacere. Quello che è fondamentale è di mettere il codice numerico di App ID. Se avete già nel modello il javascript di Facebook per non doverlo inserire tutte le volte che installate un nuovo plugin, potete tralasciare la riga evidenziata di giallo. Nel caso che abbiate un sito di dimensioni internazionali al posto di it_IT dovrete mettere en_US per avere la grafica in inglese



Aggiornamento: Mi è stato riferito in un commento che questo widget provoca dei problemi nell'accesso a Blogger e nella visualizzazione di altri widget del blog. Se riscontrate queste problematiche eliminate il gadget.




14 commenti :

  1. Carissimo Ernesto,
    ho creato una nuova applicazione su facebook come mostrato in questo post ma non funziona forse perchè non ho mai verificato il mio account tramite sms? Per verificarlo e farmi inviare questo benedetto codice cosa devo fare?
    Grazie anticipate per la risposta.
    Antonello&Stefano

    RispondiElimina
    Risposte
    1. @# Devi andare nel Profilo su Informazioni e mettere il numero di telefono mettendolo visibile solo per te. Poi per verificarlo seguimi domani o dopodomani e ci faccio un post :)

      Elimina
    2. Ciao Ernesto, io lo inserito al sito http://oldwildweb.blogspot.com funziona tutto perfettamente tranne che gli inviti che non arrivano ai destinatari, ora lo tolto ma se mi dai una soluzione lo inserisco di nuovo.

      Elimina
    3. Questa personalizzazione credo sia stata eliminata dalle API di Facebook
      @#

      Elimina
    4. Come posso farlo funzionare?

      Elimina
    5. Non credo sia più disponibile.
      @#

      Elimina
  2. ciao ernesto installato ma dice errore riprova piu' tardi e mi connette con la home

    RispondiElimina
    Risposte
    1. @# Se ti dice riprova più tardi dovrebbe significare che l'errore dipende dai loro server. Prova domani e se la cosa si ripetesse prova a cambiare l'URL del dominio mettendo .it se hai messo .com o viceversa. Anche a me all'inizio ha dato errore

      Elimina
  3. interessante, peccato che chissà come mai, molte poche persone hanno voglia di aiutare gli altri, ci proverò comunque, non si sa mai. Utile come sempre Ernesto :)

    RispondiElimina
  4. Ciao Ernesto applicazione bellissima come sempre, installata e funzionate. L'unico problemino è che questo widget crea degli scompigli al mio blog, ovvero non mi fa comparire l'anteprima dei post, e mi da errore se accedo all'interfaccia blogger dall'interno del mio blog.
    Per capire se realmente fosse questo widget a creare tali problemi ho testato il blog con e senza di essa. E mi sono accorto che senza esce l'anteprima e non mi dà quei problemi di accesso. Non so se altri hanno riscontrato il mio errore, mi dispiace perchè era molto bella e utile.

    RispondiElimina
    Risposte
    1. @# Mi stupiscono questi problemi ma se li hai riscontrati hai fatto bene a togliere il gadget

      Elimina
  5. Mi crea problemi purtroppo, era una cosa che mi serviva, ma blocca il funzionamento di alcune cose quali le preview. O se vado a personalizzare il blog non me lo fa fare. dovrò eliminarlo, che peccato

    RispondiElimina
    Risposte
    1. Infatti. Crea diversi problemi a quasi tutti i modelli. L'ho fatto presente anche nel post.
      @#

      Elimina
  6. Anche a me (su blogger) da' problemi di accesso alla pagina di personalizzazione dei modelli e degli stili dopo aver inserito il codice per il pulsante di invito...
    peccato perché era un gadget eccezionale

    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.