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

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

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. 



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

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

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



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