3nastri, realizzazione sitiweb, grafica a Roma.

Creare blog aziendale, locandine, carta intestata, biglietti da visita personalizzati.

Come creare una landing page per Facebook

3nastri, realizzazione sitiweb, grafica a Roma.

Creare blog aziendale, locandine, carta intestata, biglietti da visita personalizzati.

Home » Come creare una landing page per Facebook

Come creare una landing page per Facebook

 

 

Come saprete tutti FBML statico non è più in funzione e presto verrà rimosso.
Oggi però attraverso la pagina di sviluppatori per FB è possibile creare un’applicazione che ci viene in contro.

Partiamo dall’immagine.
I limiti di larghezza per la landigpage è di 520, ma vi sconsiglio vivamente di creare un’immagine così grande. Perché il risultato finale sulla vostra pagina di FB potrebbe essere questo:

 

 

 

Immagino che nessuno di voi voglia quelle fastidiose barre di scorrimento. Quindi il consiglio è create un’immagine con dimensione massime di 507 x 727.

Ovviamente la vostra immagine sarà simile al vostro sito web. Così come la mia.

Se vedete sulla mia pagina FB ci sono differenti link in corrispondenza con icone e scritte. Per fare questo utilizzate questo il sito Image-maps.

Utilizzare questo sito è molto semplice.
Caricate la vostra immagine sul vostro spazio web o su un host. È necessario caricare l’immagine da un’altra parte perché se usate l’opzione “From your pc” dopo qualche giorno non sarà più visibile.
Io l’ho caricata sul mio spazio a questo indirizzo. Ora cliccate su Start mapping your image.

 

 

Fate attenzione che la vostra immagine sia stata ben caricata e che durante l’attesa dei 9 secondi riusciate a visualizzarla in basso.

 

 

Ora cliccate su continue to next step. Adesso non dovete fare altro che utilizzare l’opzione RETANGLE per creare le aree che saranno cliccabili e che conterranno i link. Il rettangolo lo vedete nell’esempio sotto la parola marketing. Una volta che avete selezionato tutte le aree ed inserito link e nome sotto ogni casella spuntate l’opzione “USE CSS For Facebook (check here)” e poi andate su GET YOUR CODE.

 

 

A questo punto vi comparirà una schermata nuova. Voi andrete a scegliere HTML CODE. Il codice sarà una cosa di questo tipo:

 

 

[learn_more caption=”Leggi il codice”]

<div style=”text-align:center; width:507px; margin-left:auto; margin-right:auto;”>

<img id=”Image-Maps_6201104161440138″ src=”http://graphicinmind.altervista.org/trenastri/paginaFB.jpg” usemap=”#Image-Maps_6201104161440138″ border=”0″ width=”507″ height=”727″ alt=”” />

<map id=”_Image-Maps_6201104161440138″ name=”Image-Maps_6201104161440138″>

<area shape=”rect” coords=”103,52,379,137″ href=”http://www.3nastri.it//”  TARGET=”_blank alt=”Home” title=”Home”    />

<area shape=”rect” coords=”12,251,84,284″ href=”http://www.3nastri.it//servizi/grafica/”  TARGET=”_blank  alt=”Grafica” title=”Grafica”     />

<area shape=”rect” coords=”97,250,194,283″ href=”http://www.3nastri.it//servizi/marketing/”  TARGET=”_blank alt=”Marketing” title=”Marketing”   />

<area shape=”rect” coords=”205,251,363,284″ href=”http://www.3nastri.it//consulenza/corporate-identity/”  TARGET=”_blank alt=”Corporate image” title=”Corporate image”     />

<area shape=”rect” coords=”373,251,499,284″ href=”http://www.3nastri.it//servizi/web-solution/”  TARGET=”_blank alt=”Web solution” title=”Web solution”     />

<area shape=”rect” coords=”274,340,462,423″ href=”http://www.3nastri.it//category/portfolio/”  TARGET=”_blank alt=”Portfolio” title=”Portfolio”     />

<area shape=”rect” coords=”178,505,410,588″ href=”http://www.3nastri.it//about-us/”  TARGET=”_blank alt=”About us” title=”About us”     />

<area shape=”rect” coords=”54,393,191,476″ href=”http://www.3nastri.it//category/le-novita/”  TARGET=”_blank alt=”News” title=”News”     />

<area shape=”rect” coords=”313,644,373,700″ href=”http://www.facebook.com/3nastri?sk=wall” alt=”Bacheca FB” title=”Bacheca FB”    />

