Come aggiungere al blog il pulsante di Facebook Messenger.

Come aggiungere a un blog su Blogger un bottone normale o ufficiale per aprire una conversazione su Facebook Messenger del Profilo o della Pagina collegata al sito.

Le nuove generazioni anche rispetto a quelle di soli sei-otto anni fa hanno mutato profondamente il loro comportamento online. Gli SMS e le email sono sostanzialmente spariti e non solo le conversazioni ma anche la condivisione di file di ogni genere avvengono tramite applicazioni di messaggistica quali WhatsApp o Facebook Messenger.

Come certo saprete Facebook sta separando le funzionalità di Facebook Messenger in modo da creare due applicazioni indipendenti. È inoltre notizia recentissima che WhatsApp si prepara a rilasciare la funzionalità delle videochiamate e a lanciare una applicazione per computer standalone e non subordinata a un collegamento comune Wi-Fi come quella disponibile attualmente con WhatsApp Web.

Il bottone per la condivisione di contenuti di WhatsApp per il momento funzionante solo su dispositivi mobili ben presto potrà così essere implementato anche nella versione desktop dei vari siti. In questo post vedremo come implementare nel nostro sito un bottone che permetta al lettore di iniziare una conversazione tramite Facebook Messenger con il nostro Profilo o con quello della Pagina Facebook collegata al sito. Vi proporrò due opzioni possibili. La prima è senza javascript ed è molto semplice da implementare mentre la seconda è quella ufficiale di Facebook e per funzionare ha bisogno  che lo script di Facebook e i metatag con la ID della applicazione siano stati inseriti nel modello.

BOTTONE CON LINK A FACEBOOK MESSENGER

La creazione di un link a Facebook Messenger presuppone soltanto l'uso di un bottone di nostra scelta. Tale immagine può essere caricata su Picasa oppure si può utilizzare l'URL di quello che ho appena creato. Il bottone può essere inserito in una sidebar andando su Layout > Aggiungi un gadget > Base > HTML/Javascript oppure anche in un semplice post o pagina statica scegliendo la Modalità HTML. Il codice da incollare è il seguente

<p><a href="https://m.me/ideepercomputeredinternet" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTQKEdk4UWH6eqRzz0C06cGkDmtSXTrzC3XmwsZHtbp598jSPrTtp0qC-0hH-XRntBMt5xn5fgHLa6xOKeGzLMrFpT85XfOK_X2JdaeguH-w04v17eKDXNdUnPQm1t2_Zp3YhV9oTpQA/s600/facebook.png" alt="Facebook Messenger" width="250" height="85" /></a></p>

Basta sostituire a ideepercomputeredinternet il Vanity URL del vostro Profilo o della vostra pagina Facebook. Per farlo si apre la pagina e si copia l'ultima parte dell'indirizzo che potrebbe anche essere un ID numerico se non avete ancora optato per un VanityUrl. Il risultato sarà così

Questo pulsante ha la particolarità di funzionare in qualsiasi pagina web venga incollato il codice. Se ci cliccate sopra aprirete nel browser una finestra come questa

in cui iniziare una conversazione. Il tag target="_blank" serve per aprire il link in un'altra scheda e possono essere ovviamente personalizzate le dimensioni e l'indirizzo della immagine.

Se ci fossero dei problemi con le notifiche dei messaggi ricordatevi di abilitare e di disabilitare eventualmente i filtri che non mostrano i messaggi dei non amici.

BOTTONE UFFICIALE DI FACEBOOK MESSENGER

Come detto per installare il bottone ufficiale di Facebook Messenger occorre aver creato una applicazione Facebook specifica per il sito. Utilizzando l'ID di tale applicazione si incollerà nel modello di Blogger il javascript SDK e i metatag di Facebook che serviranno per una installazione semplificata di tutti i plugin e una condivisione più immediata dei post e dei video. 

Se nel modello abbiamo già quel javascript potremo aggiungere il bottone ufficiale di Facebook Messenger in una sidebar o anche all'interno di un post. Nel primo caso si va su Layout > Aggiungi un gadget > Base > HTML/Javascript mentre nel secondo si va in Modalità HTML nell'Editor del post. In entrambi i casi il codice da usare è il seguente

<div style="text-align:center;">
<div class="fb-messengermessageus"
         messenger_app_id="1522133584756752"
         page_id="207337935513"
         color="blue"
         size="large">
</div>
</div>

dove l'App_ID è il codice identificativo della applicazione specifica per il sito e il Page_Id è invece il numero identificativo della Pagina Facebook. Se non lo conoscete e nell'indirizzo della vostra pagina c'è solo il VanityURL lo potete ricavare accedendo a Find your Facebook ID

Si incolla l'indirizzo della pagina, si va su Find Numeric ID per visualizzarlo e copiarlo. Chi ci cliccherà sopra aprirà una pagina di Facebook Messenger simile a quella vista sopra.

P.S. La Demo mostrata qui sopra funziona ma vi prego di non usarla per mandarmi messaggi di test.