Dieser Artikel wurde maschinell übersetzt.

Innovation

Grundlegende Facebook-Programmierung: Das JavaScript-SDK

Dino Esposito

Ich werde ehrlich sein: Ich weiß nicht genau, wie eine soziale Strategie aussehen könnte, und ich habe nicht mehr als eine schwache Vorstellung über die Tricks, dass Sozialexperten spielen können, um Ihren Inhalt immer beliebter. Ebenso ich nie viel Aufmerksamkeit, Suchmaschinen-Optimierung (SEO) in Web-Seiten zu suchen, aber ich glaube, dass diese social-Optimierung ist heute viel mehr relevant und Belohnung als SEO jemals war.

In den letzten zwei Ausgaben dieser Rubrik wurde erörtert, wie zum Authentifizieren von Benutzern einer Web- oder Windows-Anwendung, die mit Facebook und auf das soziale Netzwerk für einen mündigen Benutzer bereitzustellen. (Diese beiden Spalten finden Sie unter msdn.microsoft.com/magazine/jj863128 und msdn.microsoft.com/magazine/jj883950.)

Was Facebook angeht, gibt es viel mehr, dass Sie tun können, um eine "soziale Schicht" einer Website hinzuzufügen. Eine soziale Schicht ergibt sich aus der Kombination der drei Hauptkomponenten: Identität, Gemeinschaft und Interaktion. In diesen früheren Artikeln sprach ich, Identität und ein wenig Interaktion. Hier werde ich erkunden die wichtigsten Werkzeuge, die Sie nutzen können, um eine echte soziale Ebene auf Ihrer bereits bestehenden Webseite hinzuzufügen. Laut Facebook sind diese Tools zusammen als soziale Plug-ins bekannt. Ein soziales Plug-in ist eine leistungsstarke Mischung aus HTML-Markup, CSS und JavaScript-Code. Es liegt in Ihrer Verantwortung als Web-Entwickler zu verschmelzen diese Elemente in die UX.

Der allgegenwärtigen wie Button

Der Hauptzweck der sozialen Plug-ins ist die Schaffung eine Brücke zwischen dem Inhalt der Web-Site, die von einem Benutzer und des Benutzers-Facebook-Seite besucht. Durch eine oder mehrere soziale Plugins hosten, können der Website Benutzer bestimmte Inhalte mit Freunden teilen. Der direkteste Weg für eine Website, Benutzer, die Inhalte über Facebook teilen zu lassen ist den Like Button.

Indem Sie einfach den Like Button, kann Benutzer können Freunde wissen, dass sie etwas unter einer bestimmten URL mag. Hosten der Like-Button auf eine Seite könnte nicht einfacher sein; verschmelzen die Taste, um die vorhandenen Benutzeroberfläche kann einige zusätzliche Schritte erforderlich.

Es gibt verschiedene Möglichkeiten, einen Like Button einzubetten. Die einfachste und direkteste Weg ist ein Iframe-Element verwenden:

<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>

Der Href Abfragezeichenfolgen-Parameter bezieht sich auf die URL, die Sie gerne möchten. Die URL muss in einer voll qualifizierten Weise, so etwas wie https://www.contoso.com/cool ausgedrückt werden.

Die meisten des Markups richtet sich an Iframe formatieren. Sie wollen in der Regel nicht Iframe Scrollen oder gerahmt werden. Sie soll auch einen geeigneten Bereich aufnehmen. Das vorhergehende Markup erzeugt die Ausgabe in Abbildung 1.

Abbildung 1 die Standardschnittstelle der Schaltfläche wie

Wenn die Höhe des Iframe (weniger als 25 Pixel oder so) zu klein ist, verlieren Sie das Panel mit die Schaltfläche, um einen weiteren Kommentar zu Posten. Wenn Sie den Like Button innerhalb einer horizontalen Menüleiste verwenden, ist die Höhe ein kritisches Problem. Ansonsten erweitert die Benutzer eine Chance um auch ihren eigenen Kommentar das Eindringen des Features.

Es gibt mehrere Parameter, die Sie nutzen können, um das Aussehen und die Funktionalität der Schaltfläche anpassen. Abbildung 2 listet die verfügbaren Optionen. Alles wird durch eine zusätzliche Abfragezeichenfolgen-Parameter zugewiesen werden.

Abbildung 2 aussehen und Funktionalität anpassen

Während Abbildung 1 zeigt die standard-Layout, Abbildung 3 zeigt die Button_count und Box_count Layouts.

Abbildung 3 zusätzliche Layoutformate (Keimen Button und Box) für den Like Button

Ein weiterer Parameter, die, dem Sie sich anschauen sollten, ist der Ref-Parameter. Es hilft Ihnen die Nutzung von Like Button in Ihre Website zu verfolgen. Durch einen unterschiedliche Ref-Wert geben jeweils wie Button (auch in verschiedenen Seiten der Website) — eine einfache alphanumerische Zeichenfolge — Sie können leicht verfolgen, Referrer in das Serverprotokoll, das zurück zu diesem spezifischen wie Button zurückverfolgt werden können. Insbesondere erhalten Sie für jeden Klick von Facebook zurück auf Ihre Website, eine Referrer-URL mit zwei zusätzlichen Parametern. Der Fb_ref Abfragezeichenfolgen-Parameter wird nur Ihre ursprüngliche Ref-Zeichenfolge; der Fb_source Abfragezeichenfolgen-Parameter ist eine Zeichenfolge, die Ihnen Informationen über den Kontext von innerhalb von Facebook gibt, stammt von das klicken.