<area shape=”rect” coords=”373,644,432,700″ href=”http://www.flickr.com/photos/graficainmente/sets/72157625745317550/show/”  TARGET=”_blank alt=”Slideshow” title=”Slideshow”    />

<area shape=”rect” coords=”431,644,490,700″ href=”http://www.3nastri.it//?feed=atom”  TARGET=”_blank alt=”RSS” title=”RSS”    />

<area shape=”rect” coords=”505,725,507,727″ href=”http://www.image-maps.com/index.php?aff=mapped_users_6201104161440138″  TARGET=”_blank alt=”Image Map” title=”Image Map”  />

</map>

<!– Image map text links – Start – If you do not wish to have text links under your image map, you can move or delete this DIV –>

<div style=”text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:507px;”>

<a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//”  TARGET=”_blank title=”Home”>Home</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//servizi/grafica/”  TARGET=”_blank title=”Grafica”>Grafica</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//servizi/marketing/” TARGET=”_blank title=”Marketing”>Marketing</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//consulenza/corporate-identity/”  TARGET=”_blank title=”Corporate image”>Corporate image</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//servizi/web-solution/”  TARGET=”_blank title=”Web solution”>Web solution</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//category/portfolio/”  TARGET=”_blank title=”Portfolio”>Portfolio</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//about-us/”   TARGET=”_blank title=”About us”>About us</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//category/le-novita/”  TARGET=”_blank title=”News”>News</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.facebook.com/3nastri?sk=wall” title=”Bacheca FB”>Bacheca FB</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.flickr.com/photos/graficainmente/sets/72157625745317550/show/”  TARGET=”_blank title=”Slideshow”>Slideshow</a>

|          <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.3nastri.it//?feed=atom”  TARGET=”_blank title=”RSS”>RSS</a>

</div>

<!– Image map text links – End – –>

</div>

[/learn_more]

 

 

Andiamo a vedere il codice. Per prima cosa dovete aggiungere le tag <html> e <body> all’inizio e </body> e </html> alla fine. Altrimenti FB non leggerà il codice.

Poi potete dare uno sguardo al codice per rendervi conto che la prima parte regola i link che avete inserito sull’immagine, che non sono altro che piccoli box trasparenti. La seconda metà del codice è dedicata al footer, cioè al piè di pagina della vostra immagine che riporterà tutti i link separati da uno spazio |.

Copiate ed incollate il codice in un file di testo e poi rinominatelo cambiando l’estensione.

Ovvero, create un file.txt che diventerà poi index.html. È fondamentale rinominare il file.

Ora caricate questo file html sul vostro spazio web o su qualche host gratuito.

 

 

Ora passiamo alla fase Facebook.

Andate nella pagina degli sviluppatori che è qui. Ora cliccate su SET UP NEW APP.

 

Scegliete il nome della vostra applicazione, accettate le condizioni e continuate.

 

 

 

Inserite il codice di sicurezza e continuate.

 

Ora selezionate le cose in base alle vostre preferenze. Nome. descrizione. Cambiate il logo se volete. Scegliete la lingua. Selezionate la vostra mail.

Poi andate su Web site.

 

 

Inserite l’URL dove avete caricato il vostro file index.html. Mi raccomando non scrivete nel link anche il nome del file (index.html), ma solo la cartella di destinazione.

Ora andate su Facebook integration.

 

 

Compilate i campi così come ho fatto io. Canvas page che sarà il nome che darete alla pagina. Canvas URL che è la stessa che avete inserito su web site. Spuntate Iframe e Auto-resize (anche se nell’immagine non è spuntato). Anche su Page tabs selezionate iframe, inserite il nome del TAB e su Scheda URL inserite solo il nome della vostra paginetta index.html. Automaticamente FB genererà il link alla pagine (così come vedete nell’immagine).

Salvate le modifiche e il gioco è quasi fatto.

Ora cliccate su Application profile page.

 

 

Ora sulla nuova pagina selezionate in basso a sinistra “aggiungi alla mia pagina”.

Ora andate sulla vostra pagina Facebook e vi troverete a sinistra la vostra nuova applicazione che potrete utilizzare come landing page.

Questo articolo è in parte la traduzione e la semplificazione di questo, che a tratti, per me è stato poco chiarificante. Se avete problemi lasciate un commento cercherò di aiutarvi. [/box]

 

 

Qualcuno si chiedeva come aprire le pagine della nostra landig page fuori da FB.
Nulla di più facile. Basta aggiongere la tag TARGET=”_blank dopo ogni url.
Vi lascio un esempio sotto:

