Il presente articolo è stato tradotto automaticamente.

Cutting Edge

Programmazione essenziale per Facebook: JavaScript SDK

Dino Esposito

 

Sarò onesto: Non so esattamente che cosa una strategia sociale potrebbe essere simile e non avere più di una debole idea circa i trucchi che esperti sociali possono svolgere per rendere i contenuti più popolari. Allo stesso modo, non mai prestato molta attenzione per search engine optimization (SEO) in siti Web, ma credo che ottimizzazione sociale è oggi molto più rilevante e gratificante di SEO è sempre stato.

In passato due rate di questa colonna, discusso come autenticare gli utenti di un'applicazione Web o Windows usando Facebook e come inviare alla rete sociale per conto di un utente consenziente. (Quei due colonne possono essere trovate alla msdn.microsoft.com/magazine/jj863128 e msdn.microsoft.com/magazine/jj883950.)

Per quanto riguarda Facebook, non c'è molto di più che si può fare per aggiungere un «livello sociale» a un sito Web. Uno strato sociale deriva dalla combinazione di tre ingredienti principali: identità, comunità e interazione. In tali colonne precedenti, mi sono rivolto a identità e un po ' di interazione. Qui, ho intenzione di esplorare i principali strumenti che è possibile sfruttare per aggiungere un vero strato sociale sul tuo sito Web esistente. Secondo Facebook, questi strumenti sono noti collettivamente come social plug-in. Un social plug-in è un potente mix di markup HTML, codice CSS e JavaScript. È responsabilità dello sviluppatore Web a fondere questi elementi nell'UX.

L'onnipresente come pulsante

Lo scopo primario di social plug-in è quello di creare un ponte tra il contenuto del sito Web visitato da un utente e pagina di Facebook dell'utente. Da uno o più social plug-in di hosting, il sito Web consente agli utenti di condividere contenuti specifici con gli amici. Il modo più immediato per un sito Web per consentire agli utenti di condividere i contenuti tramite Facebook è il pulsante Like.

Semplicemente cliccando il pulsante Like, un utente può lasciare gli amici sanno che a lei piace qualcosa presso un determinato URL. Il pulsante Like su una pagina di hosting non poteva essere più semplice; fondendo il pulsante per l'interfaccia utente esistente può richiedere alcune operazioni aggiuntive.

Ci sono diversi modi per incorporare un pulsante simile. Il modo più semplice e più diretto è utilizzando un elemento iframe:

    <iframe src="http://www.facebook.com/plugins/like.php?href=your-site"
      scrolling="no" frameborder="0"
      style="border:solid 1px #000; width:450px; height:80px"></iframe>

Il parametro di stringa di query href si riferisce all'URL si desidera piace. L'URL deve essere espressa in modo completo, qualcosa come https://www.contoso.com/cool.

La maggior parte del markup è rivolto al styling iframe. Di solito, non volete l'iframe per scorrere o per essere incorniciato. Volete anche che occupano un'area appropriata. Il markup precedente produce l'output in Figura 1.

Figura 1 l'interfaccia Standard del pulsante come

Se l'altezza dell'iframe è troppo piccolo (meno di 25 pixel o giù di lì), si perde il pannello che contiene il pulsante per inviare un commento aggiuntivo. Se stai usando il pulsante simile all'interno di una barra di menu orizzontale, l'altezza è un problema critico. In caso contrario, dando agli utenti la possibilità di inviare anche il proprio commento aumenta la penetrazione della feature.

Ci sono diversi parametri che è possibile sfruttare per personalizzare l'aspetto e la funzionalità del pulsante. Figura 2 elenca le opzioni disponibili. Tutti saranno assegnati tramite un parametro di stringa di query aggiuntiva.

Figura 2 personalizzare l'aspetto e la funzionalità

Parameter	Descrizione
Azione	Indica il testo del pulsante e le successive azioni da intraprendere. Può essere come o di raccomandare. Predefinito è come.
ColorScheme	Gli stili del pulsante in modo diverso. Può essere chiara o scura. Predefinito è luce.
tipo di carattere	Imposta il tipo di carattere desiderato per il plug-in. Le opzioni possibili sono Arial, Tahoma, Trebuchet MS e pochi altri.
layout	Cambia il layout del pulsante. I valori possibili sono standard (come in figura 1), button_count e box_count (come in figura 3).
impostazioni locali	Indica la lingua dell'interfaccia utente. Deve essere una stringa nel formato xx_XX. Si noti l'utilizzo del carattere di sottolineatura per separare le due parti di un nome di impostazioni cultura.
show_faces	Flag booleano per indicare se si desidera l'immagine dell'utente il rendering una volta che un utente ha apprezzato il contenuto.
larghezza	Indica la larghezza del plug-in. La larghezza minima dipende anche il layout utilizzato.