Lokalisieren den Like Button

Obwohl der Like Button universal angesehen werden kann, noch möglicherweise Situationen in denen Sie ähnliches übersetzen möchten Plug-in für eine bestimmte Sprache. Siehe Abbildung 2, alle Sie tun müssen, ist den Gebietsschema-Parameter der Abfragezeichenfolge hinzufügen und legen Sie es auf eine benutzerdefinierte Zeichenfolge, die angibt, die gewünschte Sprache und Kultur.

Um es ein bisschen schwieriger machen, können Sie nicht ausdrücken, Kultur mit dem kanonischen Xx-XX-Format, wobei Xx angibt, die Sprache und die Kultur XX. In der Microsoft .NET Framework, erhalten Sie diese Zeichenfolge aus den folgenden Ausdruck:

var name = Thread.CurrentThread.CurrentUICulture.Name;

Für diese Zeichenfolge mit Facebook verwendet werden müssen Sie den Strich mit einem Unterstrich ersetzen. Beachten Sie auch, dass das einzige Sprache-Token nicht ausreicht und die ganze Gebietsschemaeinstellung ignoriert werden. Dieser Punkt führt mich zu ein weiterer interessanter Aspekt: Was ist das Standardverhalten des Like Buttons so weit wie die Sprache ist betroffen?

Ebenso wie Twitter, Facebook, standardmäßig, auf die Sprache, die der Benutzer als die primäre Sprache in ihrem Profil gewählt hat. Wenn der Benutzer aktuell angemeldet ist nicht, basiert die Benutzeroberfläche auf die Spracheinstellungen im Browser erkannt.

Einführung in das JavaScript-SDK

Im Allgemeinen können Sie Facebook-Plug-ins ein paar unterschiedlich konfigurieren: mithilfe eines einfachen URLs über einen benutzerdefinierten Hyperlink; verwenden einen Iframe (wie in diesem Artikel dargestellt); HTML5 Markup verwenden; und mit der erweiterten Facebook Markup Language (XFBML). HTML5 und XFBML sind in vielerlei Hinsicht gleichwertig; HTML5 ist nur eine mehr -­den letzten Syntax für Vollständigkeit unterstützt. HTML5 und XFBML erfordern die Verwendung des Facebook JavaScript SDK.

Modernsten sozialen Plug-ins sind nur durch HTML5 und XFBML Markup vorhanden. Dies ist der Fall für die Senden-Schaltfläche zum Senden von Inhalt direkt an Freunde und das Feld Kommentare Kommentare auf einen bestimmten Beitrag zu sehen. Andere Plug-ins wie mag, die Like Box und die Aktivitäts-Feed (die kleine Liste der Mitteilungen von allen Freunden haben Sie normalerweise auf der oberen rechten Ecke der Seite) auch schnell konfiguriert und über ein Iframe eingebettet.

Plugins nicht implementiert durch Iframes oder direkte URLs erfordern die Verwendung des Facebook JavaScript SDK. Wie Sie sich vorstellen können, ist das SDK eine Client-Oberfläche für eine Reihe von Facebook Endpunkte für Sie Aufgaben wie Authentifizierung, Entsendung und Abrufen von Kommentaren, mag und anderen Aktionen.

Um die JavaScript-SDK verwenden, noch bevor Sie es herunterladen, müssen Sie eine app-ID haben. Ich diskutierte gründlich diesen Punkt in früheren Artikeln, aber kurz gesagt, für jede Interaktion mit der Facebook-Website, die über grundlegende Operationen hinausgeht, wie wie, du musst eine app zu registrieren und erhalten eine eindeutige ID. Die app spielt die Rolle der Verbindung zwischen dem Client (z. B. eine Website) und dem Facebook-Back-End. Die Facebook App Dashboard für die Registrierung einer app ist verfügbar unter bit.ly/mly4xs.

Der zweite Schritt besteht aus Ihrer Web-Seiten, die das SDK downloads einige Code hinzufügen. Die URL aufgerufen wird: con­nect.facebook. NET/xx_XX/all.js.

Die Xx_XX in der URL ist ein Platzhalter für das gewünschte Gebietsschema. Eine Option ist diese URL aus innerhalb einer statischen Skripttag verknüpfen. Da die Größe der Datei weit mehr als 180 KB ist, kann es keine gute Idee zu hinunterladen es synchron durch eine statische Script-Tag sein. Die Datei ruft bald zwischengespeichert und die meisten der aufeinander folgenden Anforderungen dafür erhalten einen HTTP-304 "nicht geändert"-Statuscode; Facebook empfiehlt jedoch, dass Sie die Datei asynchron herunterladen. Dies ist ein Muster für alle Skriptblöcke erforderlich für soziale Interaktionen — z. B. es funktioniert genauso für Twitter-Plugins. Der hierzu erforderliche Code lautet wie folgt:

