In molti mi chiedono come fare ad inserire il Like Button sul Tab FBML della Pagina Facebook.
Ufficialmente non si può: tentando di inserire il tag FBML fb:like non verrà visualizzato nulla. Tantomeno se provi ad inserire quello in versione IFRAME.
Per fortuna esiste un trucchetto che non tutti sanno…
1. Il segreto: i commenti
Girando su Facebook avrai notato che ci sono Pagine che effettivamente mostrano il Pulsante Mi Piace, come ad esempio Threadless oppure questo Tab che abbiamo realizzato per EMP.
Come fanno? Se noti, il Like Button compare sopra al widget dei commenti, inserito grazie al tag fb:comments.
Ecco quindi la soluzione per inserire solo il Like Button: inserisci i commenti, ma nascondi le parti che non ti servono, con i CSS.
Ecco il codice:
Così si inserisce il widget dei commenti, ridotto al minimo, con i commenti chiusi e senza il form. Vediamo i parametri da modificare:
xiddovrà essere una qualsiasi stringa che identifica questo set di commenti.returnurlsarà l’URL della Pagina Facebook o pagina web a cui volete associare il Like.
Lascia pure gli altri attributi così come sono. Ecco cosa visualizzerai:
2. Rifinisci con i CSS
Per nascondere le due righe sotto relative ai commenti, devi aggiungere questa regola di CSS:
.comment_body{display:none;}
</style>
Se vuoi nascondere anche le facce, usa invece:
.comment_body, .connect_widget_sample_connections{display:none;}
</style>
Ed ecco il risultato:
Esageriamo: vuoi visualizzare solamente il Pulsante? Ecco il codice CSS finale:
.comment_body, .connect_widget_sample_connections, .connect_confirmation_cell{display:none;}
</style>
Verrà mostrato solo il Like Button, senza scritte, numeri o altro. Cliccandovi sopra, scomparirà del tutto.
3. Si può fare?
Solitamente Facebook vieta di alterare i suoi widget con i CSS. Ad esempio, per il normale Like Button dice:
By using the Like Button, you agree to the general guidelines and terms found here. You also agree that you will not modify the Like Button in any way beyond the customization options provided on this page.
Nel caso del widget per i commenti, invece, Facebook permette espressamente di personalizzarli come si vuole, con i CSS:
You can style fb:comments arbitrarily by using overriding styles and embedding CSS (or using link tags) as described in CSS Tips and Tricks.
D’altra parte, la Pagina Facebook della Disney usa esattamente la medesima tecnica.
e x inserirlo sull fbml come si fa? D: a me serve quello!
Senti scusa ma come si fa nell’fbml a mettere quel coso che cliccando mi piace, condividi e premendo f5 esce o una scritta o una foto , rispondimi ti pregooooo
Sembra che Facebook li abbia bloccati:
“Sorry, this post contains a blocked URL
The content you’re trying to share includes a link that’s been blocked for being spammy or unsafe:
Body of an error/warning message. Title is: Sorry, this post contains a blocked URL
For more information, visit the Help Center. If you think you’re seeing this by mistake, please let us know.”
Come lo imposto io è giusto il codice? Perché non mi funziona?
.comment_body, .connect_widget_sample_connections, .connect_confirmation_cell{display:none;}
scusa ma sul fbml sul pulsante mi piace che devo mettere su xid?
Ciao, volevo chiedere un’informazione a voi professionisti ed esperti. é possibile in qualche modo inserire il like botton all’interno di una pagina sviluppata in flash as2?
Grazie della cortesia.
Bel sito, bravi!
Scusate per l’ignoranza qualcuno mi puoi dare tutto preparato da fare un copia e incolla nell’FMBL di questa pagina: https://www.facebook.com/Loveforthebeatles ???? grazie ciao…!!!!grazie ancora!!!
Scusate per l’ignoranza qualcuno mi puoi dare tutto preparato da fare un copia e incolla nell’FMBL di questa pagina: https://www.facebook.com/Loveforthebeatles ???? grazie ciao…!!!!
Ciao ho provato a mettere il bottone ma non si vede nulla, l’ho inserito sulla prima casella mentre su quella sotto ho messo quella che dovrebbe vedersi se l’utente fosse fan, e funziona, mentre il bottone like non si vede e anche se aggiugno lo style css non va nulla come ma ?? Ah e per caso sai come si mette il nome dell’utente e il bottone condividi ?? L’ho visto in alcune pagine
Grazie
Il tasto funziona..xò quando clikko su benvenuto mi compare la scritta:
Bad Parameter
there was an error understanding the request.. è normale?
Ho il tuo stesso problema, funziona tutto alla perfezione, ma mi da il Bad Parameter… ho fatto una ricerca su google ho trovato alcune cose ma non ci ho capito tanto, ho provato diversi codici che ho trovato e mi dava sempre lo stesso problema!
allo’ io metto <style ecc
bottone
ma nn va
nemmeno lo style=blabla nell’apertura (come si fa con le table) consigli?
Scusate la mia pagina ha circa 200 fan ma mi viene scritto che a 5000 e passa persone piace questo elemento. Come posso fare?
Capito.
Ciao! Ho aggiunto il codice a questa pagina, ma come vedi non mi funziona! http://www.facebook.com/pages/The-Jokers/159236708215?v=app_4949752878
Come mai?
Ciao, ho seguito il tutorial ma non riesco a far scomarire il campo commento in internet explorer. Potresti creare un esempio di css esterno e come lincarlo ? Grazie Marco
Ottimo tutorial! Anche inserendo più widget dei commenti il tempo di caricamento della pagina non aumenta di molto e si possono diminuire gli step al “mi piace” nel caso di più pagine collegate tematicamente tra loro. I risultati del tuo post a http://www.facebook.com/jobville grazie
Bellissimo! Davvero complimenti, direi che ne hai davvero fatto buon uso
Ciao Alessandra!!!
Davvero complimenti per il tuo tab (benvenuto e gli altri!!!)!
Ti chiedo una cosa: nel tab “Connettiti”, come sei riuscita a creare link diversi per i canali social a livello di codice??? Nella mia ignoranza io penso banalmente ad una mappatura di un’immagine, che però FBML non “capisce” e che quindi non funziona…sapete suggerirmi qualche trucchetto???
grazie!
http://www.image-maps.com/ con l’opzione css per Facebook
Grazie mille Alessandra!!!
mi sfugge un passaggio:
nella tab EMP fai “mi piace” di un url esterno, e fin li ok.
Sulla tab disney invece ti iscrivi alla pagina di cui c’è il like button (sono delle mini like box quelle)..secondo te si può fare o facebook ha permesso alla disney di fare un magheggio del genere?
La Disney usa esattamente il metodo che ho spiegato: associa i widget dei commenti alle Pagine Facebook e nasconde il form con i CSS.
In un recente aggiornamento, Facebook ha affermato che è permesso associare il Like Button non solo a pagine esterne, ma anche a Pagine Facebook:
Ecco una buona notizia! Grazie Ghido e complimenti per i tuoi articoli, sono sempre utilissimi!
Grazie Davide
Ciao Ghido, ottimo post. Volevo chiederti se per caso conosci la tecnica attraverso cui usare il pulsante like più volte all’interno della stessa pagina.
Come ad esempio fanno quei siti in cui nello stesso articolo sono presenti molte frasi per fare gli auguri di compleanno, e ad ogni frase è associato il like (oltre che il pulsante twitter).
Ciao, non c’è nessuna tecnica. Puoi inserire quanti Like Button desideri nella stessa pagina, a patto che assegni un’URL diversa ad ognuno, nel parametro href.
Grazie Ghido, il punto è che non ho idea di come assegnare un url diverso ad ogni punto del post che voglio far condividere, visto che si trovano tutti nella stessa pagina. Potresti farmi un esempio?
Per il normale Like Button per le pagine web, usi il normale codice IFRAME:
<iframe src="http://www.facebook.com/plugins/like.php?href=URL-DA-COLLEGARE&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
Basta che sostituisci [URL-DA-COLLEGARE] con l’URL della pagina che vuoi collegare al pulsante. Fai lo stesso con tutti gli altri pulsanti che vuoi inserire nella pagina.
Sto provando in questo modo: assegno ad ogni punto dell’articolo un ancora del tipo: . e dopo ogni medesimo punto inserisco il codice col relativo url seguito da#001.
Purtroppo però in questo caso dovrei inserire il codice di fab direttamente all’interno del post e wordpress non lo consente. Come potrei risolvere?
Per farti un esempio di quello che voglio fare vedi questo link http://tinyurl.com/2uk2gbs
Ti posto un esempio di quello che intendo
ciao a tutti, ho usato questa tecnica e funziona bene!!
vorrei aggiungere un’osservazione:
nel momento in cui si clicca il “mi piace” inserito nel Tab, quello esterno non scompare (come succederebbe cliccando su quello esterno) e anche il contatore dei fan non viene aggiornato. Per vedere l’aggiornamento bisogna ricaricare la pagina.
E’ possibile usare una funzione javascript per ricaricare la pagina, ad es dopo 1secondo dalla pressione del pulsante?
E se si, la richiamiamo? onclik sul pusante è possibile?
Verissimo quello che dici. Purtroppo, però, non è possibile usare javascript che ricarichino la pagina (vengono filtrati da Facebook), nè associare eventi al pulsante.
“semplici”… per te!! eheeh scherzo! ti rinnovo i complimenti e ti ringrazio per il “sapere” che metti a disposizone di tutti!
cioè… per esempio… nella Tab di EMP c’è uno sfondo nero e “sopra” immagini varie e vari link… sembrano vari livelli…
Si tratta solo di semplici div con sfondo, niente di particolare ^^
Grandissimo Ghido!! Come sempre! Lo stavo aspettando!!!
Ora serve solo da capire come inserire il like Button dentro un’immagine come fai tu!
Uhm.. cioè?
haahah facile usa lo style per muovere il bottone dove vuole… puoi farlo con qualunque cosa
-apri style-
#NOME DIV{
position:absolute;
left:SPAZIO DA SINISTRApx;
top:SPAZIO DA SOPRApx;
}
-chiudi style-
-apri div id=”NOME DIV”
QUELLO CHE TI PARE O IL BOTTONE MI PIACE
-chiudi div
Ma in che senso xid dovrà essere una qualsiasi stringa che identifica questo set di commenti ?
Mettici un testo a piacere. Ad esempio il nome della tua pagina.
mi dai il codice del bottone solo con qst link? http://www.facebook.com/pages/-El-cyeits-de-Flsaicieita-u-dsi-miiims-liik-/160037817368235?v=app_4949752878
Nell’ fbml dopo varie cose vorreiinserire il bottone mi piace da solo… mi puoi dare il codice completo che lo copio e lo incollo…. Grazie
Dai che ce la puoi fare anche da solo, è tutto spiegato qui sopra…
per qualche motivo non riesco a inserire il bottone…
è sufficinete inserire nell’app fbml i codici di cui sopra modificando i 2 parametri, giusto?
mi son perso qualche cosa?
grazie comunque del tip
Sì, basta inserire i due codici. Li hai inseriti nello Static FBML, vero?
si, nella pagina “Modifica FBML”… prima c’era un’immagine statica e un breve testo e le vedevo, invece il tasto no…
Ciao,
innanzitutto complimenti per tutto ciò che fai e per gli articoli, ti seguo sempre!!!
Ti chiedo una cosa veloce, e scusa per la base di ignoranza che è insita nella domanda: ma nella stesura di un codice FBML per un tab, come e dove inserisco la dichiarazione dello style ovvero del CSS?
Grazie mille di nuovo!!!
Lo puoi inserire subito dopo il normale codice HTML/FBML.
Beh inserendo lo style nel testo:
- style
blabla
- chiusura style
non verrà visualizzato da IE . Quindi per far funzionare il tutto, linkare un file css esterno o scrivere lo style inline:
- div style=”blabla”
bottone
- chiusura div
Mmmm, vero. Inline non si può fare comunque, perchè il codice viene generato da Facebook. Quindi la soluzione è quella di richiamare il CSS esterno.
Giusto! Non pensavo che il lke button è generato automaticamente da facebook.
scusate…
che intendete per “linkare un file css esterno”?? come si fa?
Così: