1. Se nel proprio sito/blog si utilizza già il javascript SDK copiare questo codice XFBML:

<fb:subscribe href="https://www.facebook.com/gennarovarriale" width="450"></fb:subscribe>

2. Altrimenti utlilizzare il seguente codice HTML (versione iframe)

<iframe src="https://www.facebook.com/plugins/subscribe.php?
  href=https%3A%2F%2Fwww.facebook.com%2Fgennarovarriale
  &amp;width=450&amp;appId=APP_ID" scrolling="no"
  frameborder="0" style="border:none; overflow:hidden; width:450px;"
  allowTransparency="true">
</iframe>

Ovviamente bisogna sostituire il mio id facebook “gennarovarriale” con il vostro.

P.S: : Potete vederlo in azione su questo sito sotto l’header.

Non è possibile modificare il valore direttamente nell’iPhone, quindi utilizziamo un piccolo trucchetto. Ovvero possiamo sfruttare un software (iBackupBot) che permette di modificare il file di backup del nostro iphone presente in iTunes.
La procedura da seguire quindi è :

• Scaricare iBackupBot
• Effettuare un backup dell’iPhone in iTunes
• Aprire  iBackupBot, trovare il nostro backup e caricarlo.
• Apri il file  Library/Preferences/com.apple.mobileslideshow.plist
• Aggiungere le seguenti righe :
  <key>EnableFirebreak</key><string>YES</string>
• Salva le modifiche effettuate ed effettuare il restore del backup da  iBackupbot.

Probabilmente nei prossimi aggiornamenti di IOS 5 questa funzione sarà attivata di default.

L’obiettivo dell’articolo è quello di mostrare un utilizzo di iBackupBot .

Con questo software è possibile

• Condividere facilmente dati con amici o esportare dati
• Gestire backup multipli (iPad, iPhone,iPod);
• Modificare le varie impostazioni (nome del gestore, dati dei giochi, ecc..)
• Eliminare le chiamate dallo storico del dispositivo.

e altro

Qui bisognerebbe configurare degli oggetti Open Graph con delle relazioni. Ma dato che l’obiettivo e solo quello di avere la Timeline, basta che inseriate quello che volete.

Per esempio compilate con “read” il primo campo e “book” il secondo campi e poi cliccate ‘get started’.
Nella schermata successiva non cambiate nulla e proseguite salvando tutte le modifiche.

Dopo qualche minuto tornate nella home di facebook e vi verrà chiesto se volete passare alla nuova interfaccia.

In questo modo potete vedere in anteprima le nuove funzionalità. O come afferma facebook utilizzare il tuo nuovo diario, dove raccontare la storia della tua vita.

APPROFONDIMENTI: http://www.facebook.com/about/timeline

Nelle precedenti versioni di WordPress eravamo costretti, ad utilizzare tabelle esterne per poter simulare una funzionalità simile, ma ora, dalla terza versione, possiamo utilizzare i content type tramite Custom Type e custom Fields.

• Cos’è un Content Type
• Come WordPress gestisce i Content Type
• Come creare e modificare un Content Type
• Come visualizzare i dati di un Content Type

Cos’è un Content Type

Un Content Type è una struttura adibita a contenere dati.
Wordpress ha come default due tipi di contenuto: post e page. Il primo utilizzato per creare articoli, il secondo per la creazione di pagine.

Entrambi i tipi hanno in comune i campi base per ogni tipo di post :
(id, autore, data, titolo, contenuto, stato)

Se per esempio, vogliamo, gestire un catalogo di film, abbiamo la necessità di gestire un nuovo tipo di contenuto e definire i campi che desideriamo
(es: titolo,trama, regista,attori,locandina) .

In WordPress gestiremo i tipi di contenuto, definendo un nuovo tipo grazie a Custom Post Type, ed un nuovo set di campi grazie ai custom fields.

Nel nostro caso, creeremo un Custom Post Type (film) contenente i campi titolo e trama, e tramite i custom fields aggiungeremo i restanti campi (regista, attori, locandina)

Come WordPress memorizza i Content Type

A differenza di drupal, wordpress memorizza i dati del Content Type in due tabelle : WP_POSTS e WP_POSTMETA (sebbene la struttura viene memorizzata in un record nella tabella WP_OPTIONS)

