Navigaweb.net
Programmi Sicurezza Windows Guide PC iPhone Android Tecnologia Rete Facebook Immagini Musica Giochi

Data:

Aggiornato il 14.11.11

Tutti i grandi marchi aziendali più grossi e famosi come Coca Cola, Nokia, Apple, gestiscono pagine fan su Facebook che "piacciono" a milioni di persone in tutto il mondo.
Queste pagine sono progettate professionalmente e hanno certe caratteristiche utili, che chiiunque può implementare da solo, senza coinvolgere professionisti del settore.
Per esempio, la pagina di Apple iTunes, permette di cercare applicazioni a destra all'interno di Facebook.
Un negozio online di magliette consente di commentare il design preferito, senza lasciare Facebook, mentre la CNN, cosi come la pagina Navigaweb su Facebook, ha tutte le storie ultime notizie elencate in ordine cronologico.

Come si fa a modificare pagine Facebook in modo che che sembrino siti internet veri e propri, completi di applicazioni interattive ed informazioni personalizzate?

Senza assumere progettisti o programmatori esperti, si può seguire questa guida per modificare la pagina.
Si può usare il linguaggio interno di Facebook e, installando l'editor FBML sulla propria pagina, si possono aggiungere: una pagina di benvenuto (che diventa la "Scheda di arrivo" personalizzata per invitare i visitatori a diventare sostenitori o fan), sondaggi, presentazioni, slideshow di foto, feed RSS di notizie aggiornate, video, player musicale, commenti e altro ancora.

1) Dopo aver creato la pagina Facebook relativa al proprio blog o al proprio business, l'editor FBML per usare questi codici è Static HTML iFrame che è anche uno dei migliori editor per modificare le pagine Facebook con gli iFrame HTML.

2) Tornando alla propria Fan Page di cui si è amministratori, fare clic sul link Modifica pagina nella barra laterale e cliccare su "Modifica" nella sezione FBML.

3) Questo è l'ambiente di sviluppo dove si può inserire sia codice FBML (con le API di Facebook), sia il normale HTML.
Chi conosce il linguaggio di programmazione dei siti internet, l'html, non avrà difficoltà a inserire immagini, tabelle, paragrafi e tutto quello che vuole.
Chi non ha alcuna esperienza con l'html, basta che continua a leggere la guida.

4) Dopo aver creato una pagina statica come quella di benvenuto, tornare alle impostazioni del modifica pagina, cliccare su "Modifica" sotto le "Impostazioni Bacheca" e selezionare, alla voce "Scheda di arrivo predefinita per tutti gli altri", la nuova pagina creata.

5) Per le altre nuove sezioni create, basta individuarle nella lista, cliccare su "Impostazioni applicazione" ed aggiungerle come schede.

Per maggior chiarezza, si può guardare questo video che guida passo passo alla creazione di una pagina personalizzata usando lo Static FBML.
Si possono creare più schede FBML aggiuntive alla propria Fan-Page, ciascuna con una applicazione diversa.

Tornando ora al punto 3, vediamo qualche esempio di codice da usare per creare nuove applicazioni e sezioni personalizzate sulla pagina Facebook.

1) La prima cosa, obbligatoria per tutti, è creare una pagina di benvenuto che appaia quando qualcuno visita la pagina Facebook.
Si tratta di una copertina o di una homepage che può contenere una immagine di benvenuto, un commento di presentazione ed un invito a sostenere la pagina cliccando sul tasto "Mi Piace". (vedi il benvenuto di Navigaweb).
Si deve quindi inserire una immagine personale creata ad hoc per Facebook ed usare un codice di questo tipo.
<p><img src="http://esempio.com/mi-piace.jpg"></p>
<p><b>Iscriviti a ... su Facebook </b></p>
<p><b>Clicca sul bottone "Mi Piace" qui sopra</b></p>

L'unica condizione da rispettare è che l'immagine non sia più larga di 520px.