<area shape=”rect” coords=”103,52,379,137″ href=”http://www.3nastri.it//”  TARGET=”_blank alt=”Home” title=”Home” />

Occhio che la storia va ripetuta anche per i link che stanno nella parte del footer.

 

 

La voce per impostare la pagina predefinita da visualizzare per chi arriva sulla vostra pagina Facebook si trova nella sezione “Gestisci autorizzazioni” e si chiama “Default Landing Tab”

 

  • bel post
    attenzione al titolo ‘landing’ e non ‘ladig’ 😉

  • Sergio Trenna

    Grazie per il commento e per il refuso 🙂

  • Gabryts

    Ciao,ottima guida. L’unico problema è che mi sono iscritto su FB nella pagina degli sviluppatori e sono sempre in attesa,ormai da mesi,del codice via sms…Avete avuto anche voi questo problema? C’è un modo per risolverlo? Grazie

  • Gabryts

    Ciao,ottima guida.
    L’unico problema è che mi sono iscritto su FB nella pagina degli sviluppatori e sono sempre in attesa,ormai da mesi,del codice via sms…Avete avuto anche voi questo problema? C’è un modo per risolverlo? Grazie

  • Gabryts

    Ciao,ottima guida.
    L’unico problema è che mi sono iscritto su FB nella pagina degli sviluppatori e sono sempre in attesa,ormai da mesi,del codice via sms…
    Avete avuto anche voi questo problema? C’è un modo per risolverlo?
    Grazie

  • Sergio Trenna

    Grazie!
    Quel messaggio probabilmente non arriverà mai.
    Io mi sono iscritto direttamente.
    Cerca su google “sms facebook vodafone”. Ovviamente se hai tim o wind cambi il nome sulla ricerca.
    Trovi le istruzioni in ogni pagina.

    In breve dovrai mandare un sms (a tue spese) ad un certo numero, con scritto FB (mi sembra). Dopo ti arriverà il benedetto codice di conferma.

    Così facendo però attiverai le notifiche via cell, il che significa che ogni volta che riceverai un messaggio privato o richiesta di amicizia ti arriverà un sms. Il servizio è gratuito (per lo meno con vodafone lo è ma credo sia uguale per tutti). Se però non ivii nessun messaggio da cell su FB (per rispondere o per fare un post) dopo 2 mesi si disattiva (previa notifica). Insomma sta cosetta costa 1 sms ogni 2 mesi. Per noi è poco, per le compagnie un ottimo introito.

    Spero di esserti stato utile. Famme sapere se ti funziona. Ciao

  • Lorenzo

    ciao complimenti per l’articolo ..non capisco se è un mio problema ma non vedo le immagini dell’articolo che mi farebbe capire ancora meglio

    grazie

    ciao

  • 3Nastri

    Grazie!
    Ora dovrebbe essere ok con le immagini!

  • Ottima guida!
    Peccato che il sito http://www.image-maps.com/ oggi non si carica!!!

    Hai forse qualche altro sito da suggerire? più che altro per il codice, per mapparla riesco con PS.
    Grazie mille e complimenti
    Piero

    • ora funziona ma quando si clicca “get your code” esce una pagina BIANCA!
      mah

  • trovato l’inghippo:

    se si “chekka” USE CSS For Facebook (check here) ne risulta una pagina bianca, diversamente viene correttamente visualizzata la pagina ma il codice non funzia su FB

  • 3Nastri

    Grazie Piero!

    Veniamo al tuo problema: molto strano perchè sono appena andato a provarlo e funziona.
    Probabilmente hai commesso qualche errore durante la procedura di caricamento dell’immagine.

    Ricordati che l’immagine deve essere hostata da qualche parte.
    Poi riguarda il 3° blocco del post dove dice “Fate attenzione che la vostra immagine sia stata ben caricata e che durante l’attesa dei 9 secondi riusciate a visualizzarla in basso.”

    Oppure potrebbe essere un errore del tuo browser di navigazione.
    Poi provare a fare la stessa procedura magari usando un altro browser (mozzilla, safari ecc..)oppure cancella tutta la cronologia, cokies e moduli. Svuota tutti i temporanei e rifai da capo.

    Ti consiglio, prima di metterti a ricreare tutti i “rectangle” su image-map.com di farne solo uno per verificare che funzioni.

    Fammi sapere se risolvi.

    Ti lascio un link con altri siti per fare questo lavoretto, ma non li ho provati quindi non si dirti quale sia il miglio. Ciao

    http://www.similarsitesearch.com/alternative/image-maps.com

    • Ri-eccomi. Allora il problema persiste non so bene a cosa sia dovuto. Ora sto utilizzando un altro pc e il problema +è lo stesso. Se chekko il codice per FB mi viene visualizzata una pagona BLANK, senza nulla.
      Forse potresti dirmi dove sta la differenza tra un codice normale ed uno per FB? Nei campi CANVAS va indicata una pagnia html o php? a me non lo riconosce, solo errore, vedi facebook/etnostore
      boh
      sono perso

  • 3Nastri

    Per curiosità mi fai sapere che bowser usi?

    In ogni caso puoi pure non spuntare la casella css perchè è utile solo a chi utilizza la parte di codice css, a te che prendi quella in html non serve.
    Il codice che andrai a prelevare (html) è identico sia che spunti o no la casella.

    Nai campi Canvas va specificata la cartella in cui hai fatto l’upload del file index.html. Quindi come da esempio:
    http://www.tuosito.it/cartella/

    ricordati di mettere la “/” finale. Se non la metti FB non troverà il file. Stesso vale per Site url su Core settings.

    Solo nella parte del page tabs va specificato tutto il percorso in “scheda url”:
    http://www.tuosito.it/cartella/index.html

    Spero di esserti stato di aiuto.
    Occhi a quando compili l’applicazione FB perchè è molto rognosa.
    Ciao

    • RISOLTO!

      Incredibile ma navigando un pò quà e un pò là ho risolto l’arcano.

      Dovevo cambiare l’estensione del file da HTML a ASP, perchè? semplicemente perchè FB fa un “POST” sul file html che alcuni webserver non accettano, il mio p.e. mentre con asp o php no problems.
      ora funzia.
      http://www.facebook.com/Etnostore

      Sei stato gentilissimo!!!
      a presto
      Piero

  • ecco il link al BLOG con un interessante “TROUBLESHOOTING” guide

    ciao

  • 3Nastri

    Ciao Piero!
    Felice di averti aiutato.
    Buon lavoro.

    P.s. il link non c’è e se lo lasci fai un favore ad altri che possono avere questo problema.
    Ciao

  • Molisella

    Ciao,
    bella guida, ho seguito tutti i passaggi. Purtroppo però come risultato quando clicco alla fine della nuova pagina creata ho questo messaggio di errore: “HTTP Error 405 – The HTTP verb used”
    Ho già provato a visualizzare l’index.html direttamente dal brower e funziona correttamente, ho provato anche ad inserire una pagina che visualizzi il solo messaggio “prova” ma il messaggio di errore non cambia. A questo punto non credo dipenda dal tipo di pagina creata ma da qualche passaggio che mi sfugge. Per esempio: devo essere iscritta come sviluppatore come leggo da uno dei post?

    Grazie in anticipo per la risposta

  • Molisella

    ciao di nuovo,
    in qualche modo ho risolto. In un post di un sito americano ho trovato il suggerimento di sostiuuire l’estensione “html” del file index con “aspx” et voilà, tutto ok. I misteri della programmazione!
    Non credo sia il modo più corretto di operare ma per ora risolve il mio problemi ad oc senza entrare in altri meriti.

    Ciao, grazie ancora e alla prox 🙂

  • 3Nastri

    Ottimo. Probabilmente l’errore è dovuto al server su cui hai messo quel file index.html. L’errore in questione infatti dovrebbe essere proprio generato dalla compatibilità con alcuni file sul server.
    Grazie a te di aver contribuito.
    Mi farebbe piacere se inviassi anche su un commento l’url di questo post che ti ha dato la soluzione.
    Grazie!
    Ciao

  • Felicia Lysiak

    post interessante

  • Gabriele

    Ma io non ho l’opzione default landing page!

  • 3Nastri

    In effetti FB ha cambiato le impostazioni, ma la sostanza dovrebbe rimanere uguale. Quindi anche senza l’opzione default dovrebbe funzionare.
    Fammi sapere.
    Ciao!

  • Lor

    Ciao, mi sapresti spiegare come devo fare per far si che la pagina cambi dopo che uno ha cliccato su Mi Piace? ad esempio ho notato che molte fan page riescono a far cambiare la landing page, facendo comparire codici sconto ecc, che non si vedono se uno è fan… come faccio? Grazie

  • 3Nastri

    Lo fanno con applicazioni di FB.
    Spesso sono applicazioni fatte ad hoc.
    Puoi provare a cercare applicazioni per fanpage di FB e vedere se trovi qualcosa che fa al caso tuo.

  • Lor

    Grazie mille provo a cercare qualcosa 😉

  • 3Nastri

    Figurati 😉

  • working from home

    Appreciate this brief article