Mentre Figura 1 Mostra il layout standard, Figura 3 Mostra il layout button_count e box_count.

Nella figura 3 formati di Layout aggiuntiva (pulsante conte e conte Box) per il pulsante Like

Un altro che si dovrebbe esaminare è il parametro ref. Esso consente di tenere traccia di uso del pulsante come nel vostro sito Web. Dando ognuno come pulsante (anche in diverse pagine del sito) un valore differente ref — una normale stringa alfanumerica — è possibile tenere facilmente traccia Referrer nel log del server che può essere tracciata indietro a quello specifico come pulsante. In particolare, per ogni clic indietro da Facebook per il tuo sito, riceverai un referrer URL con due parametri aggiuntivi. Il parametro di stringa di query fb_ref è solo il tuo originale ref stringa; il parametro di stringa di query fb_source è una stringa che fornisce informazioni sul contesto all'interno di Facebook dove ha avuto origine il clic.

Localizzando il pulsante Like

Anche se il pulsante Like può essere considerato universale, ancora potrebbero esserci situazioni in cui si desidera tradurre simili plug-in per una data lingua. Come mostrato Figura 2, tutto quello che dovete fare è aggiungere il parametro delle impostazioni locali per la stringa di query e impostarlo su una stringa personalizzata che indica la lingua desiderata e la cultura.

Per rendere le cose un po' più complicato, non è possibile esprimere cultura utilizzando il formato canonico xx-XX dove xx indica la lingua e la cultura XX. In ambito Microsoft .NET, si ottiene questa stringa dall'espressione seguente:

var name = Thread.CurrentThread.CurrentUICulture.Name;

Per questa stringa per essere utilizzabile con Facebook, è necessario sostituire il cruscotto con un carattere di sottolineatura. Anche notare che il token unica lingua non è sufficiente in sé e l'impostazione locale intero verrà ignorato. Questo punto mi porta a un'altra interessante considerazione: Qual è il comportamento predefinito del pulsante come per quanto riguarda la lingua è interessato?

Facebook, così come Twitter, impostazioni predefinite per la lingua, che l'utente ha scelto come linguaggio primario nel suo profilo. Se l'utente non è attualmente connesso, l'interfaccia utente è basata sulle impostazioni della lingua rilevate sul browser.

Introducendo il SDK JavaScript

In generale, è possibile configurare il plug-in di Facebook in diversi modi: utilizzando un semplice URL da un collegamento ipertestuale personalizzato; utilizzando un iframe (come illustrato in questo articolo); utilizzando il markup HTML5; e usando l'estesa Facebook Markup Language (XFBML). HTML5 e XFBML sono equivalenti in molti modi; HTML5 è solo un di più -­recente sintassi supportata per completezza. Sia HTML5 e XFBML richiedono l'uso di Facebook JavaScript SDK.

Più sofisticato social plug-in disponibili solo tramite markup HTML5 e XFBML. Questo è il caso per il pulsante Invia per inviare contenuti direttamente per gli amici e la casella Commenti per vedere i commenti su un post specifico. Altri plug-in come piace, la casella come il feed di attività (il piccolo elenco di notifiche da tutti gli amici che avete solitamente sull'angolo in alto a destra della tua pagina) possono essere rapidamente configurato e criptate tramite un iframe.

Plug-in non implementato tramite iframe o URL diretto richiedono l'uso di Facebook JavaScript SDK. Come potete immaginare, il SDK è un client di front-end per un numero di endpoint di Facebook per eseguire attività come l'autenticazione, registrazione e recupero commenti, ama e altre azioni.

Per poter utilizzare il SDK JavaScript, anche prima di scaricarlo, è necessario disporre di un ID di app. Accuratamente discusso questo punto negli articoli precedenti, ma in poche parole, per qualsiasi tipo di interazione con il sito di Facebook che va oltre le operazioni di base come come, è necessario registrare un app e ottenere un ID univoco. L'app interpreta il ruolo del connettore tra il vostro client (ad esempio, un sito Web) e Facebook back-end. Facebook App Dashboard per la registrazione di un app è disponibile presso bit.ly/mly4xs.

Il secondo passaggio consiste nell'aggiunta di qualche codice alle pagine Web che Scarica il SDK. L'URL da richiamare è: / con­nect.facebook. NET/xx_XX/all.js.

Il xx_XX nell'URL è un segnaposto per la lingua desiderata. Un'opzione è il collegamento questo URL all'interno di un tag script statico. Perché la dimensione del file è molto più di 180 KB, esso non potrebbe essere una buona idea per scaricarlo in modo sincrono tramite un tag script statico. Il file viene memorizzato nella cache presto e la maggior parte delle richieste successive per esso riceverà un codice di stato HTTP 304 "non modificato"; Tuttavia, Facebook consiglia di che scaricare il file in modo asincrono. Questo è un motivo comune a tutti i blocchi di script necessari per le interazioni sociali — per esempio, lo stesso per Twitter plug-in funziona. Ecco il codice che necessario:

    <script type="text/javascript">   
      (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.
    net/en_US/all.js#xfbml=1&appId=xxx";
        fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));
    </script>