Per aggiungere una pagina di benvenuto, si può anche utilizzare l'applicazione automatica WelcomeTab

2) Se si volessero aggiungere schede, notizie e regali (come un coupon, un buono omaggio, il download di un libro o di una guida), nascosti ai non fan e disponibili soltanto ai sostenitori che hanno cliccato il tasto "Mi Piace", si può creare una condizione di questo tipo:
<fb:visible-to-connection>
// inserire cosa deve essere visibile solo ai fan
<h2>Bentornato</h2>
<p>Puoi <a href="book.pdf">Scaricare</a> il tuo regalo</p>.
<fb:else>
// il benvenuto a chi non è ancora sotenitore
<img src="http://esempio.com/mi-piace.jpg">
</fb:else>
</fb:visible-to-connection>

Altro sulle condizioni Facebook, sulla guida degli sviluppatori.

2) Incorporare un video su YouTube in una scheda fissa della pagina Facebook è molto facile, basta fare copia-incolla del seguente codice nella casella di FBML e sostituire l'ID del video con quello di YouTube.

<fb:swf swfsrc="http://www.youtube.com/v/ID"
imgsrc="http://img.youtube.com/vi/ID/default.jpg"
width="480" height="360" />


3) Per aggiungere un feed RSS e pubblicare su Facebook le nuove notizie scritte sul proprio blog, si può utilizzare l'applicazione RSS Graffiti per averli in bacheca, l'applicazione Networked Blogs per averli in un'altra scheda.

4) Per aggiungere una casella Commenti in modo che tutti i commenti dei lettori appaiano in una scheda separata, si può creare una nuova sezione con FBML, tramite questo codice:
<fb:comments xid="navigaweb" canpost="true" showform="true">
<fb:title>Lascia un commento</fb:title>
</fb:comments>

Bisogna cambiare xid con una parola a piacere e univoca; per saperne di più, guardare la guida

5) Aggiungere moduli, finestre di dialogo, popup.
I popup semi-trasparenti si possono portare sulla pagina Facebook seguendo la guida degli sviluppatori per fb:dialog
Ad esempio, il codice seguente, se aggiunto come nuova sezione FBML, va a creare un link "Chi siamo" sulla pagina Facebook.
<fb:dialog id="dialog" cancel_button=1>
<fb:dialog-title>Chi siamo</fb:dialog-title>
<fb:dialog-content>Navigaweb.net è un blog di informatica e tecnologia</fb:dialog-content>
<fb:dialog-button type="button" value="Yes" href="http://www.navigaweb.net" />
</fb:dialog>
<a href="#" clicktoshowdialog="dialog">Clicca qui</a> per accedere al sito


6) Incorporare una applicazione esterna in flash può servire, tra le altre cose, a:
- Inserire una presentazione Slideshare (Slideshare serve a pubblicare presentazioni Powerpoint online come fossero video YouTube).
<fb:swf swfsrc='http://slideshare.net/swf/ssplayer2.swf?doc=ID_HERE'
width='515' height='425' imgsrc="thumbnail.jpg" />

Sostituire l'indirizzo dell'immagine di anteprima pubblicata online e, nel caso, l'indirizzo con l'swf

- Aggiungere una Chat Room con cui l'amministratore della pagina può comunicare in chat con i sostenitori quando essi sono collegati alla pagina.
I fan non potranno usare questa chat per comunicare tra loro.
Per questo obiettivo, si può usare MeeboMe inglobandolo in una nuova sezione FBML con il seguente codice:
<fb:swf swfsrc='http://widget.meebo.com/mm.swf?ID'
width='515' height='425' imgsrc="chat-thumbnail.jpg" />

Sostituire l'ID con l'ID del widget fornito da MeeboMe.

Una chat alla pagina si può aggiungere anche con l'applicazione automatica Clobby

- Creare sondaggi con PollDaddy
<fb:swf swfsrc='http://i.polldaddy.com/poll.swf?p=ID_HERE'
width='250' height='500' imgsrc="poll-thumbnail.jpg" />


