Pubblicato il 22/08/13e aggiornato il

Come installare il Like Box di Facebook in Blogger e in Wordpress.

Come inserire il Like Box di una pagina fan (o ufficiale) di Facebook in un blog di Blogger o in un sito Wordpress senza bisogno di creare una applicazione dedicata o di applicare Open Graph e Metadati.
In realtà il titolo dell'articolo è un po' limitativo perché il codice che andrò a presentare potrà essere incollato in Modalità HTML in qualsiasi pagina web e mostrerà un riquadro con gli avatar dei sottoscrittori di una determinata pagina fan di Facebook.

Ho utilizzato lo script con cui Facebook ci permette di pubblicare i post pubblici in un qualsiasi sito che ho già impiegato anche per una versione semplificata del bottone Mi Piace con contatore da mettere in una sidebar del blog. Per avere una anteprima del nostro Fan Box si può accedere al Like Box Social Plugin e incollare l'URL della nostra pagina fan. Ricordo che per avere una pagina ufficiale di Facebook occorre avere un account come Profilo, accedere a Create Page e seguire il wizard di istruzioni. Si può personalizzare l'URL della pagina scegliendo un apposito VanityURL, inserendo quello prescelto nel campo presente nella pagina degli Username.


INSTALLARE IL LIKE BOX SU BLOGGER

Dopo che si conosce l'indirizzo della pagina fan si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito si incolla il seguente codice

<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-like-box" data-href="https://www.facebook.com/ideepercomputeredinternet" rel="publisher" data-width="292" data-height="360" data-show-faces="true" data-stream="false" data-header="false"></div>

Se si preferiscono le espressioni inglesi si sostituisce it_IT con en_US. I parametri in rosso vanno personalizzati specie per le dimensioni del riquadro (larghezza 292 pixel e altezza 360 pixel sono precise per 4 righe di avatar). Se si preferisce non mostrare le immagini di chi ha cliccato su Like si mette false al posto di true in data-show-faces. AnalogamentecCon data-stream="true" si visualizzano anche gli ultimi post della pagina mentre con data-header="true" pure la sua l'intestazione. Ovviamente va inserito anche l'URL della pagina fan al posto di quella collegata a questo blog



Si va su Salva e si posiziona con il cursore.

INSTALLARE IL LIKE BOX SU WORDPRESS

Il codice precedente può essere usato in qualsiasi pagina web. Se si possiede per esempio un sito con il CMS Wordpress si va su Aspetto > Widget > Testo e si trascina l'elemento in una sidebar o nel footer. Quindi si incolla lo stesso codice, si va su Salva quindi su Chiudi

like-box-wordpress

Il riquadro della pagina fan sarà visibile non appena si aprirà il blog. Concludo ricordando che con una procedura un po' più complessa è possibile installare il Like Box di Facebook anche nei blog di Blogger a Visualizzazione Dinamica o Dynamic Views.