Il codice è definito come una funzione JavaScript in immediato e viene eseguito non appena si è trovato. Nota che è inserire il codice giusto preferibilmente dopo l'apertura del corpo tag e si deve riempire il parametro appId con il tuo ID di app. (Nota che molti sviluppatori avvocato immissione script nella parte inferiore della sezione del corpo al fine di prevenire qualsiasi blocco del rendering della pagina.)

A questo punto, sei pronto per utilizzare i tag HTML5 e XFBML per integrare Facebook plug-nelle vostre pagine. Cominciamo con uno sguardo al pulsante di Login.

Il pulsante di Login

il SDK contiene un metodo sull'oggetto FB principale attraverso il quale è possibile attivare a livello di codice il processo di login. L'opzione più semplice consiste di aggiungere il tuo link o il pulsante e vincolante il gestore click per l'esempio di codice riportato di seguito:

FB.login(function(response) {
  if (response.authResponse) {
    // Display some wait message 
    // ...
FB.api('/me', function(response) {
      $("#username").html('Welcome, ' + response.
name + '.');
    });
  } });

Questo codice è molto più semplice rispetto a qualsiasi altro codice analogo in passato due colonne. In questo modo, l'autenticazione degli utenti contro Facebook è un gioco da ragazzi (vedere Figura 4).

Figura 4 l'autenticazione degli utenti tramite JavaScript

Il plug-in Login può rendere ancora più semplice il processo di login. Oltre al collegamento del SDK, è necessario il seguente markup HTML5 (o analogo codice XFBML come dimostrato sul sito Facebook):

    <div class="fb-login-button"
      data-show-faces="true"
      data-width="200" 
      data-max-rows="1"></div>

I dati-* attributi consentono di configurare l'aspetto e il comportamento del pulsante. Il pulsante blu nella pagina della Figura4 dà un'idea dell'aspetto standard. In particolare, l'attributo dei dati-Visualizza-volti consente di visualizzare le foto degli utenti (e alcuni di loro amici che utilizzate il vostro app per connettersi a Facebook). L'attributo di righe di dati max determina il numero di righe (data la larghezza del plug-in) per essere riempito di facce.

Si deve inoltre sottolineare che se dati-Visualizza-facce e l'utente è già connesso, nessun pulsante di login è mostrato. L'utente non può disconnettersi da Facebook attraverso la tua app. Se dati-Visualizza-facce è false, poi il pulsante di login rimane visibile tutto il tempo e non reagisce se cliccato.

Come Web developer, si dovrebbe vedere la profonda differenza tra l'utilizzo di JavaScript SDK o il plug-in Login e server -­codice lato e il SDK di Facebook C#. Se si lavora sul lato client, quindi essenzialmente si targeting Facebook e login è probabilmente il primo passo necessario per poter fare un lavoro più specifico. L'obiettivo qui è Facebook.

Codice c# è preferibile se si sta utilizzando Facebook come un solo modo di autenticazione degli utenti e ancora bisogno di gestire i cookie di autenticazione di ASP.NET e il sistema di appartenenze standard. Facebook è il mezzo qui.

Coming Up

Purché non sia già così, l'autenticazione tramite i social network diventerà una caratteristica irrinunciabile per tutti i siti che necessitano di autenticazione. Questo significa che il SDK c# rimane probabilmente l'approccio più flessibile. A questo proposito, le nuove classi sociali in ASP.NET MVC 4 sono solo la ciliegina sulla torta. In termini di sviluppo di siti Web, allo stesso modo non vedo alcun motivo per non compilazione di layout di pagina con pulsanti sociali e plug-in per tweet o pubblicare contenuti immediato. La prossima volta, io ti essere indietro con la programmazione di Facebook che coprono più avanzata social plug-in come commenti e Like box. Per ulteriori informazioni sui plug-in sociale di Facebook, nel frattempo, si può avere uno sguardo bit.ly/fAU7Xe.

Dino Esposito è l'autore di "Architettura Mobile soluzioni per l'impresa" (Microsoft Press, 2012) e "programmazione ASP.NET MVC 3" (Microsoft Press, 2011) e coautore di "Microsoft .NET: Architecting Applications for the Enterprise" (Microsoft Press, 2008). Vive in Italia e partecipa spesso come relatore a eventi del settore in tutto il mondo. Seguirlo su Twitter a twitter.com/despos.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Christopher Bennage e Scott Densmore