In WP_POSTS memorizza le informazioni base del tipo di contenuto (id, autore, data, titolo, contenuto, stato, tipo, ecc..) nella seconda i restanti campi (tante righe quanti sono i campi estesi).

Quindi tornando all’esempio precedente per il tipo di contenuto film, i campi titolo e trama verranno memorizzati nella tabella WP_POSTS insieme alle informazioni base di un tipo (id, autore, data, ecc.) mentre per ogni film vi saranno tre righe (regista,attori e locandina) nella tabella WP_POSTMETA

Come creare e modificare un Content Type

A differenza di Drupal, WordPress non ha un interfaccia nativa per la gestione dei content type.
Si può creare e modificare un tipo di contenuto solo via codice

Ma per fortuna vi sono vari plugin che ci permettono di gestire i tipi di contenuto facilmente ed in maniera intuitiva.

Uno dei migliori è Custom Content Type Manager

Come è possibile vedere dalle foto, tramite Custom Content Type manager possiami creare, modificare e cancellare tipi di contenuto. Inserire i campi che vogliamo, con la possibilità di specificare anche il tipo (es. dropdowns, checkboxes, immagini, ecc..)

Una volta creato un content Type bisogna attivarlo per poi vederlo sulla sinistra del nostro pannello di backend, proprio come i tipi di base ( articoli e pagine )

Altre due funzionalità interessanti di questo plugin sono la generazione di un template per tipo e la possibilità di importare/esportare i tipi creati.

Come visualizzare i dati di un Content Type

Quando si visualizzano i dati di un content type, verranno mostrati solo le informazioni base.
Nel caso del contenuto di tipo film solamente il titolo e la trama.

Per visualizzare anche gli altri dati, possiamo utilizzare il template generato automaticamente dal plugin Custom Content Type Manager,
caricando il file single-.php nella cartella del nostro tema (nel nostro caso single-film.php)

Un’altro modo è quello di modificare manualmente il template aggiungendo i campi estesi.
Per far ciò utilizziamo la funzione print_custom_field (‘nomeDelCampo’) oppure get_post_meta($post->ID,’nomeDelCampo’,true)
es

Regista: <?php print_custom_field('regista'); ?>
Locandina: <img src="<?php print_custom_field('locandina'); ?>"  />

oppure utilizziamo il template generato automaticamente dal plugin Custom Content Type Manager,
caricando il file single-.php nel nostro tema (nel nostro caso single-cinema.php)

Ovviamente, il content type di WordPress non ha la potenza è la versatilità di Drupal, ma può tornare utile in molte occasioni

Ad esempio, la recensione di un film scritta da un esperto è utile, ma la recensione di un amico con i tuoi stessi gusti potrebbe essere migliore. Per questo motivo, gli elementi per cui amici e contatti hanno fatto clic su +1 possono essere utili a Google per stabilire la pertinenza della tua pagina alla query di un utente.

Per inserire il pusante +1 sul tuo sito basta seguire questi due semplici passi:

Prima bisogna caricare la libreria javascript necessaria, caricandola nell’intestazione <head> della pagina html o appena prima del tag di chiusura </body>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'it'}
</script>

infine basta caricare il tag g:plusone dove vogliamo che appaia il pulsante *1

<g:plusone size=''></g:plusone>

è possibile valorizzare il parametro size con i valori : small, medium e tall.
Ovvero la dimensione dell’icona : piccola (15 px), standard (20 px) e alta (65 px).

Puoi vedere l’effetto del pulsante su ogni articolo di questo sito alla sinistra della foto principale dell’articolo.

Graph Api Explorer  è un’applicazione facebook  che  ci permette di fare richieste alle Graph Api e vedere i risultati in maniera chiara.

Possiamo esplorare le connessioni tra gli oggetti analizzando i campi e capire meglio le risposte ottenute. Un’interessante funzioanlità è quella di navigare tra i risultati, cliccando sugli id degli oggetti (link blu).

Inoltre, ci permette di ottenere un access_token con i permessi necessari al nostro scopo, aiutandoci  a capire effettivamente quali permessi chiedere all’utente per avere le informazioni desiderate.

Le operazioni possibili sono : Get, Post, Delete.
GET  ci permette di interrogare gli oggetti delle graph api,  POST di aggiornare o inserire oggetti e DELETE di eliminarli.

Per esempio per inserire un evento dobbiamo :

