Come promesso, oggi ti svelerò un trucchetto per Facebook che non molti conoscono. Imparerai così a creare un contenuto che sia disponibile solo a quegli utenti che diventano fan della tua Pagina.
Abbiamo visto vari esempi di pagine che usano questa tecnica per invogliare gli utenti a diventare fan, offrendo loro bonus e coupon. Lo stesso espediente che ho usato nella pagina: Scopri come invitare tutti i tuoi amici su una Pagina Fan in un colpo solo!.
Vediamo allora come fare.
1. Come si fa?
Il segreto è l’utilizzo del tag <fb:visible-to-connection>. Tutto ciò che comparirà all’interno di questo tag sarà visibile solamente ai fan, mentre gli utenti non fan semplicemente non lo vedranno.
Studiando la documentazione, vediamo che tale tag va inserito all’interno di <fb:fbml version="1.1">. Ecco come risulterà:
<fb:visible-to-connection>Questo testo è visibile solo da chi è fan</fb:visible-to-connection>
</fb:fbml>
2. Dove va inserito?
Se ti stai chiedendo, giustamente, dove diamine vada inserito questo codice, la risposta è molto semplice: va inserito nel Landing Tab che avrai creato seguendo questa guida.
Puoi prendere ispirazione studiandoti gli esempi che ho raccolto: con testi ed immagini mostri il tuo logo, la call to action e l’offerta. Poi, con questo codice, sveli il coupon o il regalo che offri.
3. If… then… else… ?
Ora può sorgere un problema: e se volessi creare una struttura simile a questa?
SE l’utente è fan
ALLORA mostra il coupon
ALTRIMENTI mostra la scritta “Diventa fan”.
Il fatto è che con quel tag possiamo solo definire il contenuto da mostrare ai fan, ma non esiste il modo di definire il contenuto alternativo per chi non lo è.
La soluzione è usare i CSS. Prova a riguardare questa Pagina: quando l’utente non è fan, vede l’immagine del form per invitare gli amici; quando diventa fan, ecco che invece gli compare il testo segreto.
Questo è il codice che ho usato:
<fb:fbml version="1.1">
<fb:visible-to-connection>
<div style="width:520px; height:500px; background:#fff;position:absolute;">
Contenuto riservato ai fan
</div>
</fb:visible-to-connection>
</fb:fbml>
</div>
E’ presto detto: ho un div con la mia immagine di sfondo, visibile solo agli utenti non fan. Quando l’utente diventa fan, il div più interno compare. Visto che ha lo sfondo bianco, nonchè le stesse dimensioni del div contenitore, andrà a nascondere l’immagine sotto.
Semplice, no?
Se qualcosa non è chiaro o hai dubbi, lascia pure un commento!
ATTENZIONE!
Alcuni hanno commentato “Ho fatto come hai detto, ma non funziona”. Occhio!
Tieni presente che se sei amministratore della pagina, vedi lo stesso i contenuti riservati, anche se non sei fan! Devi accedere con un altro account per apprezzare la cosa o chiedere ad un amico.
Salve Ghido, io avrei una domanda. Spero risponderai presto.
Nell’ FBML della mia pagina io ho inserito alcuni ‘like button’ riferiti ad altre pagine.
Vorrei che solo dopo che un utente mette mi piace alla pagina e a tutti i ‘like button’ comparisse il contenuto che voglio riservare. Come posso fare?
per far si che tutta la pagina venga vista dopo aver premuto mi piace come si fa?a me interesserebbe far arrivare le persone su un immagine e non far visualizzare la bacheca le foto ecc ecc
Ragazzi ma se uno non è fan, i contenuti li vede ugualmente… Non c’e’ un modo per far vedere realmente il contenuto solo ai fan? (esempio foto video, ecc)?
Ciao Euro Risparmi, anche la mia domanda è più o meno simile, ma sembra che il markup di facebook non supporti gli elementi tipo script
Ciao Ghido,
e se volessi realizzare una cosa del genere pero’ del contenuto (ad esempio immagini o video) presenti sul mio blog? E’ possibile?
vabbè script questo è il tag
ops… non si legge bene il mio messaggio di prima quando dico
‘cioè non funzionano per
Vorrei inserire tali tag nei post di wordpress, ma l’editor di testo li mantiene ok, ma quando salvo la pagina li mette all’inizio e ovviamente né invalida la funzione!
Ovviamente questi tag non funzionano se utilizzo un script per leggere rss.
Cioè non funzionano per
giusto?
Ciao…
E se invece volessi far scaricare qualcosa solo ai fan, tramite un link megaupload?
Ho seguito tutto alla lettera e funziona, ma vorrei sapere se c’è un modo per oscurare anche la Bacheca della Pagina a chi non è Fan. Grazie in anticipo
c’è un tutorial grande quanto una casa,sulla home :Q__
Ciao!
ora con gli iframe come si fa? il visible to connection non funziona pù
Ciao, guida interessante e molto facile da comprendere, complimenti.
Ho solo una domanda da porti, se volessi fare in modo di “sovrapporre” un’immagine (png trasparente) al contenuto effettivo?
Vedo che è tutto condiviso nello stesso codice e il contenuto “only fan” è visibility:hidden… in realtà io vorrei che si vedesse in sottoesposizione esattamente come fa la redbull: http://www.facebook.com/pages/Cavallo-Alboreto/189905537718325?sk=app_190322544333196#!/redbull
è solo questione di css e z-index o devo fare qualche accorgimento particolare?
Grazie mille
Ho creato la pagina come nell’esempio, il problema è che con le nuove pagine fan quando un utente fa clic su “Mi Piace” viene mandato in bacheca anche se la pagina di benvenuto era l’applicazione FBML, c’è un modo per risolvere tale problema?
grazie
Ho un problema, creando un’applicazione FMBL non riesco ad impostarla come pagina di intro, mi spiego non ho la possibilità di impostare “FMBL” come pagina iniziale come mai?
allora, prima di tutto complimenti per la pagina e questi fantastici tutorial =P
primo problema: essendo abbastanza esperto con html e css, ho voluto fare un landing tab abbastanza sofisticato, con div ” testa corpo e piedi” con le rispettive immagini..è venuto tutto abbastanza bene, però mi è venuta l’idea di renderlo visibile solo ai fan. volevo fare qualcosa del genere:
testo
testo cambiato
praticamente volevo lasciare lo stesso layout ma con scritte diverse! ma non mi è riuscito
la prima sezione mi rimane sempre davanti. ho guardato tutto, position absolute ecc.. come fare? ( non so se mi sono spiegato D: )
secondo: mi è piaciuto molto il puntatore del mouse della pagina EMP. quello che passando sopra un link diventa una mano “rocker”. come si fa?
grazie di tutto.
fra testo e testo cambiato c’erano i div ma non li ha scritti. LOL
Salve a tutti,
intanto complimenti per il sito molto ben fatto ed utile.
Vorrei capire bene come fare per inserire un immagine visibile ai NON fan e poi, una volta che questi cliccano su MI PIACE, sostituirla automaticamente con un altra…praticamente il passaggio IF , THEN, ELSE
Ecco la Landing Page alla Pagina
http://www.facebook.com/pages/Snow-Blade/12663795110
Descritta nel precedente commento.
Ciao,
grazie all’aiuto di questo post e di altri content prodotti da BigThink ho realizzato la Landing Page di questa pagina di Facebook.
Dove, in occasione di un evento che si terrà il 4 Dicembre, presenta, contenuti riservati solo ai fan, un box Live Streaming che x il momento è in count down ed inizierà a mostrare l’evento il 4 dicembre, in più l’aggiunta di un Coupon Code per l’acquisto di prodotti di Natale (anche qui in scadenza dal 1-14 dicembre 2010).
Non è venuta male, solo che tutto funziona TRANNE che con INTERNET EXPLORER. IN particolare proprio le instruzioni di visibilità dei contenuti riservati ai fan, su IE non funzionano PARE.
nel div all’interno devi inserire un position: absolute, così funziona anche per IE. Nel mio sito trovi una variante con contenuto cliccabile per i fan
Veramente non ho capito a quale DIV ti riferisci. Questo perchè all’interno c’è già un div con position absolute e funziona benissimo su tutti i browser tranne IE!
Quello che non funziona su IE è proprio il visibility di facebook… nel senso che tutto quello che è all’interno dei blocchi … non viene mostrato. O perlomeno così PARE.
Non funziona + questo metodo…. non capisco xkè.
Qualcuno può verificare cosa è cambiato ed indicare l’eventuale nuova procedura?
Come è possibile fare questa cosa per la WALL.
Intendo come come fare a rendere la tab WALL visibile solo ai fans che hanno premuto LIKE?
Innanzitutto complimenti per il sito e per il suggerimento. Però mi si presenta un problema: ho creato due immagini di eguali dimensioni, una per i non fan e una per i fan. Ovviamente vorrei fare in modo che i non fan visualizzino quella destinata a loro e se cliccano su “mi piace” l’immagine per i fan dovrebbe comparire al posto di quella per i non fan…
Un po’ ingarbugliato forse, ma credo di essermi spiegato.
Le dimensioni delle immagini in questione sono di 520×270.
Il problema è che se non sono fan non visualizzo nulla e solo dopo aver cliccato su “mi piace” visualizzo l’immagine destinata ai fan…
Please help!!! Grazie anticipatamente.
Steven
p.s.
questa la pagina in questione: http://www.facebook.com/tizianosclavi
Confermo pe IE8 la necessità di aggiungere il ‘position: absolute’.
Tanto vale Ghido che aggiorni l’esempio nel blog.
Allego una piccola variante al tuo codice:
<div style=”width:500px; height:120px; background:url(diventa_fan.jpg);”>
<fb:fbml version=”1.1″>
<fb:visible-to-connection>
<div style=”width:500px; height:120px; background:url(sei_fan.jpg); position: absolute”> </div>
</fb:visible-to-connection>
</fb:fbml>
</div>
Aggiornato, grazie
Ciao, volevo sapere se era possibile fare lo stesso lavoro su un sito personale. Cioè è possibile far apparire un pulsante o una serie di pulsanti (inizialmente invisibili) che compaiono dopo aver cliccato sul mi piace che io ho messo sul mio sito?
salve a tutti
la guida è un buon aiuto per chi vuole personalizzare la propria pagina, ma non ci riesco proprio
If… then… else…
inserisco l’esempio che hai lasciato ma quello che mi appare è solo la scritta ‘Contenuto riservato ai fan’ anche se accedo con un account che non è ne amministratore ne fan della pagina.
help please!
Ciao Ghido, ho provato ad usare gli stessi codici..ma non funziona!
Funziona funziona..! Tieni presente che se sei amministratore della pagina, vedi lo stesso i contenuti riservati, anche se non sei fan!
Devi accedere con un altro account per apprezzare la cosa o chiedere ad un amico
Ciao, vorrei avere un informazione.
Vorrei che solo chi diventa fan possa visualizzare le foto e i contenuti della pagina fan, è possibile?
Grazie
Purtroppo no. Per quello devi creare un gruppo “segreto”.
Ghido ti seguo da ormai moltissimo ed un commento ad i tuoi articoli lo scrivo sempre, vorrei chiederti una cosa abbastanza urgente dato che non ne vengo a capo, ho creato la mia pagina gruppo, adesso vorrei mettergli tutti i vari metodi elencati quà e la nei tuoi post e sono:
1 – Il tab personale (Fatto tramite fbml static) Fatto
2 – L’atteraggio per i nuovi utenti con il tab (messo per primo) Fatto
3 – Il pulsante per invitare tutti gli amici (non riesco ad inserire il codice) i due script sopra non funzionano assolutamente, potresti fornirmi quello giusto da inserire?
4 – Per la soluzione (anche qui non riesco con il codice) potresti fornirmi quello giusto?
5 – infine vorrei mostrare un riquadro con i commenti scritti come ultimamente appare in molti gruppi di indovinelli, sai qualcosa in merito?
Grazie per le risposte e la pazienza!
Ciao Merci. I codici a cui ti riferisci non funzionano più, Facebook li ha filtrati.
Per la soluzione devi inserirla nel tag <fb:visible-to-connection> come spiegato in questo stesso articolo.
Per mostrare il riquadro dei commenti, usa questo tag: http://wiki.developers.facebook.com/index.php/Fb:comments
Ciao!
Ops… scusate, provo a encodare l’HTML. Ecco il codice.
<div style="width:755px; height:588px;">
Contenuto per i non fan
</div>
<fb:fbml version="1.1">
<fb:visible-to-connection>
<div style="top:0px; left:0px; width:755px; height:588px; position:absolute">
Contenuto riservato ai fan
</div>
</fb:visible-to-connection>
</fb:fbml>
E così si risolve anche per IE8? Good, grazie per la condivisione
Dovere. Il tuo post mi ha ispirato e risolto un problema, io l’ho solo perfezionato.
Questo escamotage di GAMoN a me comporta che una volta diventato fans vedo entrambi i contenuti sovrapposti. Questo sia su Firefox, che Chrome che Opera per mac.
Come spesso mi accade trovo la soluzione da solo non appena posto una domanda di aiuto
Ho aggiunto un background-color:#FFF” nel secondo div
ciao Pepe..puoi darmi la riga del secondo div? ho inserito il background come dici tu ma li visualizzo ugualmente sia il contenuto dei fan che l’altro
io ho messo così
Contenuto per i non fan
Contenuto riservato ai fan
e mi funziona. Ora sto aggiornando un IE7 a IE8 su un windows muletto per vedere come si comporta
ti chiedevo di scrivere qui la riga che hai aggiornato tu inserendo il background..
cioè, questo è il secondo div, giusto?
ok, dove inserisco e come devo scrivere background-color:#FFF” ?
scusa ma non son tanto pratico di html e fbml. grazie in anticipo
scusami, avevo incollato il codice ma il blog lo ha eliminato
semplicemente al codice di Gamon dopo position:absolute aggiungi
; background-color:#FFF
grazie Peppe..rigra aggiornata e funzionante =)
Confermo che su IE 8 non funziona.
Una rapida soluzione consiste nell’usare due DIV, come nell’esempio qui sotto.
Contenuto per i non fan
Contenuto riservato ai fan
ciao. ho visto la tua pagina http://www.facebook.com/invitatutti
cliccando sull’immagine divento fan automaticamente. come hai fatto? generalmente per diventare fan della pagina bisogna cliccare sul pulsantino in alto con la bandierina scritto DIVENTA FAN.
grazie
Eh, purtroppo Facebook ha disabilitato questa cosa e non funziona più
Salve a tutti, voglio segnalare che il codice attualmente non funziona su ie8 mentre su firefox si, come si puo’ trovare una soluzione?
grazie!!!!
io non ho capito dove va inserrito
ho creato la pagina http://bit.ly/994u38
ma nn so dove inserirlo…
Risolto
)))
Non male come risultato
Ciao antonio qual’è il problema che riscontri nello specifico?
Guarda a me funziona tutto correttamente, anche perchè non è difficile implementare questa soluzione e l’articolo scritto da ghido è abbastanza chiaro secondo me.
Ad ogni modo, prova a darci qualche informazione in più…
ho fatto mille prove ma non ci riesco mi date una mano?!! please
Davvero un’ottimo articolo, l’ho provato sulla pgina fan di un mio blog sui videogiochi di avventura e funziona ottimamente (http://tinyurl.com/ygxhsp2)
Figo, hai fatto un ottimo lavoro
Thank You, ho colto la palla al balzo, visto che avevo già pronti da tempo questi ebook in formato pdf, ma non sapevo come utilizzarli
io ho provato ma non va
quindi dovrei mettere solo nel FBML della pagina questo cosi?
Questo testo è visibile solo da chi è fan
Contenuto riservato ai fan
Complimenti! Messo nei preferiti , lo leggerò bene quantoprima.
E il materiale riservato ai soci, dunque il contenuto privato per i fans in questo caso, si carica nel host del nostro sito o su Facebook sempre? E se si, in che parte di Facebook? Su fb:fbml version=”1.1?
Il contenuto riservato va inserito nel tab della tua pagina (grazie all’applicazione Static FBML), all’interno del tag.
Chiaro che se è testo non c’è problema, se invece si tratta di immagini dovrai hostarle sul tuo spazio web.
Grazie
Scusa non ho capito una cosa 1) il contenuto riservat va inserito nel tab di static FBML tu dici “all’interno del tag”, ma di quale tag parli?
Inoltre vorrei sapere se il contenuto essendo inserito nel tab di static fbml sara’ pubblicato nella scheda FBML oppure proprio sulla pagina di arrivo?
Inoltre vorrei sapere un altra cosa, il contenuto della pagina che vorrei fosse riservato sono soprattutto dei link a pagine esterne, quindi cosa devo fare per inserirlo? Lo metto al posto della scritta “contenuto riservato ai fan?”
E poi un altra domanda: il link della pagina esterna ha un suo codice html per essere identificato? A destra del link postato sulla pagina c’è la rotellina di impostazioni e c’è scritto “copia link”, posso usare quello?
Potresti rispondermi qui di seguito o direttamente su fb per favore?
Grazie infinite.
Grazie mille! Proprio l’articolo che aspettavo!!
In realtà era più semplice di ciò che pensavo: un DIV!!!
Ottimo risultato (http://bit.ly/a71wh0).
Ciao!
yeah