Pubblicato il 19/04/15e aggiornato il

Installare il Page Plugin di Facebook su Blogger e Wordpress.

Come installare il Page Plugin di Facebook dopo che è stato deprecato il Like Box in blog su piattaforma Blogger e Wordpress se si sia o meno creata una applicazione Facebook specifica per il sito.
Facebook ha da poco introdotto una nuova opzione nei suoi Social Plugin. Il Like Box è finito tra i Plugin Deprecati insieme a Activity Feed, Facepile e il Recommendations Feed. Al posto del Like Box è stato invece introdotto il Page Plugin che svolge sostanzialmente lo stesso compito. 

Si tratta di un widget che invita i lettori a sottoscrivere la nostra pagina fan e che mostra oltre agli avatar di chi lo ha già fatto anche la cover della pagina. Vediamo come si procede con la sua installazione in due casi limite. Possiamo cioè avere un sito con i plugin di Facebook già installati e che quindi abbia già lo script nel modello o nel tema con i metatag della applicazione specifica oppure possiamo installare il plugin anche senza aver precedentemente creato applicazioni.

Dopo aver aperto la pagina della configurazione del Page Plugin si inseriscono dati e preferenze

page-plugin-configurazione

Oltre all'indirizzo della pagina fan si digita la larghezza e l'altezza in pixel che deve avere il widget. Questi dati potranno comunque essere modificati in un secondo tempo. Si può anche decidere di:
  1. Mostrare o meno la copertina della pagina
  2. Mostrare o meno gli ultimi post pubblicati sulla pagina
  3. Mostrare o meno le facce dei sottoscrittori
 Si va su Get Code per visualizzare il codice da inserire nel nostro sito

codice-page-plugin

Si visualizzeranno due codici, il primo è lo script e il secondo è il codice HTML5. Si dovrà anche selezionare l'applicazione giusta per il sito in oggetto accanto a ID applicazione.

COME INSTALLARE IL PAGE PLUGIN NEI SITI CHE HANNO GIÀ LO SCRIPT


Se nel vostro sito avete già una applicazione di Facebook basterà copiare il secondo codice, andare su Layout > Aggiungi un gadget > HTML/Javascript e incollarlo in Sezioni del sito

page-plugin-facebook

Nello screenshot precedente ho deciso di mostrare gli avatar e la copertina ma non i post.

COME INSTALLARE IL PAGE PLUGIN NEI SITI SENZA SCRIPT


Se non avete creato applicazioni e se non avete nel modello i Metatag Open Graph allora copiate sempre il secondo codice. Al posto del primo codice considerate il seguente 

<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 = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

e inseritelo subito sopra al primo codice per poi posizionarli entrambi sempre su Layout > Aggiungi un gadget > HTML/Javascript. Verrà una cosa del genere 

<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 = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><div class="fb-page" data-href="https://www.facebook.com/ideepercomputeredinternet" data-width="310" data-height="200" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ideepercomputeredinternet"><a href="https://www.facebook.com/ideepercomputeredinternet">IDEE PER COMPUTER ED INTERNET</a></blockquote></div></div>

dove ho usato l'URL della pagina fan di questo sito. Il codice evidenziato di giallo è quello che è stato aggiunto al secondo codice che invece è evidenziato di verde.




PERSONALIZZAZIONE ULTERIORE DEL CODICE


Facebook ci fornisce anche le API per personalizzare il codice anche dopo che lo abbiamo configurato e che si trovano nella parte bassa della pagina del Page Plugin che ho già linkato

API-facebook-page-plugin

I parametri data-width e data-height servono per larghezza e altezza del gadget mentre ai tag data-hide-cover, data-show-facepile, data-show-posts  va aggiunto un valore booleano false o true per mostrare o meno l'elemento a cui si riferiscono (copertina, facce e post).

COME INSTALLARE IL PAGE PLUGIN SU WORDPRESS


Se avete un sito Wordpress senza nessuno script Facebook e senza aver creato una applicazione specifica procedete come già descritto e incollate sopra al secondo codice il codice evidenziato di giallo come in precedenza. Andate quindi su Bacheca > Aspetto > Widget > Testo. Trascinate il widget in una sidebar o nel footer quindi incollate il codice in questo modo

page-plugin-facebook[4]

Salvate e chiudete quindi aprite il sito per controllare che si veda il widget

page-plugin-wordpress

Con Wordpress si possono anche cercare plugin specifici per Facebook senza usare il codice.




28 commenti :

  1. Immagino che si debba modificare anche lo script che visualizza la fan box al caricamento della pagina. Vero?

    RispondiElimina
    Risposte
    1. A breve il Like Box verrà disabilitato però non mi ricordo quando. Di scriot generici ne basta uno per tutti i plugin
      @#

      Elimina
    2. Verrà disabilitato a giugno 2015

      Elimina
    3. PS: Mi riferivo a questo widget: http://www.ideepercomputeredinternet.com/2014/12/like-box-facebook-widget-popup-cookie-blogger.html

      Elimina
    4. Mi sa che sarà un problema perché il Page Plugin per il momento supporta solo HTML5 e non l'iframe come il Like Box. Vedrò se si potrà trovare una soluzione
      @#

      Elimina
    5. Ho fatto una prova inserendo il codice da inserire in un widget e sembra funzionare.

      Elimina
    6. PS: Ops. Intendevo gadget.

      Elimina
  2. Ciao.
    Io quando clicco su Get Code non ho la possibilità in alto di selezionare l'applicazione giusta per il sito in oggetto accanto a ID applicazione.
    Non mi funzionano nessuno dei due copiati cose come sono.
    Ho un sito con Blogger.
    Grazie

    RispondiElimina
    Risposte
    1. Probabilmente non hai creato l'applicazione o non lo hai fatto in modo corretto. Si può fare però anche senza copiando il codice senza applicazione. Come Codice 1 puoi usare 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 = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

      che non ha nessun ID Applicazione. Il Codice 2 invece lo prendi come illustrato nel post. Dovrebbe funzionare
      @#

      Elimina
  3. Grazie, mi avete aiutato a far funzionare il plugin!

    RispondiElimina
  4. Ciao Ernesto,

    a me funzionava fino a qualche minuto fa poi è scomparso improvvisamente!
    Il link c'è, ma il box proprio no!
    Vedi tu stesso: http://hybris-joshua.blogspot.it/

    Hai idea di quale possa essere la ragione?

    Grazie!

    RispondiElimina
    Risposte
    1. Prova a reinstallarlo, se funzionava forse c'è stata qualche modifica involontaria
      @#

      Elimina
    2. Si, ho già provato. Ho rimosso il gadget e poi re-inserito copiando il secondo codice fornito da Facebook.
      Ma nulla.

      Grazie comunque!

      Elimina
  5. Ho appena risolto, mettendo il codice vecchio!
    Pazzesco...E inspiegabile!
    L'unica possibile ragione è la seguente: nella homepage (in basso) ho usato lo stesso gadget per far pubblicità alla pagina di un amico. Adesso funzionano entrambi perché uso il codice vecchio per uno, quello nuovo per l'altro.
    Forse il Page plugin è utilizzabile per la sola applicazione riferita alla pagina del blog...

    RispondiElimina
    Risposte
    1. Sì, ci vuole una applicazione specifica per ogni sito
      @#

      Elimina
    2. Ah ecco, perfetto!
      Grazie mille :)

      Elimina
  6. Cio Ernesto, ho provato ad inserire il page plusing all'interno di un mio blog ma non c'è versi di farlo funzionare.. all'interno del blog sono già configurati diversi plusing facebook con i rispettivi codici e le open graph e tutto funziona a meraviglia ma quando vado ad inserire il page plusing non si visualizza.. o meglio appare solo una scritta che sembra essere il blockquote premetto che ho anche l'applicazione creata sù facebook. Sai darmi dritte? Grazie.

    RispondiElimina
    Risposte
    1. Non saprei proprio che dirti. Se gli altri plugin funzionano significa che lo script c'è :(
      @#

      Elimina
  7. Ciao Ernesto, da qualche giorno ho un problema con questo plugin infatti se apro il mio blog con Firefox questo scompare, mentre se lo apro con Chrome si vede bene. Stessa cosa anche con navigazione anonima. Come posso fare?

    RispondiElimina
    Risposte
    1. Queste problematiche si verificavano con IE e molto più raramente con gli altri browser. Non c'è una vera ricetta. Prova a inserire il codice di questo post. Però non c'è Firefox
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      @#

      Elimina
    2. Grazie lo stesso, ho provato il codice del post ma sono andato peggio. Il blog non è piu ottimizzato per mobile, infatti su cellulare si vede diversamente, e per di più su Firefox nessun miglioramento.
      Nel mio blog il codice originale è il seguente meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport' Pensi ci sia qualche problema?

      Elimina
    3. Il codice è quello che mostra il layout del mobile senza che sia possible lo zoom
      http://www.ideepercomputeredinternet.com/2015/06/permettere-zoom-blogger-mobile.html
      con Firefox non c'entra e Page Plugin non si deve vedere su mobile
      @#

      Elimina
  8. Ciao Ernesto, grazie per questo post. Ho installato il page plugin facilmente seguendo le tue indicazioni. Il pulsante mi piace funziona. Invece, cliccando sul pulsante condividi mi esce fuori questa scritta: Applicazione non configurata: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions.Come faccio a configurare l'applicazione? Ti ringrazio ancora molto.

    RispondiElimina
  9. Pensa che ogni tanto questo "gadget" va in tilt. -_- io ce l'ho fatta con l'opzione iframe. O.o speriamo bene! ^-^

    RispondiElimina
    Risposte
    1. PS: sempre grazie ai tuoi post meravigliosi. Perché se no, ero persa. :(

      Elimina
    2. Il widget non va in tilt. Talvolta Facebook è sovraccarico e lo script essendo asincrono non carica visto che lo fa per utlimo, succede anche con i pulsanti e altri plugin di Facebook. Anche la connessione lenta può essere una causa del mancato caricamento
      @#

      Elimina
  10. a me il widget funziona,unico inconveniente è che invece di esserci "Mi piace" e "Condividi" ci sono "Like" e "Share"...non capisco perchè.....

    RispondiElimina
    Risposte
    1. Perché hai scelto la lingua inglese. Nello script devi mettere it_IT al posto di en_US. Può darsi che lo script tu lo abbia nel template. Cercalo con Ctrl+F in Modello -> Modifica HTML
      @#

      Elimina

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.