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>
<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
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.
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 /
RispondiEliminaCome mai?
È impossibile. Nel codice del post inserisci l'URL della tua pagina che sarà tipo
Eliminahttps://www.facebook.com/ideepercomputeredinternet
e vedrai che funzionerà. Se si vede il Profilo significa che hai messo l'URL del Profilo
@#
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
RispondiEliminaPuoi selezionare le versione per blog con sfondo scuro modificando questa parte del codice
Eliminadata-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"
@#
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?
EliminaIl 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@#
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?
EliminaCi 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@#
Ciao, grazie mille! Veramente utile.
EliminaVolevo sapere come posso allinearlo al centro senza modificarne l'aspetto.
Grazie ancora
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?
EliminaForse un bug
Elimina@#
@Art28
EliminaNon 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
@#
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!
EliminaGrazie mille!! Riuscito alla perfezione. Io continuavo a metterlo all'interno del codice.
Elimina...Anche a me da problemi con i doppi avatar...
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@#
Confermo! I posti del widget si stanno riempiendo e i doppi avatar sono spariti... per ora. Grazie Ernesto, i tuoi consigli sono sempre preziosi!!!!
RispondiEliminaMa è 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?
RispondiEliminaNon 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?
RispondiEliminaForse 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@#
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.
RispondiEliminaGrazie per l'aiuto.
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@#
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.
EliminaAnzi 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!
Finalmente!! Non so quante altre volte ci avevo provato da facebook! grazie mille
RispondiEliminaperchè a me si vede solo il nome della pagina e non l'immagine con sopra "mi piace" ??
RispondiEliminaSalve. 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?
RispondiEliminaIl Like Box è stato deprecato a vantaggio del Page Plugin
Eliminahttp://www.ideepercomputeredinternet.com/2015/04/page-plugin-facebook-blogger-wordpress-install.html
forse è quello
@#
Ho provato ad usare il metodo che mi hai consigliato... stesso problema... non compare in altri browsers
EliminaPotrebbe 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@#