- utilizzare  una chiamata POST
- utilizzare GRAPH API /me/events
- inserire almeno i due campi obbligatori nome e data (name, start_time)
- per far si che l’intera operazione vada a buon fine, dobbiamo avere i permessi necessari, in questo caso dobbiamo usare un access_token con il permesso esteso : create_event

Per realizzare un’apps facebook abbiamo bisogno di:

• Un account autenticato su facebook
• L’applicazione per lo sviluppo di facebook (Facebook Developer). link:
  http://www.facebook.com/developers/
• Un server con php5 ( è possibile utilizzare qualsiasi linguaggio, ma questa guida è per php)

Una volta soddisfatti questi requisiti possiamo iniziare :

1. Aprire l’applicazione ‘Facebook Developer’ e cliccare su ‘Setup New App’
2. Quindi nella nuova schermata aggiungere il nome dell’applicazione, accettare i termini del contratto e proseguire.
3. Ora dobbiamo impostare le informazioni riguardanti la nostra apps, compilando i campi delle schede (informazioni, Facebook integration)
   – Nella scheda Informazioni :
   Inserire il nome dell’applicazione, una sua descrizione, un’icona, il logo dell’apps, la lingua di base, un’indirizzo email con cui è possibile contattarvi e se volete aggiungere altri sviluppatori o amministratori.
   - Nella scheda Facebook Integration:
   Inserire l’indirizzo della vostra applicazione facebook ‘CANVAS NAME’ ( es: http://apps.facebook.com/<NOMEAPPLICAZIONE>) e l’url dove risiede la vostra apps nel web (http://<VOSTROSITO/CARTELLA>). Ovvero l’url dove è presente il file index.php che stiamo per creare.
4. Salvare le modifiche e segnare le informazioni della vostra apps (ID Applicazione e App Secret).
5. Copiare in un cartella del vostro sito la libreria php-sdk (il file facebook.php).
6. Creare un file index.php dove inserire il seguente codice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php 
    $app_id = 'ID DELLA VOSTRA APPS';
    $app_secret = 'APP SECRET DELLA VOSTRA APPS';
    $my_url = "http://apps.facebook.com/NOME DEL CANVAS DELLA VOSTRA APPS/";
 
    $code = $_REQUEST["code"];
 
    if(empty($code)) {
        $dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
            . $app_id . "&#038;redirect_uri=" . urlencode($my_url);
 
        echo("<script > top.location.href='" . $dialog_url . "'". " </ script >");
    }
 
    $token_url = "https://graph.facebook.com/oauth/access_token?client_id="
        . $app_id . "&redirect_uri=" . urlencode($my_url) . "&client_secret="
        . $app_secret . "&code=" . $code;
 
    $access_token = file_get_contents($token_url);
 
    $graph_url = "https://graph.facebook.com/me?" . $access_token;
 
    $user = json_decode(file_get_contents($graph_url));
 
    echo("Ciao " . $user->name);
?>

Ora la nostra applicazione è identificata da due indirizzi:

• http://www.miosito.it/nomeapplicazione/ : indirizzo di callback (che viene chiamato da facebook direttamente)
• http://apps.facebook.com/nomeapplicazione/ : indirizzo del applicazione su facebook (canvas url)

Se tutto è andato bene, dovremmo vedere ‘ciao ‘ seguito dal nostro nome.

Attenzione: Nel copiare ed incollare il codice, state attenti agli apici!

Breve spiegazione del codice:

• le prime 3 righe (2-3-4) impostano le variabili per poter effettuare l’autorizzazione con facebook.
• la riga 6 carica il codice che facebook passa ad un’applicazione, una volta che l’autenticazione è andata a buon fine (protocollo OAuth 2.0).
• riga 8 -13 : Se non c’è questo codice non si è autenticati. Quindi nelle rige 9-10 creiamo l’url di autenticazione, passando l’app id e l’app secret e nellariga 12 ricarichiamo la pagina con questo url
• Arriviamo alla riga 15 solo se siamo autenticati (variabie $code impostata). In questa riga creiamo il token url per ottenere l’access token (riga 19) per effettuare chiamate autorizzare alle GRAPH API
• Infatti, nella riga 21 effettuiamo una semplice connessione per ottenere i dati dell’utente GRAPH API (/me).
• I dati sono in json, quindi li decodifichiamo nella variabile $user.
• A questo punto si mostra il nome dell’utente, presente nell’oggetto ‘user’.
• extra; Per vedere tutte le informazioni presenti nell’oggetto ‘user’, possiamo fare un semplice debug dell’oggetto : print_r($user);

Ovviamente, questo è solo uno script d’esempio, sa cui partite lo studio.
In futuro scrivero nuovi articoli per utilizzare le Graph Api.

Approfondimenti :
- Creare un’applicazione facebook : canvas Page e canvas Url
- Creare un applicazione per facebook : Invitare gli amici ed inviare notifiche e messaggi
-

Link : Gennaro Varriale su Facebook:

Intanto potete provarlo su questo sito in ogni articolo, il pulsante si trova vicino al pulsante like.

Inserirlo è davvero semplice.
Se avete seguito il mio articolo: “Aggiungere “Mi piace” (Like button) di Facebook sul proprio sito” , vi basta inserire il parametri send=”true” nel tag fb:like

es. :

<div id="fb-root"></div>
<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
<fb:like href="LA MIA PAGINA" show_faces="true" width="450"  send="true" >
</fb:like>

in alternativa è possibile inserirlo senza il pulsante like in questo modo (tramite il tag fb:send):

<div id="fb-root"></div>
<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
<fb:send href="example.com"></fb:send>

vi ricordo sempre di utilizzare i corretti tag OG per formattare in maniera corretta la visualizzazione della vostra pagina nel box.

<meta property="og:site_name" content="NOME DEL TUO SITO o PAGINA"/>
<meta property="og:image" content="UN IMMAGINE CHE IDENTIFICA IL TUO SITO O PAGINA"/>
<meta property="og:type" content="blog"/>
<meta property="og:url" content="URL DEL SITO (lo stesso che utilizzi nel codice like)"/>
<meta property="fb:admins" content="IL TUO ID DI FACEBOOK" />

Tempo

<script src="js/tempo.js" type="text/javascript"></script>

Poi eseguire la funzione prepare che prende l’elemento html in cui vogliamo  agire,  ed infine la funzione render per caricare i dati json ed elaborarli.

<script>Tempo.prepare("esempio").render(datiJSON);</script>

In questo esempio supponiamo di avere una sorgente json con questi dati.

var datiJSON = [
    {'name':{'first':'Gennaro','last':'Varriale'},'nickname':'xiweb.it',
    {'name':{'first':'Mark','last':'zuckenberg'},'nickname':'facebook.com'
];

il codice html per renderizzare i dati sarà il seguente:

 <ol id="esempio">
	<li data-template> <code>{{name.first}} -  {{nickname}}</code> </li>
</ol>

il codice generato nel browser sarà

<ol id="esempio">
 <li> Gennaro - xiweb.it    </li>
 <li> Mark - facebook.com </li>
</ol>

Nella pagina ufficiale di Tempo è possibile trovare esempi con Twitter e Solr.

L’applicazione viene caricata all’interno di uno spazio, chiamato Canvas Page.
Un canvas page di un’applicazione facebook è identificato da un nome (Canvas Page Name) necessario per raggiungere l’apps.
All’interno del Canvas Page verrà eseguita la nostra applicazione, che verrà prelevata da un indirizzo esterno chiamato Canvas URL (una pagina html/javascript/css).

Per esempio, se la nostra applicazione facebook risiede sul nostro server in una cartella apps, il canvas url sarà http://www.nostrosito.it/apps .
Quando l’utente navigherà all’indirizzo http://apps.facebook.com/canvas-page-name Facebook carichera la pagina precedente (canvas url) all’interno di un iframe nel canvas Page.

Un Canvas Page ha un’ampiezza massima di 760 pixel. L’altezza è variabile ed è possibile impostarla tramite javascript (con la funzione setSize() )
Per impostare la nostra applicazione dobbiamo prima di tutto crearla, andando all’indirizzo (http://www.facebook.com/developers/createapp.php) ed inserendo le informazioni base.
Nel tab Integrazione Facebook (vedi foto) inseriamo il nome del nostro Canvas Page (1) e l’indirizzo del Canvas (Canvas Url) (2)
Inoltre selezionamo come Canvas Type “Iframe” (3).

Fino a questo momento, non abbiamo fatto altro che caricare una web apps all’interno di facebook, ma non c’è stata ancora nessuna interazione con la piattaforma.