Come creare una landing page per Facebook
Pubblicato il 17/4/2011 • Blog applicazioni, creare, Facebook, iframe, landing, page
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”