7) Aggiungere podcast e altri lettori musicali per suonare MP3
Facebook rende estremamente facile incorporare file audio MP3 da ascoltare online sulle pagine di Facebook.
Bisogna soltanto caricare i file mp3 su internet (in Skydrive o in Google Docs) ed usare il seguente codice nel FBML.
<fb:mp3 src="http://example.com/podcast.mp3"
title="titolo" artist="nome_artista" />


8) Aggiungere un box per far suggerire la pagina agli amici
Il codice è di questo tipo
<fb:request-form
action="http://www.facebook.com/navigaweb?v=app_4949752878"
type='Navigaweb su Facebook'
content='Penso ti piacerà Navigaweb, te lo consiglio
<fb:req-choice url="http://www.facebook.com/navigaweb"
label="Manda" />'
<fb:multi-friend-selector actiontext="Consiglia Navigaweb ai tuoi amici" rows="3" cols="3" max="20" showborder="true"/>
</fb:request-form>

Si basa su due funzioni del linguaggio FBML di Facebook ossia: la fb:request-form e la fb:friend-selector.
Per vederlo in azione e provarlo potete andare sulla pagina Facebook di Navigaweb.net.

9) Si possono creare pagine Fan anche semplicemente importando una pagina o un file PDF con l'applicazione PDF for Pages.

10) In un altro articolo, 10 migliori applicazioni per una pagina Facebook

In alternativa, può essere più semplice inglobare file swf come visto nel punto 6, usando applicazioni web che fanno ascoltare musica osu Facebook come Mixpod.


Scrivi un commento

Per commentare, si può usare un account Google / Gmail.
45 Commenti
  • Chiara
    01 nov 2010, 20:39:00

    Non riesco a far funzionare la casella commenti... :( dalla spiegazione inserita non è molto chiara..potresti aiutarmi per favore?
    Grazie mille!
    Chiara

  • Claudio Pomhey
    01 nov 2010, 21:03:00

    se fai copia e incolla dovrebbe funzionare, io la ho messa sulla pagina navigaweb

  • Claudio Pomhey
    01 nov 2010, 21:04:00

    cambia solo la parola pomhey

  • Anonimo
    12 nov 2010, 01:14:00

    ciao,
    guida molto bella,
    volevo attivare il podcast per suonare gli mp3, hai scritto che bisogna caricare i file su skydrive.
    ho usato la cartella pubblica e come indirizzo ho copiato "indirizzo web" l'ho incollato ma non funziona.
    quale indirizzo si deve usare?
    Grazie in anticipo della risposta

  • Claudio Pomhey
    12 nov 2010, 10:24:00

    mettile in dropbox che fai prima

  • Anonimo
    13 nov 2010, 02:58:00

    Ciao ho provato ad inserire il box per l'invito amici dalla mia pagina di benvenuto ma quando i miei amici provano a invitare alla fine della procedura da errore. Premetto che come mia home nel codice ho inserito quello lungo perkè non ho ancora personalizzato l'url...come possso risolvere????

  • Claudio Pomhey
    13 nov 2010, 03:08:00

    c'è un errore anche sul mio, quando correggo te lo dico.

  • Anonimo
    13 nov 2010, 11:58:00

    grazie mille !!!! Attendo con ansia

  • Claudio Pomhey
    21 nov 2010, 01:25:00

    corretto il codice, mancava "action"

  • Anonimo
    21 dic 2010, 16:09:00

    c'è un errore in questo: 2) Incorporare un video su YouTube in una scheda fissa della pagina Facebook è molto facile, basta fare copia-incolla del seguente codice nella casella di FBML e sostituire l'ID del video con quello di YouTube.



    non funziona.. mi potete dire se c'è qualche errore?

  • Claudio Pomhey
    21 dic 2010, 16:22:00

    il codice è qui http://developers.facebook.com/docs/reference/fbml/swf fammi sapere

  • Anonimo
    21 dic 2010, 16:33:00

    anzi piu che un errore.. volevo chiedere se non si puo' mettere solo il video senza l'immagine
    grazie!

  • Anonimo
    09 feb 2011, 18:34:00

    A ME ESCE CHE IL LIMITE DI PERSONE DA INVITARE E' 6 COME FACCIO AD INVITARNE DI PIU'?

  • Claudio Pomhey
    09 feb 2011, 18:52:00

    più fan hai, più il limite di persone invitabili aumenta, bisogna solo aver pazienza.

  • Anonimo
    26 feb 2011, 21:56:00

    nel punto 2 non mi funziona... mi aiuti??

  • Claudio Pomhey
    27 feb 2011, 00:22:00

    sta tra le applicazioni no?

  • gipullo
    27 feb 2011, 15:23:00

    Ciao ottima guida bravissimo!Il problema del box manda inviti e' che arriva come richiesta per l'applicazione FBML anche se poi modifichi le varie voci ,a chi arriva la richiesta sembra che e' per aggiungere FBML non la tua pagina...si puo' togliere l'invito FBML?
    Ciao

  • Anonimo
    01 mar 2011, 16:10:00

    Scusa ma ho messo l'fbml dei suggerimenti agli amici ma come mai il massimo è 6 non si puo aumentare??

  • Anonimo
    09 mar 2011, 21:13:00

    non ho capito se inserendo la scheda commenti i fan possono comunque interagire in seguito a link o post della pagina (esempio cliccare mi piace o commentare un video) o se al contrario possono postare unicamente nella scheda suddetta.
    Grazie

  • Claudio Pomhey
    09 mar 2011, 21:21:00

    certo che possono, è una sezione separata a se stante

  • LULU MARCHESE
    11 mar 2011, 17:27:00

    ciao scusA NON RIESCO A FARE IL PUNTO 8 MI PUOI SPIEGARE PERFAVORE GRAZIE

  • rikymej_kaka
    12 apr 2011, 16:00:00

    Come si mette il tasto mi piace nei benvenuti? Poi mi servirebbero un po di aiuti.. Non sono molto esperto.. dove posso contattarti?

  • Skiunsibell
    13 apr 2011, 18:56:00

    Nn sono riuscita nemmeno io..

  • Claudio Pomhey
    14 apr 2011, 05:26:00

    il tasto mi piace è sopra ogni pagina fan ed è fisso

  • Giuseppe
    16 apr 2011, 00:01:00

    come si fanno ad avere 2 immagini? ovvero per i fan un'immagine e per i non fan un'altra... grazie!!!

  • Claudio Pomhey
    16 apr 2011, 02:49:00

    nella pagina di benvenuto? si può fare usando le condizioni nel codice fbml; non ho trattato l'argomento quindi cerca le guide di facebook developer

  • Giuseppe
    16 apr 2011, 11:26:00

    si nella pagina di benvenuto!!!
    dove trovo ciò che mi hai suggerito? cioè guide di facebook developer???

    grazie mille

  • Claudio Pomhey
    16 apr 2011, 12:01:00

    http://developers.facebook.com/docs/reference/fbml/

  • mondointernet2009
    18 apr 2011, 12:06:00

    Ciao guida ottima!Volevo chiederti come si fa a togliere l'invito FBML quando invii la richiesta di amicizia in quanto quando si selezionano gli amici e si manda la richiesta appare all'invitato la richiesta di aggiungere FBML e non la pagina. Mi potresti aiutare pliss??

  • Claudio Pomhey
    18 apr 2011, 12:07:00

    quello proprio non è possibile, ho controllato un sacco di altre pagine di siti americani e non si può levare.

  • mondointernet2009
    18 apr 2011, 12:09:00

    Okappa! Cmq rinnovo i complimenti per la guida mi sta aiutando molto! :-D

  • Claudio Pomhey
    28 apr 2011, 16:50:00

    L'FBML è stato soppresso quindi bisogna trovare qualche alternativa di cui scriverò presto

  • Claudio Pomhey
    28 apr 2011, 16:56:00

    Due alternative a FBML:
    1) Static HTML http://www.facebook.com/apps/application.php?api_key=190322544333196

    2) Static HTML: iframe tabs http://apps.facebook.com/static_html_plus/

  • U2ron4dl5e7B
    11 mag 2011, 17:01:00

    ufff.....il box commenti non funziona....
    a vedersi si vede.....ma se lascio un commento non lo carica e non lo visualizza

  • Anonimo
    19 mag 2011, 17:43:00

    Salve Pomhey....
    volevo chiederti se possibile sapere...
    come inserire in una fanpage facebook, il benvenuto che ti legge il tuo id..tipo
    (Benvenuto ! sei connesso come Pippo franco) ecc.
    insomma... se entri con altro accounts, non ti da piu pippo franco ma l'id con cui visiti la pagina ecco..
    Grazie in anticipo e complimenti per tutto :).


  • 24 mag 2011, 14:57:00

    Ciao! Grazie per i tuoi preziosi consigli ma temo che mi siano inutili per quello che ho in mente di fare io: la mia pagina si occupa di "archiviare" blog e il problema è proprio quello! Archivio i blog utilizzando le note e non è il massimo! Ho pensato di aggiungere la sezione fbml semplice pensando di poter inserire i codici per fare in modo che quei dannati blog vengano archiviati in modo più carino e leggibile ma sinceramente non mi viene in mente nulla... hai qualche proposta?

  • Anonimo
    29 lug 2011, 14:33:00

    ciao ragazzi a me nn fa fare modifica con fbml anche se ho gia aggiunto fbml ai miei preferiti...qualcuno sa xkè?????grz in anticipo

  • Claudio Pomhey
    29 lug 2011, 14:38:00

    leggere l'articolo no? FBML non è più supportato

  • Anonimo
    02 ott 2011, 20:26:00

    ciao ho inserito il video sulla fan page tutto correttamente ma non capisco xkè l anteprima me la dà in scarsissima qualità e cn un immagine sgranata. ce qualcuno che sà cm rimediare?

  • Anonimo
    23 ott 2011, 14:43:00

    ciao, ho messo nella mia pagina un fbml ma essendo inesperiente nel settore non riesco a inserire della musica per far divenare il mio fbml una pagina di benvenuto. Ho provato cn l'html così: ma nulla.. appare solo una scritta undefined quando clicco il segno play. Cosa posso fare? potreste aiutarmi perfavore. Grazie e scusate il disturbo.

  • Claudio Pomhey
    23 ott 2011, 16:21:00

    Non si può più usare FBML, devi usare gli iframe HTML http://www.navigaweb.net/2011/06/editor-per-creare-pagine-facebook.html

  • Anonimo
    30 nov 2011, 16:52:00

    ciao, io ho aggiunto il fbml alla mia pagina xò quando schiaccio modifica pagina mi escono solo:-le tue impostazioni. -gestisci autorizzazioni. -informazioni di base. -immagine del profilo. - in evidenza. -risorse. - gestisci applicazioni. - applicazioni. -mobile. -insights. -entro assistenza. DOVE SI TROVA LA SEZIONE FBML? PERCHé NON LA TROVO(Comunque è una pagina nuova e ho pochissimi fan)

  • Claudio Pomhey
    30 nov 2011, 16:59:00

    stai usando questo? http://www.facebook.com/apps/application.php?id=190322544333196

  • Anonimo
    30 nov 2011, 17:32:00

    Ciao..ottima guida..per la prima parte tutto ok...non riesco però a caricare mp3..seguo le tue indicazioni ma niente..è cambiato qualcosa? grazie!

  • Claudio Pomhey
    30 nov 2011, 17:52:00

    Ma per condividere musica usa iLike no? http://www.navigaweb.net/2009/06/ascoltare-musica-su-facebook-e.html