<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>

Der Code ist definiert als eine sofortige JavaScript-Funktion und wird ausgeführt, sobald es gefunden wird. Beachten Sie, dass Sie diesen Code vorzugsweise rechts platzieren, nachdem die Öffnung body-Tag und Sie sollten den Parameter AppId mit Ihrer app-ID ausfüllen. (Beachten Sie, dass viele Entwickler Skripts am unteren Rand der Body-Bereich platzieren befürworten, um zu verhindern, Blockierung der Wiedergabe der Seite.)

An dieser Stelle können Sie HTML5 und XFBML-Tags verwenden, um Facebook-Plug-ins in Ihren Seiten integrieren. Beginnen wir mit einem Blick auf den Login-Button.

Den Login-Button

Das SDK enthält eine Methode im Stamm-FB-Objekt, durch die Sie programmgesteuert den Login-Prozess auslösen können. Die einfachste Möglichkeit besteht aus Ihren eigenen Link oder eine Schaltfläche hinzufügen und binden den Click-Ereignishandler den folgenden Code:

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

Dieser Code ist weit einfacher als jeder andere Analog Code in den letzten beiden Spalten. Auf diese Weise Authentifizieren von Benutzern gegen Facebook ist ein Kinderspiel (siehe Abbildung 4).

Abbildung 4, die Authentifizierung von Benutzern über JavaScript

Das Login-Plug-in kann den Login-Prozess noch leichter machen. Neben der Verknüpfung des SDK, alles was Sie brauchen ist die folgende HTML5 Markup (Analog XFBML-Markup als demonstrierte auf der Facebook-Website):

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

Die Daten-* Attribute können Sie das Aussehen und Verhalten der Schaltfläche konfigurieren. Die blaue Taste auf der Seite des Abbildung4 gibt einen Überblick über die standard-Look-And-Feel. Insbesondere können das Daten-Karte-Faces-Attribut Sie die Bilder der Benutzer (und einige ihrer Freunde, die Ihre Anwendung zum Herstellen einer Verbindung mit Facebook verwendet) angezeigt. Das Daten-Max-Zeilen-Attribut bestimmt die Anzahl der Zeilen (gegeben die Breite des Plug-ins) mit Gesichtern gefüllt werden.

Es sollte darauf hingewiesen werden, dass wenn die Daten-Karte-Faces ist und der Benutzer bereits angemeldet ist, dann keine Login-Button angezeigt wird. Der Benutzer kann nicht durch Ihre app von Facebook ausloggen. Wenn Daten-Karte-Faces false ist, dann der Login-Button bleibt ständig sichtbar und es nicht reagieren, wenn geklickt.

Als Web-Entwickler, Sie sollten sehen den tief greifenden Unterschied zwischen mithilfe der JavaScript-SDK oder der Anmeldung plug-in und Server -­Seite Code und Facebook C# SDK. Wenn Sie die Client-seitige arbeiten, dann sind Sie im wesentlichen Zielen auf Facebook und Login ist wahrscheinlich die notwendigen ersten Schritt um spezifischere Arbeit zu tun. Facebook ist das Ziel hier.

C#-Code ist vorzuziehen, wenn Sie Facebook als nur eine Möglichkeit der Authentifizierung von Benutzern verwenden und noch das Authentifizierungscookie ASP.NET und die standard-Mitgliedschaft-System verarbeitet werden müssen. Facebook ist das Mittel hier.

Das nächste Thema

Sofern es nicht bereits ist, so, Authentifizierung über soziale Netzwerke ein Must-Have-Feature für alle Websites, die Authentifizierung benötigen wird. Dies bedeutet, dass die c#-SDK wahrscheinlich die flexibelste Ansatz bleibt. In diesem Zusammenhang sind die neuen sozialen Klassen in ASP.NET MVC 4 nur Sahnehäubchen auf dem Kuchen. Im Hinblick auf die Entwicklung von Websites sehe ich ebenfalls keinen Grund, nicht Auffüllen Seitenlayouts mit sozialen Schaltflächen und Plug-ins, tweet oder unmittelbaren Inhalt bekanntgeben. Das nächste Mal werde ich wieder mit Facebook Programmierung für mehr soziale Plug-ins wie Kommentare und die Like-Box erweitert werden. Weitere Informationen auf Facebook soziale Plug-ins kann man inzwischen einen Blick auf bit.ly/fAU7Xe.

Dino Esposito ist der Autor von „Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) sowie „Programming ASP.NET MVC 3” (Microsoft Press, 2011) und Mitverfasser von „Microsoft .NET: Architecting Applications for the Enterprise" (Microsoft Press, 2008). Esposito lebt in Italien und ist ein weltweit gefragter Referent für Branchenveranstaltungen. Sie können ihm auf Twitter unter twitter.com/despos folgen.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Christopher Bennage und Scott Densmore