28 commenti :

  1. Ho seguito la procedura ma non compare la mia pagina, bensì il mio profilo fb. Eppure mi sono assicurata di inserire il nome della pagine dopo lo /
    Come mai?

    RispondiElimina
    Risposte
    1. È impossibile. Nel codice del post inserisci l'URL della tua pagina che sarà tipo
      https://www.facebook.com/ideepercomputeredinternet
      e vedrai che funzionerà. Se si vede il Profilo significa che hai messo l'URL del Profilo
      @#

      Elimina
  2. Ciao Ernesto. E' possibile modificare i colori di questo widget? Avendo una sidebar grigia la scritta Plug-in sociale di Facebook non compare. Ed eventualmente far sì che la f di FB si veda per intero? A me risulta tagliata, ho provato a modificare l'altezza, ma ovviamente in questo modo si vedono più avatar di quelli che vorrei. Grazie

    RispondiElimina
    Risposte
    1. Puoi selezionare le versione per blog con sfondo scuro modificando questa parte del codice
      data-show-faces="true" data-stream="false"
      in questo modo
      data-show-faces="true" data-colorscheme='dark' data-stream="false"
      Per il resto prova a mettere
      data-height="370"
      al posto di data-height="360"
      @#

      Elimina
    2. Grazie mille, esattamente quello che cercavo di fare. Altra cosa: dove a te compare la scritta IDEE PER COMPUTER ED INTERNET piace a 3.037 persone a me, a me compare il nome del blog (minuscolo però) che non è seguito dal resto. Come mai minuscolo? Il fatto che il resto non si veda dipende dalla scritta originale grigia immagino, la posso modificare?

      Elimina
    3. Il maiuscolo dipende dal nome che hai dato all'atto della creazione della pagina (penso). L'aspetto del widget varia a seconda se si sia cliccato sul Mi Piace oppure no. Si può scegliere il layout light o quello dark ma non si può scegliere light per un elemento e dark per un altro
      @#

      Elimina
    4. Vero! Dipende proprio dal titolo della pagina, non ci avevo fatto caso! Per il resto, dunque, a questo punto meglio rinunciare alla scritta Plugin Sociale di Facebook piuttosto che non vedere il numero di persone cui piaci. Mi pare che la scelta sia obbligata. Grazie mille! Hai idea del perché le foto si vedono due volte? Che sia perché il widget è ancora praticamente vuoto? Questa non la capisco, non mi risulta si possa votare due volte, no?

      Elimina
    5. Ci sono dei doppi avatar? Mi sembra strano. Prova a cliccare su ciascuno di quelli doppi e forse andrai in due profili diversi. Stessa immagine non vuol dire stesso nome
      @#

      Elimina
    6. Ciao, grazie mille! Veramente utile.
      Volevo sapere come posso allinearlo al centro senza modificarne l'aspetto.
      Grazie ancora

      Elimina
    7. Ciao Ernesto, sono ancora qui. Esatto si vedono doppi avatar, me l'hanno anche segnalato. Nessun doppio profilo. Ci sono solo due persone che hanno messo il 'mi piace' (ho appena installato questo widget e il blog ha appena un mese!) e so chi sono. Possibile conflitto con altri widget?

      Elimina
    8. @Art28
      Non so se funzionerà. Prova a mettere questa riga
      <div align="center">
      all'inizio del codice e quest'altra riga
      </div>
      alla fine del codice del Like Box
      @#

      Elimina
    9. Ho modificato: data-show-faces="true" con data-show-faces="false", eliminando gli avatar. Molto meno bello, ma almeno non si vedono i doppioni. Magari con il tempo, quando si aggiungono altre immagini, cambia qualcosa. Boh! Grazie comunque!

      Elimina
    10. Grazie mille!! Riuscito alla perfezione. Io continuavo a metterlo all'interno del codice.
      ...Anche a me da problemi con i doppi avatar...

      Elimina
    11. Se anche tu hai doppi avatar vuol dire che è proprio un bug di Facebook che sparirà quando saranno riempiti tutti i posti del widget.
      @#

      Elimina
  3. Confermo! I posti del widget si stanno riempiendo e i doppi avatar sono spariti... per ora. Grazie Ernesto, i tuoi consigli sono sempre preziosi!!!!

    RispondiElimina
  4. Ma è una barzelletta! I doppioni sono ritornati e, non solo, a volte il riquadro si sposta tutto sulla destra dello schermo e diventa tutto bianco, vuoto insomma, senza motivi apparenti. Non ho fatto alcun cambio nel modello o nel layout. Mah ... Eventualmente un'alternativa?

    RispondiElimina
  5. Non capisco... ho seguito fedelmente la procedura per wordpress ma, invece della finestra cliccabile, mi appare il codice che ho incollato nel testo... Cosa ho sbagliato?

    RispondiElimina
    Risposte
    1. Forse nella nuova versione di Wordpress ci sono due opzioni, la prima per incollare il codice e la seconda per incollare il testo. In questo momento non ho la possibilità di controllare se è cambiato qualcosa rispetto a quando ho scritto il post
      @#

      Elimina
  6. Ciao, e scusami per il disturbo, ma non capisco perché il "Like Box" che ho inserito nel blog è visibile solo se ho fatto l'accesso a Facebook... Senza di esso, rimane uno spazio bianco. Ho anche provato ad utilizzare tutti i codici forniti da "developers facebook" inserendo, ovviamente, il link della pagina che gestisco.
    Grazie per l'aiuto.

    RispondiElimina
    Risposte
    1. Se il widget si vede da loggato si dovrebbe vedere anche senza aver effettuato l'accesso. Molto spesso il fatto che la pagina con carichi il Like Bok o il bottone Mi Piace è solo un fatto di browser e di cache. Prova a aprire il tuo sito invece che senza accesso a FB in una pagina in Incognito. In ogni caso per dare il Mi Piace i lettori devono essere loggati
      @#

      Elimina
    2. Ti ringrazio! Hai ragione, se il widget si vede da loggato, dovrebbe... ma continua a non essere visibile. Considera che ho provato sia con Chrome che IE ed in entrambi i casi non è cambiato nulla. Ho provato a dividere le due parti, inserendo il div id='fb-root'/ ..... nel "modello" dopo il tag body e l'altra parte div class="fb-like-box" data- ..... nel Widget. Ma niente.
      Anzi nel modello, dopo aver salvato il div id="fb-root".... ho notato che modifica perfino la parte finale e quindi rende inutile il tentativo. Grazie!

      Elimina
  7. Finalmente!! Non so quante altre volte ci avevo provato da facebook! grazie mille

    RispondiElimina
  8. perchè a me si vede solo il nome della pagina e non l'immagine con sopra "mi piace" ??

    RispondiElimina
  9. Salve. Il mio browser è Chrome ed ho notato, con mio grande dispiacere, che il mio fb-like-box (inserito sul mio blogger) non compare sui browser opera, mozilla e Microsoft Hedge. Ho dimenticato qualcosa?

    RispondiElimina
    Risposte
    1. Il Like Box è stato deprecato a vantaggio del Page Plugin
      http://www.ideepercomputeredinternet.com/2015/04/page-plugin-facebook-blogger-wordpress-install.html
      forse è quello
      @#

      Elimina
    2. Ho provato ad usare il metodo che mi hai consigliato... stesso problema... non compare in altri browsers

      Elimina
    3. Potrebbe essere il tuo modello, potresti non avere gli altri browser aggiornati, ci potrebbe essere una incompatibilità tra Facebook e un altro widget che si manifesta solo con certi browser,.. non saprei cosa consigliarti di preciso mi spiace
      @#

      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.