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