Facebook Open Graph Tutorial

Posto di nuovo il Tutorial, riveduto e corretto:

Ora che ho raccolto un numero maggiore di informazioni,mi è possibile scrivere questo breve tutorial, augurandomi che vi sia d’aiuto, nella speranza che i vostri consigli e informazioni, lo rendano ancora più completo.

Passo 1: Creazione di un’applicazione Facebook

La prima finestra di dialogo, dopo aver premuto “crea applicazione”, è questa:

Inserite sia il nome, che l’App Namespace, quindi cliccate Continua.

Passo2: Configurare l’applicazione.

Ci troviamo adesso, nella scheda dei settaggi di base(Basic).

L’unica voce che ci interessa è quella riquadrata in rosso, Website with Facebook Login, inserite in quel campo, l’indirizzo del vostro sito web.
Con quest’azione abbiamo concluso la configurazione, salvate: adesso possiamo passare all’Open Graph.

Passo 3: Inizia Open Graph.

Il menu dell’Open Graph, nella colonna di sinistra, mostra solo queste voci:

Premendo Getting Started compare questa finestra:

Questo è il punto nevralgico, dobbiamo definire Azione e Oggetto, io consiglio di usare, al posto delle poco flessibili Azioni e Oggetti predefiniti, un Azione “Cook” riferita ad un Oggetto “recipe”.
Cliccate su “Primi Passi”.

Passo 4: Schede Azione e Oggetto dell’Open Graph.

Ecco la prima scheda, quella relativa all’azione, dovrebbe già esservi scritto: Cook.

Non fate niente, cliccate semplicemente, in basso Continua (o Salva).
Siamo passati, alla scheda dell’Oggetto:

Dovrebbe già esservi scritto, “recipe”, anche qui non fate niente, passate semplicemente alla scheda successiva, premendo salva.

L’aggregazione:

In “Data to Display”, inserite “Cook”, e in “Aggregation Title”, “recipe”, salvate. Bene con questo abbiamo terminato la configurazione iniziale.

Passo 5: Open Graph Dashboard.

Questa è la Dashboard di OG:

Adesso, in Aggregation, di fianco a “recipe”, troviamo “Add Sample Data”:

cliccatelo, vi si aprirà questa finestra:

Cliccate qui:

Vi apparirà questa finestra:

Inserite un titolo qualsiasi, e l’indirizzo web di un immagine: cliccate su “Create”.

Adesso sulla Dashboard, dovreste trovare questo:

Cliccate “Debug”, nella pagina che si aprirà, dovete cercare questo:

Quello è l’indirizzo fisico, lo spiazzamento del vostro Oggetto all’interno dell’Open Graph, selezionatelo e copiate.

Adesso cliccate AddNew, di fianco a Preview Action, dovreste trovarvi qui:

Nella “Reference”, di “recipe”, inserite l’indirizzo che avete copiato in precedenza “http://samples.ogp.me ecc..”: cliccate su Create.

Con questo abbiamo finito il lavoro sull’Open Graph, tornate alla Dashboard.

Adesso dobbiamo avere i nostri dati, nella forma che possano essere inseriti nell’HTML del nostro sito: cliccate “GetCode”, di fianco a “recipe” in “Object Types”: vi compariranno i metatag da inserire nella HEAD del vostro html file, copiateli, ricordando di modificare i valori di default, con quelli che abbiamo inserito prima, in particolare “og:url”, l’image e il title nel caso l’abbiate modificati.

Credo che questo nuovo tut, sia migliore, più chiaro del precedente. Lo step-by-step Tutorial, mostra bene la funzione java script PostCook(), dovete soltanto personalizzarla, con il vostro AppNameSpace, tutte cose intuitive.
Mi auguro di esservi stato di aiuto, resto a vostra disposizione per consigli e suggerimenti, logicamente reciproci.

Ecco il risultato come appare nel Feed delle Attività:

Qui si vede, nella Dashboard dell’Open Graph, che l’azione è stata approvata da Facebook. ed è ora attiva:

Annunci

4 risposte a “Facebook Open Graph Tutorial

  1. Ottimo post!!!!
    spiegato molto meglio del tutorial ufficiale Fb!!!
    rimanevo in sospeso tra “preview actions” e “preview objects” non trovando un og:url valido.. così è stato facile!!
    GRAZIE!!!
    Però rimango con un dubbio: staticamente questo sistema funziona. ma come pensa di integrarlo Fb, ad esempio, su siti dinamici??
    Se ho un sito “di ricette”, userò sempre l’azione “cook”, però dovrei fare (sistema statico) 50 pagine per 50 ricette, con i meta differenti??
    Via Ajax ad esempio (sistema dinamico) il debuger non troverà mai i “meta” giusti per ogni “cucina.php?ricetta=32″…dovrei creare dei meta variabili, non so se funzionerebbe….
    Solo considerazioni che vanno oltre al tutorial e ci fanno pensare.. scusate!!
    GRAZIE PER IL TUTORIAL!!

    • Ciao Yurrena,

      >Ottimo post!!!!
      >spiegato molto meglio del tutorial ufficiale Fb!!!

      Grazie.

      >Se ho un sito “di ricette”, userò sempre l’azione “cook”, però dovrei fare >(sistema statico) 50 pagine per 50 ricette, con i meta differenti??

      Hai sollevato, o meglio, hai centrato il cuore del problema, anche io riflettevo su questo. Credo che farò un tentativo, inserire più aggregazioni di “recipe” diverse e vedere come funziona(praticamente, spero di vedere nel preview della timeline la lista di ricette).

      Grazie ancora, i più cordiali saluti.
      Stefano.

  2. Ho letto qualche articolo a riguardo: come purtroppo pensavo, Ajax e questo sistema Open Graph, non sono per nulla compatibili, in quanto OG necessita di elementi HTML statici, per suo principio.
    Anche modificare i meta via JQuery (o Js) è possibile, ma arriva sempre dopo il caricamento Html della pagina..
    Qualche programmatore suggeriva di aggiungere infiniti “canonical url” per ogni Object, ma torniamo al punto di avere 50 pagine Html per 50 ricette…
    Una soluzione, potrebbe essere quella di impostare delle variabili “$object” a livello di php, e farle caricare a seconda della nostra “ricetta”.
    Quando Fb farà la richiesta alla nostra pagina “/cucina.php?ricetta=12” il php caricherà i meta relativi alla ricetta 12 e li restituirà a Fb..
    A livello concettuale funzionerebbe. Faccio qualche test..

  3. Ciao Yurrena,
    in effetti sappiamo ancora poco dell’OG, ma credo che per avere cinquanta ricette bisogna creare altrettante pagine, non c’è modo di dire a OG fermati a questo punto su una pagina HTML. Posterò qualcosa, relativamente al concetto di “snodo”, fondamentale per questa tecnologia. A risentirci presto.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...