Pubblicato il 04/05/16 - aggiornato il  | 5 commenti :

Come personalizzare il Page Plugin di Facebook per aggiungere Diario, Messaggi e Eventi.

Come mostrare le schede Diario, Messaggi e Eventi nel Page Plugin di Facebook per permettere ai lettori di inviarci messaggi e di partecipare agli eventi oltre che a leggere gli ultimi post.
In un articolo precedente abbiamo visto come creare un pulsante per farci inviare messaggi dai lettori con Facebook Messenger. In realtà questa possibilità esiste già all'interno del Page Plugin anche se mi risulta che in pochi utilizzano questa opzione. 

Come per tutti i plugin di Facebook è meglio creare una applicazione specifica per ogni sito che si possiede per poi implementare nel modello il javascript SDK e i metatag di Facebook. Senza questa implementazione le funzionalità dei plugin saranno limitate.

Per quello che riguarda la piattaforma Blogger, se si vuole evitare di creare una applicazione si può andare su Modello > Modifica HTML e cercare la riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Subito sotto a questa si incolla un codice come questo

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/it_IT/sdk.js#xfbml=1&amp;version=v2.12';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

quindi si salva il modello. Ripeto però che questa soluzione è sicuramente meno efficace di quella della creazione di una applicazione anche se più semplice.

CONFIGURAZIONE DEL PAGE PLUGIN DI FACEBOOK


Attraverso la pagina di documentazione del Page Plugin di Facebook possiamo inserire nuove Schede o Tab nel plugin in modo da renderlo anche un veicolo di interazione per i lettori 

configurazione-page-plugin-facebook

Oltre all'URL della pagina Facebook in Tab si possono aggiungere separate da virgole timeline, messages, events per mostrare le tre schede Diario, Messaggi e Eventi. Più sotto si possono digitare la larghezza e l'altezza del riquadro adattandolo a quelle della sidebar del nostro sito. Affinché il Tab Messaggi funzioni occorre digitare una altezza di almeno 380 pixel. Verrà visualizzata l'Anteprima del plugin e dovremo andare su Ottieni il codice in basso per poterlo selezionare

configurazione-page-plugin-facebook

Si sceglie preferibilmente la scheda SDK JavaScript ma si può optare anche per iFrame se non abbiamo il codice javascript presente nel template. La parte del codice compresa tra <blockquote> e </blockquote> compresi può anche essere tralasciata. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla in Sezioni del Sito quindi si salva l'elemento.

Un esempio di codice SDK Javascript può essere il seguente

<div class="fb-page" data-href="https://www.facebook.com/ideepercomputeredinternet/" data-tabs="timeline,messages,events" data-small-header="false" data-adapt-container-width="false" data-width="310" data-height="420" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"></div></div>

in cui ho scelto le dimensioni 310x420 pixel.

COME INVIARE MESSAGGI CON IL TAB DEL PAGE PLUGIN


Se abbiamo optato per il tab messages oltre a quello timeline sarà possibile inviare messaggi

inviare-messaggi-page-plugin

Per poterlo fare occorre naturalmente essere loggati su Facebook. Se non lo fossimo

page-plugin-facebook

visualizzeremo il pulsante Accedi per poterlo fare. Nella tab Eventi saranno presenti gli eventi creati dalla pagina con la possibilità di registrarsi per potervi partecipare mentre nel Diario saranno visibili gli ultimi post pubblicati nella pagina Facebook in oggetto.


5 commenti :

  1. Non è difficile. Salvo il tuo commento. Seguimi i prossimi giorni
    @#

    RispondiElimina
  2. Ciao :)
    Scusa dove trovo ''Attraverso la pagina di documentazione del Page Plugin di Facebook'' su FB o devo cercarla nel blog?
    Grazie!

    RispondiElimina
    Risposte
    1. C'è il link. Loggata da Facebook apri questa pagina
      https://developers.facebook.com/docs/plugins/page-plugin
      quindi nella prima riga incolli l'URL della tua pagina, imposti la larghezza e l'altezza poi lasci o togli la spunta agli elementi che vuoi mostrare oppure no. Vedrai l'anteprima del widget e quando sei soddisfatta vai su Ottieni il codice per copiarlo e incollarlo nel tuo sito
      @#

      Elimina
    2. non funziona! ho seguito passo passo tutte le istruzioni!

      Elimina
    3. Può essere che non funzionasse. Ho aggiornato il post e il codice e ora funziona
      https://i.imgur.com/BlGgoTc.jpg
      Il codice da mettere nel widget lo devi copiare da sola dopo aver incollato l'URL della tua pagina. La grafica è leggermente cambiata e ora non ci sono più le tre schede
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy