Deep Integration mit sozialen Netzen 02.07.2016, 07:30 Uhr

Reizvolle Features

Soziale Netze bieten Entwicklern inzwischen eine Fülle an überaus reizvollen Features.
Auch den Technik-Skeptikern unter den Endverbrauchern sind soziale Netze längst kein Fremdwort mehr. Das Marktforschungsinstitut Statista schätzt die Anzahl aktiver Nutzer sozialer Medien weltweit auf über 2 Milliarden ein (Bild 1).
Anzahl der Nutzer von sozialen Netzen weltweit in Milliarden
(2010-2015) und eine Prognose (2016-2019) (Bild 1)
Quelle: Quelle: Statista
Alleine der Platzhirsch Facebook zählte im vergangenen Jahr weltweit knapp 1,5 Milliarden monatlich aktiver Nutzer. Das soziale Netzwerk verarbeitet im Durchschnitt 890 Milliarden API-Aufrufe pro Tag.

Fest im Sattel: Facebook

Mit einem Marktanteil von knapp über 85 Prozent aller Seitenabrufe weltweit führt Facebook, gefolgt von Pinterest mit 6,6 Prozent und Twitter mit 4,8 Prozent, berichtete Statista im Februar 2016.
Auch in Deutschland liegt der weltweite Platzhirsch mit etwa 23,5 bis 28 Millionen monatlich aktiver Mitglieder – umgerechnet jedem zweiten Internetnutzer – eindeutig auf Platz eins. 19 Millionen dieser Mitglieder kehren laut Facebook jeden Tag wieder; dies entspricht etwa der Reichweite der drei größten Tageszeitungen Deutschlands zusammengenommen (Media Impact). Jeden Monat sind mehr als 18 Millionen Deutsche – also umgerechnet nahezu sieben von zehn Smartphonebesitzern – mit einem Mobilgerät auf Facebook unterwegs; nahezu drei von vier kommen täglich wieder. Insgesamt hat die deutsche Facebook-Gemeinde die Marke 600 Millionen Seitenaufrufe pro Monat im Dezember 2014 durchbrochen. Google+ und Twitter brachten es mit je circa 40 Millionen Besuchen auf einen geteilten Platz zwei.
Auch bei der Nachrichtenverbreitung dominiert in Deutschland nicht der Mikroblogging-Dienst Twitter, sondern eben Facebook, und zwar mit einem erdrückenden Marktanteil von über 90 Prozent. Dies ergab im Februar 2015 eine Untersuchung durch Forscher aus dem Fachbereich Informatik der Technischen Universität Darmstadt (Bild 2).
Engagiert: Die Anzahl von Gefällt-mir-Interaktionen, Tweets und +1-Klicks in Deutschland pro Tag im untersuchten Zeitraum weist auf eine klare Dominanz von ­Facebook hin (Bild 2)
Quelle: Quelle: Technische Universität Darmstadt
Pinterest führt dagegen deutlich im Hinblick auf das weltweite Wachstum der aktiven Benutzeraccounts. Zwischen dem 1. bis 2. Quartal 2014 und dem 4. Quartal 2014 bis 1. Quartal 2015 konnte Pinterest laut dem Statistikportal Statista gemessen an der Zahl aktiver Nutzer um stolze 97 Prozent zulegen und bringt es auf 100 Millionen aktiver Nutzer weltweit. Im selben Zeitraum ist Facebooks eigene Pinterest-Alternative Instagram mit ihren 400 Millionen aktiven Nutzern weltweit (davon 9 Millionen in Deutschland) um nur 46 Prozent gewachsen, während das Facebook-Netzwerk selbst um 8 Prozent schrumpfte und LinkedIn um 39 Prozent zulegte.

YouTube-Marktanteil

Das soziale Netzwerk Google+ floppte ungeachtet Googles dominierender Position bei der Internetsuche und des Erfolgs der Android-Plattform. Dennoch führt Googles Videoplattform YouTube unter anderem in Deutschland mit einem nach wie vor beachtlichen Marktanteil von über 50 Prozent (Bild 3).
Eindeutig: Die Verteilung der Marktanteile der Videoplattformen in Deutschland zeigt eine klare Dominanz von Googles YouTube (Bild 3)
Quelle: Quelle: Statista
Neben sozialen Netzwerken mit ausgeprägter globaler Reichweite (Facebook, Twitter, LinkedIn et cetera) haben auch Netzwerke mit rein europäischem oder rein deutschem Schwerpunkt eine gewisse Popularität erreicht. Das in Hamburg beheimatete Netzwerk Xing bringt es im DACH-Raum eigenen Aussagen zufolge auf eine Reichweite von über 9,2 Millionen Menschen (davon 869.000 zahlende Mitglieder) und auf über 171 Millionen Seitenaufrufe pro Monat, laut IVW mehr als alle seine Mitbewerber unter den Geschäftsportalen zusammengenommen.
Die anhaltende Popularität dieser Dienste verspricht eine langfristige Beständigkeit und hat eine enorme Anziehungskraft für Unternehmen. Aufgrund ihrer beachtlichen Reichweite haben sich soziale Netze in vielseitig nutzbare Marketing-Plattformen verwandelt.
Das jähe Ende von Parse
Parse, Facebooks eigenes Backend für die standardisierte Bereitstellung von Serverdiensten an mobile Anwendungen, legte der Anbieter im Januar 2016 zum alten Eisen.
Bestehende Apps sollen bis Januar 2017 unverändert funktionieren, doch danach wird Facebook endgültig »den Stecker ziehen«. Entwickler, die ihre Apps auf Parse aufgebaut haben – alleine im Jahr 2014 waren es bereits eine halbe Million –, stehen daher bald vor einem Problem. Alternative Dienste, die Parse-ähnliche Funktionalität anbieten, beinhalten Amazon Web Services, Softlayer, Azure und Google App Engine.
Im Hinblick auf das Graph API verspricht Facebook neuerdings eine kontinuierliche Unterstützung einer jeden Version im Zeitrahmen von vollen zwei Jahren nach der erstmaligen Veröffentlichung.
Tipp: Mit dem neu vorgestellten API Upgrade Tool von Facebook können Sie die Auswirkungen eines Upgrades auf die Funktionsfähigkeit Ihrer Apps untersuchen.
Auf der einen Seite fungieren diese Dienste als ein Werbemedium im klassischen Sinne, auf der anderen Seite bieten sie Instrumente der Marktforschung, deren unübertroffene Genauigkeit und Kundennähe den Unternehmen einen deutlichen Mehrwert bietet. Dies spiegelt sich auch in den Benutzerzahlen wider. Drei von vier weltweiten Großunternehmen aus der Fortune-500-Liste setzen laut Statista das soziale Netzwerk Twitter ein. Facebooks eigenen Aussagen zufolge gibt es weltweit mehr als 50 Millionen Unternehmens- oder Marken­webseiten. Über 9 Millionen mobiler Apps und Webanwendungen verfügen über eine Integration mit Facebook.

Vorteile der Integration

Für die Entwickler mobiler Apps und Webapplikationen verspricht eine derart hohe Popularität und Marktdurchdringung sozialer Plattformen einen potenziell sehr hohen Nutzen einer durchdachten Integration. Die Möglichkeiten beinhalten eine Vielzahl von Ansätzen, von einer sicheren Benutzer-Authentifizierung über den Zugriff auf Benutzerdaten zur Bereitstellung erweiterter App-Funktionalität bis hin zur Akquisition neuer Anwender.
Die erfolgreichsten sozialen Netze sind nicht nur im gesellschaftlichen Kontext sozialer Beziehungen, sondern auch auf der API-Ebene äußerst integrativ. Gut dokumentierte APIs und die oft kostenlose Abwicklung von API-Zugriffen haben die Verbreitung dieser Dienste noch weiter erhöht. Die Kunst besteht allerdings nicht darin, die hundertsiebensiebzigste Gefällt-mir-Schaltfläche in eine App zu integrieren, sondern eine Implementierung zu entwickeln, die in die Tiefe der Möglichkeiten sozialer Netze greift und einen konkreten Nutzen daraus zieht. Soziale Netzwerke fungieren dann nicht bloß als Empfänger von Daten, sondern auch als Anbieter von Softwarediensten und Daten aus der Cloud.
Facebook unterscheidet fünf unterstützte Funktionalitätsbereiche für externe Software-Anwendungen:
  • Benutzer-Authentifizierung via Facebook-Login,
  • Veröffentlichen von Benutzerdaten aus externen Anwendungen auf Facebook,
  • Facebook-Analytics für mobile Apps,
  • Monetarisierung mobiler Apps mittels Facebook,
  • Bots für die kürzlich vorgestellte Facebook-Messenger-Plattform.
Nicht jedes soziale Netzwerk steht jeder Art von Integration und jeder Art von Anwendung in gleichem Maß aufgeschlossen gegenüber. Facebook setzt beispielsweise verstärkt auf Spiele. Face­books eigener Marktplatz für Anwendungen mit Facebook-Integration ist unter der Adresse https:// www.facebook.com/games verfügbar.
Je nach Art der Anwendung und der Zielgruppe mag Facebook nicht automatisch die beste Wahl darstellen. Vor der Anbindung einer Website oder einer mobilen App an soziale Medien empfiehlt es sich, ein klares Ziel zu definieren und die geeignete Plattform zu wählen.
Webanwendungen und mobile Apps können aus den Lösungen, welche die Anbieter sozialer Me­dien entwickelt haben, dank einer durchdacht implementierten tiefen Integration einen sehr hohen Nutzen ziehen.

Hohe Reichweite

Die führenden sozialen Netze haben nicht nur eine hohe Reichweite erreicht, sie haben sich inzwischen in leistungsstarke Web-Entwicklungsplattformen verwandelt. Sie verfügen nicht nur über massive Datenbestände rund um das Privatleben ihrer Endbenutzer (was den Datenschützern ja ernsthafte Sorgen bereitet), sondern können diese Rohdaten auswerten und die Resultate als konkret umsetzbare Handlungsempfehlungen oder Marketing-Features ihrer Plattformen nach außen hin bereitstellen.
Für die Entwickler von Webanwendungen und mobilen Apps gibt es zahlreiche gute Gründe, die Einbindung der bereitgestellten APIs geeigneter Dienste ernsthaft in Erwägung zu ziehen, um den eigenen Endanwendern neue Features bereitzustellen und eine verbesserte Benutzererfahrung zu bieten.
Das jüngste Beispiel für die Vorteile einer engen Facebook-Integration ist das Facebook-Login und die Facebook-Live-Video-Unterstützung durch das Overwatch-Game von Blizzard Entertainment und durch die Battle.net-Online-Spielgemeinde (Bild 4).
Virtuell: In dem Spiel Overwatch können Benutzer mit ihren Freunden aus der Facebook-Gemeinde interagieren (Bild 4)
Offenbar scheint dieses Facebook-Feature äußerst populär zu sein, da sich immerhin sieben Millionen Fans des Spiels allein in der ersten Woche der Verfügbarkeit dafür entschieden haben.
Die Idee, Video-Live-Streaming in Applikationen und soziale Netze einzubinden, ist sicherlich nicht neu, denn immerhin tritt Facebook damit in direkte Konkurrenz zu Amazons Twitch und Googles YouTube, die bei der Unterstützung von Live-Videostreaming ebenfalls um die Gunst von Web- und Mobil-App-Entwicklern buhlen.
Ob es darum geht, die Benutzer-­Authentifizierung zu vereinfachen, ohne die Sicherheit aufs Spiel zu setzen, oder darum, den Endanwendern einen komfortablen Zugriff auf ihre eigenen Fotos und andere Daten zu ermöglichen, stets gilt: Die Anbindung an soziale Netze benötigt leistungsstarke, langfristig unterstützte APIs. Eine Deep-Integration-Anbindung von Webanwendungen und mobilen Apps an soziale Netze wie Facebook hat viele mögliche Anwendungsgebiete. Eine offensichtliche Anwendungsmöglichkeit für Messenger-Bots wäre beispielsweise ein Facebook-gestützter Kundendienst für Unternehmen.
Ob Sie eine Pizza bestellen, ein Taxi rufen oder ein Paket nachverfolgen wollen: Bei klar definierten Aufgaben sind Messenger-Bots für Facebook geradezu ideal. Doch es handelt sich bei Weitem nicht um das einzige Anwendungsgebiet (Bild 5).
Ein Draht zum Kunden: Facebooks Chat-App Messenger findet auch im Kundendienst Anwendung; sie verschafft den Unternehmen Kundennähe (Bild 5)
Bei allen Anwendungen, welche die Endverbraucher adressieren, empfiehlt sich eine Integration mit Facebook: So können Sie Ihre Anwender dort treffen, wo sie ohnehin verweilen. Ein konkretes Beispiel einer gelungenen Integration stellt die Anbindung von Skype an Facebook dar. Soweit es Skype betrifft, hat Microsoft ganze Arbeit geleistet.

Das Netz der kontextualen Beziehungen

Aus der Sicht der Softwareprogrammierung stellt ein soziales Netz eine überaus reizvolle Plattform dar. Das Grundgerüst eines sozialen Netzwerks bildet ein sogenannter Social Graph, ein Modell der Beziehungen seiner Mitglieder untereinander, gegebenenfalls unter Berücksichtigung von Inhalten, mit denen diese Benutzer interagiert haben.
Ein Benutzer mag ein Update in seiner Timeline posten, ein anderer kommentiert es vielleicht, der Nächste wiederum klickt auf den Gefällt-mir-Button und noch jemand anderer erkennt einen Freund in dem Foto und taggt es mit seinem Namen. Diese Aktivitäten reflektieren Zusammenhänge zwischen Menschen, Medien und geografischen Standorten zu jedem gegebenen Zeitpunkt.
Durch die Analyse dieser Zusammenhänge kann das so­ziale Netzwerk den betreffenden Inhalten ihre Bedeutung in Relation zu den betroffenen Menschen entnehmen. So wird eine Wissensbasis über Zielgruppen und Marktnischen entwickelt und eine neuartige Suchfunktionalität ermöglicht – die sogenannte Graph Search.
Facebook Social Plug-ins
Zur Integration von sozialen Netzen in eine Website können Sie eines der offiziellen Module des jeweiligen Anbieters oder einen der zahlreichen externen Dienste und Plug-ins verwenden.
Die offiziellen Facebook-Module, die sogenannten Social Plug-ins, finden Sie unter der Adresse http://developers.face
book.com/docs/plugins/?locale2=de_DE.
Um eines dieser Module in Ihre Website zu integrieren, wechseln Sie hier zur Detailseite der gewünschten Erweiterung und stellen die wichtigsten Parameter unter Verwendung des integrierten Widgets ein. So erhalten Sie den benötigten Code für mehrere alternative Methoden der Anbindung. Weitere Anpassungen des gewünschten Moduls können Sie anhand der Detailanleitung in einem Code-Editor Ihrer Wahl anpassen.
Die einfachsten Facebook-Plug-ins basieren auf einem
iFrame, den Sie ganz einfach in Ihre Webseite einbinden; einige Module verwenden wiederum XFBML-Elemente (Extended Facebook Markup Language) und setzen das JavaScript SDK voraus. Bei diesen Modulen müssen Sie von Facebook eine App-ID (appId) erhalten, indem Sie Ihre Website als eine Facebook-Applikation registrieren. Hierzu navigieren Sie zur Adresse https://developers.facebook.com/apps und erstellen eine neue Facebook-App für das Web. Dabei handelt es sich um ­einen Eintrag Ihrer Website in der Facebook-Datenbank; Sie brauchen nicht wirklich eine Applikation zu entwickeln. Die so erzeugte App-ID müssen Sie dann in dem Code-Abschnitt der Webseite eintragen, der das JavaScript SDK initialisiert.
Graph Search erlaubt es, mit intelligenten, kontextabhängigen Suchanfragen fein granulierte Informationen aus der sozialen Plattform zu extrahieren. Facebooks Graph Search kommt unter anderem für die Marktforschung wie gerufen: Analysesoftware kann die Präferenzen der anvisierten Zielgruppe erforschen und demografische Kriterien mit persönlichen Vorlieben im Kontext sozialer Interaktionen untersuchen. Die Ära fein granulierter Marktforschung auf der Basis von Big Data aus sozialen Netzen ist offiziell angebrochen.

Das Open-Graph-Protokoll

Die Anbindung von Webanwendungen und mobilen Apps in Facebooks Social Graph erfolgt mit Hilfe des Open-Graph- Protokolls. Es ermöglicht die Integration von Benutzeraktivitäten außerhalb von Facebook mit dem sozialen Graphen der Facebook-Plattform. Das Rückgrat der Anbindung bildet das Graph API von Facebook (aktuelle Version 2.6).
Um Elemente Ihrer Webanwendung oder mobilen App in Facebooks Open-Graph-Modell zu integrieren, müssen Sie diese mit korrekten Tags versehen. Ein Beispiel-Markup für einen Blog-Post oder einen Artikel in Facebook Open Graph finden Sie hier:
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="218565732440027" />
<meta property="og:type"   content="article" />
<meta property="og:url"    content="http://www.webundmobile.de/update/datenbank/schneller-dokumentenspeicher-1105518.html" />
<meta property="og:title"  content="Schneller Dokumentenspeicher" />
<meta property="og:image"  content="http://www.webundmobile.de/img/6/2/8/5/4/2/raptorDB_w600_h445.jpg" />
Den zugehörigen API-Aufruf in PHP ­illustriert das folgende Listing:
$request = new FacebookRequest(
  $session,
  'POST',
  '/me/objects/article',
  array (
    'object' => '{"fb:app_id":"218565732440027","og:type":"article","og:url":"http:\\/\\/www.webundmobile.de\\/update\\/datenbank\\/schneller-dokumentenspeicher-1105518.html","og:title":"Schneller Dokumentenspeicher","og:image":"http:\\/\\/www.webundmobile.de\\/img\\/6\\/2\\/8\\/5\\/4\\/2\\/raptorDB_w600_h445.jpg"}',
  )
);
$response = $request->execute();
$graphObject = $response->getGraphObject();
iOS-Entwicklern stehen die API-Aufrufe FBSDKGraphRequest und FBSDKShareAPI mit dem Open-Graph-Modell FBSDKShareOpenGraphContent zur Verfügung. Das folgende Listing erstellt das benötigte Markup unter Verwendung des Android SDK:
Bundle params = new Bundle();
params.putString("object", "{\"fb:app_id\":\"218565732440027\",\"og:type\":\"article\",\"og:url\":\"http:\/\/www.webundmobile.de\/update\/datenbank\/schneller-dokumentenspeicher-1105518.html\",\"og:title\":\"Schneller Dokumentenspeicher\",\"og:image\":\"http:\/\/www.webundmobile.de\/img\/6\/2\/8\/5\/4\/2\/raptorDB_w600_h445.jpg\"}");
new GraphRequest(
    AccessToken.getCurrentAccessToken(),
    "/me/objects/article",
    params,
    HttpMethod.POST,
    new GraphRequest.Callback() {
        public void onCompleted(GraphResponse response) {
            /* das Resultat nutzen */
        }
    }
).executeAsync();
Mit dem Open-Graph-Debugger von Facebook (https://de
velopers.facebook.com/tools/debug) können Sie überprüfen, wie sich Ihre Webseite präsentiert, wenn sie auf Facebook empfohlen wird (Bild 6).
Der Facebook-Debugger bescheinigt selbst der Facebook-Seite vier Open-Graph-Fehler (Bild 6)
Ähnliches gilt für LinkedIn und andere soziale Netze: Open-Graph-Tags sorgen dafür, dass der LinkedIn-Crawler beim Analysieren der Inhalte nicht raten muss. Nur so kann sichergestellt werden, dass der Inhalt der externen Webseite wie erwartet erfasst und auf LinkedIn korrekt dargestellt wird.

Anmeldung von Benutzern über soziale Netzwerke

Soziale Netzwerke bieten App-Entwicklern ausgereifte APIs zur Benutzer-Authentifizierung. Sie übernehmen dadurch die Rolle eines universellen Schlüssels, welcher dem Benutzer den Zugriff auf eine Vielzahl mobiler Apps und Webanwendungen gewährt. Der Komfort für den Endanwender ist dabei erheblich. Ob das Konzept der sozialen Authentifizierung aber so sicher ist, mag bezweifelt werden.
Ein Passwort-Hack an einer Stelle betrifft automatisch auch alle Apps, welche das betroffene soziale Netzwerk als universellen Authentifizierungsschlüssel verwenden. Hinzu kommt die Tatsache, dass viele Endbenutzer routinemäßig ein und dasselbe Passwort für mehrere soziale Netze verwenden. Eine richtig lange und komplizierte Zeichenkombination als Passwort mag ja hilfreich sein, um eine Brute-Force-Attacke auf den betroffenen Benutzeraccount zu verhindern, doch die Webanwendung kann beim Verdacht auf eine solche Attacke die Passwort-Überprüfung ohnehin verhindern.

Cyber-Sicherheit von sozialen Netzwerken

Mindestens genauso problematisch wie ein unsicheres Passwort ist die Unsitte, für alle Accounts ein und dasselbe Passwort zu verwenden, denn auch soziale Netze sind im Hinblick auf ihre Cyber-Sicherheit vor Hacks nicht ganz immun. Die Nachwirkungen des LinkedIn-Hacks von 2012 plagen die Betroffenen bis heute. Mark Zuckerbergs LinkedIn-Passwort wurde offenbar erst dieses Jahr auf dem schwarzen Markt verkauft – und funktionierte.
Die Hacker konnten sich damit nicht nur in Zuckerbergs LinkedIn-Account einloggen, sondern auch seine sozialen Identitäten von Pinterest und Twitter missbrauchen. LinkedIn hatte die Benutzerpasswörter als ungesalzene SHA-1-Hashes gesichert. Das Decodieren des Passworts von Zuckerberg war ein Kinderspiel.
Für konventionelle Passwörter scheint bald das letzte Stündlein geschlagen zu haben. Anbieter von Authentifizierungstechnologien, darunter Google und Amazon, experimentieren mit Alternativen zur passwortbasierten Authentifizierung. Apple Pay, Samsung Pay und Android Pay können ihre Benutzer mittels eines Fingerabdrucks ­authentifizieren.

Digits ist für Entwickler kostenfrei

Mit Digits (https://get.digits.com) startete Twitter einen entwicklerfreundlichen Dienst für passwortfreie Logins. Digits stellt dem Benutzer einen Anmeldedialog bereit. Hier trägt der Benutzer seine Telefonnummer ein und bekommt daraufhin eine SMS-Nachricht mit einem einmaligen Code, mit dem sich die Anmeldung abschließen lässt.
Für den Entwickler hat Digits mehrere Vorteile. Mobile Benutzer, die sich mit einer Telefonnummer authentifizieren, können mit Hilfe des Friends-Finding-Features Einträge aus ihrem Telefonbuch als Kontakte zu ihrer mobilen App hinzufügen und ihre Benutzerbasis erweitern. Digits rühmt sich einer Konversionsrate in Höhe von 85 Prozent. Der Dienst bietet Features wie Stimmverifikation (in 32 Sprachen), funktioniert in 217 Ländern und ist kostenfrei für Entwickler. Um Digits zu nutzen, benötigen Sie Twitters Fabric (https://get.fabric.io) mit dem Digits Kit von Twitter.
Chat-Bot-Verzeichnisse
Das erste umfassende Verzeichnis von Bots für Facebook-Messenger, getauft auf den Namen BotPages, ist unter der Adresse https://www.botpages.com verfügbar. In diesem Bot-Verzeichnis findet sich unter anderem Inspector, ein Analytics-Dienst für Messenger-Bots – kostenfrei bis 10.000 Benachrichtigungen pro Monat (https://inspector.botpages.com/signup). Benutzer der Messaging-Plattform Slack können außerdem unter der Adresse http://botstash.io Facebook-Bots mit Slack-Integration finden. Auch erste Generatoren keimen bereits auf. Unter dem Namen BotCommerce entsteht auf www.botcommerce.io ein Chat-Bot-Generator für Magento und Shopify.
Auf der diesjährigen F8-Konferenz im April folgte Facebook in Twitters Fußstapfen mit der Vorstellung einer Digits-Alternative namens AccountKit. Facebook AccountKit ermöglicht die Authentifizierung von Benutzern mobiler Apps und Webapplikationen ohne ein Passwort: anhand einer Telefonnummer oder einer E-Mail-Adresse (ein Facebook-Account ist nicht erforderlich).
Auch diese Methode der Authentifizierung ist nicht ohne ein gewisses Risiko: Wer irgendwann seine Telefonnummer aufgeben sollte, würde seine Identität möglicherweise an den neuen Besitzer verlieren. Doch auch diese Authentifizierungsmethode hat durchaus ihre Berechtigung, wenn sie ihrem Zweck angemessen ist und die Benutzererfahrung verbessert.

Sicherheitskritische Infrastruktur

Bei Apps zum Zugriff auf sicherheitskritische Infrastruktur oder sonstige relevante Backend-Systeme sollte man von sozialen Identitäten als dem universellen und einzigen Schlüssel zur Benutzer-Authentifizierung lieber Abstand nehmen. Für die meisten anderen mobilen Apps ist die Benutzer­-Authentifizierung anhand von sozialen Identitäten in der Regel dennoch unbedenklich; dank der vereinfachten Registrierung reduziert sie die Absprungrate und erhöht somit die Reichweite Ihrer App.
Damit Ihre Apps und Webdienste auf persönliche Daten der Mitglieder eines sozialen Netzwerks zugreifen oder in seinem Auftrag Inhalte veröffentlichen können, müssen Sie von dem betroffenen Benutzer entsprechende Berechtigungen für Ihre App oder Ihre Webanwendung einholen. Der Vorgang setzt eine Authentifizierung des Endbenutzers gegenüber dem sozialen Netzwerk voraus. Soziale Netze und ähnliche Dienste – von Facebook über Twitter, LinkedIn bis hin zu GitHub – verwenden hierzu das OAuth-2.0-Protokoll (http://oauth.net). Unter Verwendung von OAuth erteilt Ihnen der Endbenutzer seine Erlaubnis, ohne dabei sein Passwort preiszugeben.

Inhalte veröffentlichen am Beispiel von LinkedIn

Beim Einsatz des JavaScript-SDK von LinkedIn müssen Sie dieses erst einmal im <head>-Abschnitt der Webseite unter Angabe der natürlichen Sprache Ihres UI initialisieren (lang: de_DE). Die Schaltfläche zur Benutzer-Authentifizierung entsteht dann einfach mittels:
<script type="in/Login"></script>
Die Schaltfläche nutzt automatisch diejenige natürliche Sprache, die Sie zuvor initialisiert haben. Ein Klick auf diese Schaltfläche fördert einen Dialog mit der Aufforderung zur Authentifizierung in dem sozialen Netzwerk zutage. Der Vorgang selbst läuft asynchron ab; benötigt wird also eine Funktion, die das resultierende auth-Ereignis abfangen und auswerten kann. Diese Funktion binden Sie über das onLoad-Argument an das <script>-Tag der SDK-Initialisierung an, damit sie automatisch ausgeführt wird, sobald das SDK vollständig geladen ist.
Erst wenn diese Ereignisauswertungsfunktion ein auth-Ereignis empfangen hat, können Sie den generischen Wrapper für API-Aufrufe, IN.API.Raw(), einspannen, um mit Hilfe der REST-API-Schnittstelle Inhalte im Auftrag des betreffenden Benutzers zu veröffentlichen.
Wie sich das Ganze in JavaScript gestaltet, zeigt das folgende Listing:
<script type="text/javascript" src="//platform.linkedin.com/in.js">
  api_key: IHR-API-SCHLUESSEL
  authorize: true
  onLoad: onLinkedInLoad
  lang: de_DE
</script>
<script type="text/javascript">
    function onLinkedInLoad() {
      IN.Event.on(IN, "auth", shareContent);
    }
  function onSuccess(data) {
    console.log(data);
  }
  function onError(error) {
    console.log(error);
  }
  function shareContent() {
  var payload = {
  "comment": "Besuchen Sie uns im Internet",
  "content": {
    "title": "web und mobile developer",
    "description": "Software entwickeln",
    "submitted-url": "http://webundmobile.de/", 
    "submitted-image-url": "http://webundmobile.de/logo.png"
  },
  "visibility": {
    "code": "anyone"
  } 
};
    IN.API.Raw("/people/~/shares?format=json")
      .method("POST")
      .body(JSON.stringify(payload))
      .result(onSuccess)
      .error(onError);
  }

</script>
Da die Payload (also die Nutzlast) in diesem Beispiel in JSON erfasst wurde, müssen Sie in den <head>-Abschnitt Ihrer Webanwendung zusätzlich die folgenden HTTP-Header einfügen:
Content-Type: application/json
x-li-format: json
Beim Einsatz von XML gibt es diese Voraussetzung nicht.
Hat die Veröffentlichung geklappt, liefert LinkedIn den Statuscode HTTP 201 und folgende Informationen zurück:
{
  "updateKey": "UPDATE-1546982-35719543032...",
  "updateUrl": "https://www.linkedin.com/
  updates?discuss=...&scope=..."
}
Beim Wert von updateKey handelt es sich um eine eindeutige Kennung der Veröffentlichung, bei UpdateUrl um den direkten Link dazu. Sollte die App mehrfach dasselbe Update abschicken wollen, bekommt sie den Fehler HTTP 400 zurück.
Soziale Netze weisen jeder externen App typischerweise ein bestimmtes Kontingent an zulässigen API-Aufrufen kostenfrei zu. Das Kontingent ergibt sich in der Regel aus mehreren verschiedenen Beschränkungen. LinkedIn limitiert die Anzahl der API-Aufrufe pro App und zusätzlich noch pro Benutzer und pro Entwickler. Den aktuellen Stand Ihres Kon­tingents können Sie im Dashboard in Ihrem Entwickler-­Account einsehen, bei LinkedIn beispielsweise auf der Über­sichts­seite Ihrer App unter https://www.linkedin.com/develo
per/apps.

Facebook-Messenger-Plattform

Mit der Vorstellung der Messenger-Plattform für Chat-Bots (derzeit noch Beta) auf der F8-Konferenz in April 2016 sorgte Facebook für viel Aufsehen.
Die mobile App Facebook Messenger ist das Frontend für den gleichnamigen Chat-Dienst auf der Basis des quelloffenen MQTT-Protokolls (die Abkürzung steht für Message Queuing Telemetry Transport).
Facebook Messenger war laut Angaben des Anbieters im vergangenen Jahr (2015) die am schnellsten wachsende mobile App in den USA im Hinblick auf die Benutzerzahlen. Einer Studie von SensorTower und Nomura zufolge ist eine Trendwende allerdings nicht auszuschließen (Bild 7).
Dominant: Facebook führt im Hinblick auf die Gesamtanzahl weltweiter App-
Downloads mit WhatsApp, Messenger und Facebook (Bild 7)
Quelle: Quelle: SensorTower, Nomura

Facebook Messenger erreicht inzwischen 900 Millionen Anwender und dürfte damit mit WhatsApp ungefähr gleichgezogen haben. Der Dienst verarbeitet 60 Milliarden Nachrichten pro Tag, also ungefähr das Dreifache des weltweiten Volumens an SMS-Nachrichten (20 Milliarden).
Facebook-Benutzer interagieren tagtäglich mit mehreren Unternehmen. »Niemand möchte für jeden Dienstanbieter eine neue App installieren«, sagte Zuckerberg auf der F8-Konferenz. Die Facebook-Messenger-Plattform löst dieses Problem, indem sie Entwicklern ermöglicht, Bot-Apps für den Face­book Messenger zu schreiben.

Spracherkennung im Facebook Messenger

Die Facebook-Messenger-Plattform ist das Resultat der Übernahme des Start-ups Wit.ai, des Anbieters einer innovativen Spracherkennungsplattform für IoT (das Internet der Dinge), durch Facebook. Facebook Messenger ermöglicht die Entwicklung von Gesprächs-Bots, welche die eingehenden Benachrichtigungen der Benutzer als strukturierte, konkret umsetzbare Handlungsanweisungen interpretieren.
Bots in Facebook Messenger sollen – ähnlich wie Apples Siri – auf der Basis künstlicher Intelligenz mit den Endanwendern direkt kommunizieren, und nicht bloß, um mit ihnen im Leerlauf zu chatten, sondern vielmehr, um spezifische Aufgaben rund um den Kundendienst autonom auszuführen.
Die Bots können beispielsweise Aufträge entgegennehmen, Anfragen bezüglich der unterstützten Liefermethoden beantworten und andere Informationen bereitstellen. Facebook erhofft sich, dank des neuen API den Endanwendern wie auch den Unternehmen einen Mehrwert zu bieten. Unternehmen können mit Hilfe von Bots, die sich im Rahmen der Facebook-Messenger-Plattform nutzen lassen, ihre Kundennähe erhöhen und die Kosten für den Kundendienst drastisch reduzieren. Die Kunden dürfen sich wiederum auf einen rund um die Uhr verfügbaren, direkten Draht zu ihren Dienstleistern via Textchat freuen.
Künftige Implementierungen sollen sich durch die Fähigkeit auszeichnen, natürliche Sprache von sich aus zu verstehen; aktuell ist dies jedoch noch nicht der Fall. Dennoch sind die Bots bereits in der Lage, einige Aufgaben eines Kundendienstmitarbeiters auszuführen.
Floskeln wie »Warten Sie bitte einen Augenblick, ich schaue für Sie nach« und »Das mache ich für Sie gerne« verleihen dem Chat einen menschlichen Touch. Die Erfinder der Plattform wollten ja ursprünglich zu Unterhaltungszwecken virtuelle Persönlichkeiten für soziale Netzwerke erschaffen, die sich von Menschen nicht unterscheiden ließen.
Eine der technisch interessantesten Implementierungen von Chat-Bots für Facebook Messenger ist das Krimi-Spiel Detective Kees: Probable Cause. Der Endanwender plaudert über eine Krimi-Geschichte mit einem Detektiv, bei dem es sich schlicht und ergreifend um einen Chat-Bot handelt; wer das Rätsel lösen kann, gewinnt das Spiel.

Die Chat-Bot-Revolution

Ein Bot im Rahmen der Facebook-Messenger-Plattform besteht im Grunde genommen aus API-Aufrufen, die den Fluss von Nachrichten zwischen dem Endanwender und dem betroffenen Unternehmen im Rahmen von Facebook Messenger verarbeiten.
Facebook ist bei Weitem nicht der einzige Anbieter einer Entwicklungsplattform mit einer eigenen Lösung für Chat-Bots mit künstlicher Intelligenz. Mit der Chat-Bot-Plattform tritt Facebook in die Fußstapfen von Anbietern wie Telegram mit der quelloffenen Telegram Bot Platform (https://telegram.org) und App.ai mit der gleichnamigen Bot-Plattform für IoT-fähige Chat-Bots (https://api.ai).
Bei Telegram handelt es sich um eine Cloud-basierte Messaging-App für Mobilgeräte und Desktop mit Schwerpunkt auf Sicherheit und Geschwindigkeit. App.ai deckt Mobilgeräte, tragbare Elektronik, Robotik, Autos und das intelligente Haus ab. Einige Bots integrieren sich sowohl in Facebook als auch mit Telegram (zum Beispiel http://orderbot.co zum Bestellen von Speisen).
Auch Microsoft hatte dieses Jahr ein eigenes Bot-Framework vorgestellt, doch fehlt dem Anbieter bisher ein eigenes soziales Netzwerk, um menschliche Gesprächspartner für die Bots zu finden. Microsoft experimentiert dennoch intensiv mit sozialen Netzen, darunter mit Twitter. Eines dieser Experimente, die öffentliche Bereitstellung eines Chat-Bots namens Tay auf der Basis künstlicher Intelligenz, ging auch prompt schief. Microsofts Chat-Bot engagierte sich in einer Echtzeit-Plauderei mit Twitter-Benutzern, anfangs sehr diplomatisch, höflich und respektvoll.
Bald war aber Schluss mit politischer Korrektheit. Microsofts AI-Engine hatte sich von dem schelmischen Benehmen einiger menschlicher Diskussionspartner von Tai schlechte Sitten angeeignet und begann prompt, widerliche Tweets zum Besten zu geben. Innerhalb von weniger als 24 Stunden musste Microsoft dem Twitter-Bot den sprichwörtlichen Stecker ziehen. Das PR-Desaster machte dennoch Schlagzeilen.
Die ersten praktischen Anwendungen von Chat-Bots sind unter anderem eben aus diesem Grund vergleichsweise simpel gestrickt: Die Benutzer können Informationen anfordern oder Bestellungen aufgeben, doch einen philosophischen Diskurs sieht Facebook bisher nicht vor. Auch Gruppenchats kommen derzeit noch nicht infrage. Alle Chat-Bots benötigen eine Genehmigung, um API-Aufrufe zu tätigen, und dürfen nicht mehr Berechtigungen zum Zugriff auf Informationen anfordern, als unbedingt nötig ist, um ihre jeweilige Aufgabe zu erfüllen.
Über 100.000 Entwickler arbeiten derzeit fieberhaft an eigenen Bots für Facebook Messenger, und ihre Bemühungen tragen schon erste Früchte. Trotz der relativen Simplizität der ersten Implementierungen gibt es unter den ersten Bots auch solche, die einen erheblichen Mehrwert bieten.

Bots für Facebook Messenger entwickeln

Die Entwicklung von Chat-Bots für Facebook setzt die Erstellung einer Facebook-App und einer Facebook-Seite voraus. Für die Verarbeitung des Kommunikationsaustauschs zeichnet im Backend ein Webserver verantwortlich.
In einem ersten Schritt müssen Sie die benötigten Facebook-Nodes anlegen. Erstellen Sie dazu eine neue Facebook-App unter https://developers.facebook.com/apps und eine neue Facebook-Seite unter Startseite und Seite erstellen. Ihre App können Sie dabei im Sandbox-Modus belassen und Ihre Seite braucht nicht öffentlich verfügbar zu sein. Das Profilfoto und der Name der App bilden die öffentliche Identität Ihres Facebook-Bots.
Wechseln Sie in den Abschnitt Add Product in den Einstellungen Ihrer App und aktivieren Sie hier den Facebook Messenger. Daraufhin erscheint ein zusätzlicher Eintrag in der linken Navigationsleiste der Seite mit den Einstellungen für Ihre Facebook-App, die Sie im nächsten Schritt konfigurieren sollten. Dazu müssen Sie ­eine Webhook-Integration mit einem gültigen URL-Endpoint aufsetzen.
Bei Webhooks handelt es sich um benutzer­definierte HTTP-Callbacks: ein Mechanismus
für die Zustellung von Benachrichtigungen über Ereignisse. Typischerweise werden diese Benachrichtigungen via HTTP-Anfragen vom Typ POST mit einer definierten Nutzlast, der sogenannten Payload, an einen API-Endpunkt abgewickelt. Der Vorteil dieser Implementierung besteht darin, dass keine persistente Verbindung aufrechterhalten werden muss. Es ist ein asynchrones Verfahren.
Um via Messenger zu kommunizieren, muss Ihre App in der Lage sein, folgenden Ereignisse zu empfangen:
  • Ereignisse vom Typ Authentifizierungs-Callback als Resultat des Aufrufs des Plug-ins Send to Messenger (messaging_optins),
  • Ereignisse vom Typ Zustellungs-Callback von Benachrichtigungen, die an Ihre Seite verschickt wurden (messages),
  • Ereignisse vom Typ Zustellungs-Callback von Benachrichtigungen, die Ihre Seite versandt hat (message_deliveries),
  • Ereignisse vom Typ Postback (messaging_postbacks) beim Anklicken der Postback-Schaltfläche einer strukturierten Nachricht mit einer in der Schaltfläche definierten Nutzlast (der sogenannten Payload).
Damit Ihre App diese Ereignisse empfangen kann, müssen Sie die Webhooks-Integration in den Einstellungen für Messenger aktivieren. Hierzu benötigen Sie einen Callback-URL, der via HTTPS zugänglich ist, und einen Verifizierungstoken, den Sie ebenfalls selbst festlegen. Diese beide Informationen tragen Sie bei Facebook in den Einstellungen Ihrer App im Abschnitt der Webhooks-Integration ein (Bild 8).
Abonnieren: Webhooks-Integration für den Facebook-Messenger-Bot (Bild 8)
Im unteren Bereich des Dialogs aktivieren Sie dann die zu abonnierenden Ereignisbenachrichtigungen (am besten gleich alle).
Bevor Sie allerdings die Schaltfläche Verify and Save in den Facebook-Einstellungen für die Webhooks-Integration anklicken, müssen Sie den Callback-URL einrichten. Für den Callback-URL benötigen Sie einen beliebigen externen Webserver mit Node.js, zum Beispiel auf einer Heroku- oder Nitrous-Instanz. Nach der Installation von Node.js richten Sie den NPM-Paketmanager ein. Im Fall von Heroku geschieht dies mittels:
sudo npm install npm -g
Danach erstellen Sie ein neues Projektverzeichnis und legen darin ein neues Node-Projekt an:
mkdir projektverzeichnis; cd projektverzeichnis
npm init
Die erforderlichen Abhängigkeiten lassen sich mit folgendem Befehl einrichten:
npm install express request body-parser --save
Der Verifizierungstoken wird nur einmal benötigt, um sicherzustellen, dass die Authentifizierung-Aufforderung tatsächlich von Facebook stammt.

Callback-URL

Den Callback-URL (zugänglich via HTTPS) müssen Sie dann mit Code versehen, der den von Ihnen festgelegten Verifizierungstoken durch die Übergabe einer challenge-Kennung bestätigen kann. Ein Beispiel für die Implementierung in Node.js illustriert das folgende Listing:
const express = require('express')
const bodyParser = require('body-parser')
const request = require('request')
const app = express()

app.set('port', (process.env.PORT || 5000))
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

app.get('/', function (req, res) {
    res.send('Willkommen beim Chat-Bot des Pizza-Lieferdienstes Soundso!')
})
app.get('/webhook/', function (req, res) {
    if (req.query['hub.verify_token'] === 'IHRVERIFIZIERUNGSTOKEN') {
        res.send(req.query['hub.challenge'])
    }
    res.send('Falsch! Der Token stimmt nicht mit der Einstellung im Abschnitt der Webhooks-Integration Ihrer App überein.')
})
app.listen(app.get('port'), function() {
    console.log('Portnummer:', app.get('port'))
})
Zu beachten ist: In PHP werden Punkte in den Parameternamen in Unterstriche konvertiert:
<?php
$challenge = $_REQUEST['hub_challenge'];
$verify_token = $_REQUEST['hub_verify_token'];
if ($verify_token === 'IHRVERIFIZIERUNGSTOKEN') {
  echo $challenge;
}
$input = json_decode(file_get_contents('php://input'), true);
error_log(print_r($input, true));
Bei der challenge-Kennung handelt es sich um eine zufällige Zeichenkette, die der Verifizierungsanfrage von Facebook entstammt.
Indem Sie jetzt die Schaltfläche Verify and Save in den Facebook-Einstellungen für die Webhooks-Integration anklicken, senden Sie eine GET-Anfrage an Ihren Webhook.
Eine misslungene Integration beschert Ihnen bereits nach 15 Minuten die erste Warnung von Facebook. Sollte Ihr Webhook im Laufe der nachfolgenden 8 Stunden keinen 2XX-Erfolgsstatus liefern können, wird Facebook Ihren Chat-Bot einfach gnadenlos deaktivieren. Sollte Ihnen das einmal passieren, müssen Sie nicht nur den Webhook neu aufsetzen, sondern auch noch die App durch die Seite neu abonnieren lassen.
Um einen Zugangstoken für die Seite zu erzeugen, wählen Sie in den Einstellungen für Messenger die Facebook-Seite aus und fordern Sie die benötigten Berechtigungen zum Senden und Empfangen von API-Aufrufen an. Folgen Sie den Anweisungen, um eine Zulassung von Facebook für Ihren Chat-Bot anzufordern. Danach erhalten Sie einen API-Schlüssel für Ihre Facebook-Seite (Bild 9).
Geheim: Der API-Schlüssel der Facebook-Seite Ihrer App (Bild 9)
Wann immer Sie das zugehörige Menü erneut aktivieren, erhalten Sie einen neuen Token; alle zuvor erstellten Token sollten aber weiterhin funktionieren.
Um Aktualisierungen für die Seite zu erhalten, müssen Sie die App abonnieren. Dies erfolgt entweder grafisch im Abschnitt Webhooks der Messenger-Einstellungen oder mit Hilfe des API unter Angabe des zuvor erstellten Tokens (Bild 10):
Die Post geht ab: Die Messenger-App abonnieren (Bild 10)
curl -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<ZUGANGSTOKEN_DER_SEITE>"
Den Zugangstoken der Seite finden Sie in den Messenger-Einstellungen Ihrer App.

API-Endpunkt hinzufügen

Ihr Skript am Callback-URL des Webhooks sollte auf POST-Anfragen lauschen; fügen Sie hierzu einen API-Endpunkt der Datei index.js hinzu. Eine Beispielimplementierung des Callbacks, den eine an die Seite geschickte Benachrichtigung auslöst, können Sie dem folgenden Listing entnehmen:
app.post('/webhook/', function (req, res) {
    let messaging_events = req.body.entry[0].messaging
    for (let i = 0; i < messaging_events.length; i++) {
        let event = req.body.entry[0].messaging[i]
        let sender = event.sender.id
        if (event.message && event.message.text) {
            let text = event.message.text
            sendTextMessage(sender, "Sie haben die folgende Bestellung aufgegeben: " + text.substring(0, 200) +  "Ist das richtig? Bitte antworten Sie: Ja oder Nein.")
        }
    }
    res.sendStatus(200)
})
const token = "<ZUGANGSTOKEN_DER_SEITE>"
Das Skript untersucht alle Objekte in der messaging-Eigenschaft (es lassen sich mehrere in einem Webhook-Aufruf übergeben), und wann immer es den Text einer Benachrichtigung identifizieren kann, gibt es diesen mit Hilfe der Funktion sendTextMessage() zurück. Den Code dieser Funktion können Sie dem folgenden Listing entnehmen:
function sendTextMessage(sender, text) {
   let messageData = { text:text }
   request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {access_token:token},
    method: 'POST',
    json: {
      recipient: {id:sender},
      message: messageData,
    }
  }, function(error, response, body) {
    if (error) {
      console.log('Die Nachricht konnte leider nicht gesendet werden: ', error)
    } else if (response.body.error) {
      console.log('Fehler: ', response.body.error)
    }
  })
}
Navigieren Sie abschließend zu der Facebook-Seite, die Sie erstellt hatten, und senden Sie mit Hilfe von Messenger (Schaltfläche Nachricht senden) eine Benachrichtigung an Ihren Bot, so wie dies auch ein normaler Endbenutzer machen würde (Bild 11).
Benachrichtigt: Besuchen Sie die Facebook-Seite und senden Sie eine Anfrage an Ihren Bot (Bild 11)
Der Chat-Bot müsste die Anfrage automatisch beantworten.
Facebook Messenger kann im Übrigen auch strukturierte Nachrichten verarbeiten und Postbacks auslösen. In strukturierten Nachrichten – zum Beispiel als Facebook-Karten – lassen sich unter anderem Objekte wie Bilder oder klickbare Navigationselemente übertragen.
Bei Postbacks handelt es sich um Backend-Aufrufe des Webhooks in Reaktion auf das Anklicken einer Schaltfläche durch den Benutzer. Postbacks beinhalten eine definierte Payload. Sie können genutzt werden, um eine Bestellung mit einem einzigen Klick komfortabel zu bestätigen oder den Benutzer an eine Webapplikation außerhalb von Facebook weiterzuleiten, zum Beispiel in den Webshop des Anbieters. Eine strukturierte Nachricht in Form einer Facebook-Karte ­illustriert das folgende Listing:
function sendGenericMessage(sender) {
  let messageData = {
  "attachment": {
   "type": "template",
   "payload": {
    "template_type": "generic",
    "elements": [{
     "title": "Produktseite 1 von 2",
     "subtitle": "Element #1 in der hscroll-Reihe",
     "image_url": "http://webundmobile.de/img/01.png",
     "buttons": [{
      "type": "web_url",
      "url": "https://www.messenger.com",
      "title": "Web-URL"
     }, {
      "type": "postback",
      "title": "Postback",
      "payload": "Die Payload für das erste Element in einer ganz gewöhnlichen Wolke",
     }],
    }, {
     "title": "Produktseite 2 von 3",
     "subtitle": "Element #2 in der hscroll-Reihe",
     "image_url": "http://webundmobile.de/img/02.png",
     "buttons": [{
      "type": "postback",
      "title": "Postback",
      "payload": "Die Payload für das zweite Element in einer ganz gewöhnlichen Wolke",
     }],
    }]
   }
  }
  }
  request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {access_token:token},
    method: 'POST',
    json: {
      recipient: {id:sender},
      message: messageData,
    }
  }, function(error, response, body) {
    if (error) {
      console.log('Die Nachricht konnte leider nicht verschickt werden: ', error)
    } else if (response.body.error) {
      console.log('Fehler: ', response.body.error)
    }
  })
}
Beim Einsatz strukturierter Facebook-Nachrichten müssen Sie allerdings das Webhook-API an Ihrem URL-Endpoint anpassen, damit das Kartenschieben auch wirklich funktioniert:
app.post('/webhook/', function (req, res) {
  let messaging_events = req.body.entry[0].messaging
  for (let i = 0; i < messaging_events.length; i++) {
   let event = req.body.entry[0].messaging[i]
   let sender = event.sender.id
   if (event.message && event.message.text) {
    let text = event.message.text
    if (text === 'Diavola') {
      sendGenericMessage(sender)
      continue
    }
    sendTextMessage(sender, "Sie haben die folgende Bestellung eingetippt: " + text.substring(0, 200))
   }
   if (event.postback) {
    let text = JSON.stringify(event.postback)
    sendTextMessage(sender, "Sie haben die folgende Bestellung aufgegeben: "+text.substring(0, 200), token)
    continue
   }
  }
  res.sendStatus(200)
})
Der Benutzer kann nun wahlweise den Textbefehl Diavola eintippen oder die gewünschte Pizza mit einem Klick beziehungsweise Tap auswählen. Im letzteren der beiden Fälle findet ein Postback statt.
Dadurch kann Benutzer mit dem Facebook-Bot Ihrer Seite auf zweierlei Art und Weise interagieren: sowohl mit Hilfe der Tastatur als auch mit Hilfe des Mauszeigers.
Zu guter Letzt müssen Sie für Ihren Bot noch die Zulassung im Rahmen der Facebook-Plattform anfordern. Bis zur Freigabe durch Facebook können nur die Administratoren, Entwickler und Tester Ihrer Facebook-Seite Ihren Messenger-Bot auf die Probefahrt nehmen.
Erst nach der Zulassung durch Facebook können Sie den Bot allen Benutzern zur Verfügung stellen.

Integration mit Facebooks AI-Engine

Um in Ihren Facebook-Bots die Fähigkeit zur Erkennung natürlicher Sprache in eingetippten Textnachrichten Ihrer Benutzer zu verbauen, kommen Sie um den Einsatz künstlicher Intelligenz (Artificial Intelligence oder kurz AI) nicht herum.
Das Ganze hört sich viel komplizierter an als die eigentliche Entwicklungsarbeit. Die schwere Last der Analyse natürlicher Sprache übernimmt die AI-Engine im Backend: Die benötigten Lernfähigkeiten kann sich Ihr Facebook-Bot schlicht dadurch aneignen, dass Sie ihn zum Beispiel via Wit.ai an das AI-Backend anbinden.
Bei Wit.ai handelt es sich um einen Cloud-Dienst zur Verarbeitung natürlicher Sprache (NLP, Natural Language Processing) durch Facebook-Messenger-Bots.
Im Dashboard von Wit.ai erstellen Sie erst einmal den ersten prototypischen Nachrichtenaustausch zwischen einem idealen Anwender und Ihrem Bot und definieren die zu erwartenden Parameter. Melden Sie sich bei Wit.ai mit Ihrer Face­book- oder GitHub-Identität an. Dadurch erhalten Sie einen Zugriff auf die Wit.ai-Konsole und können dort Ihre Apps einrichten. Beim Erstellen einer App können Sie als Sprache Deutsch wählen.
Innerhalb der Wit.ai-Konsole können Sie jetzt das erste Gespräch eines Endanwenders mit Ihrem Bot aufzeichnen. Bei diesem Kommunikationsaustausch handelt es sich derzeit schlicht und ergreifend um einen Text-Chat. Diese sogenannte Story dient als eine Vorlage für den Bot für einen wünschenswerten Gedankenaustausch zwischen dem Bot und dem Endanwender.
Es wäre unrealistisch zu meinen, dass sich die Benutzer einer Facebook-App strikt an eine Gesprächsvorlage halten werden. Ein Benutzer könnte dem Bot eine Vielzahl möglicher Anfragen im Chat zutexten, diese kreativ formulieren und zudem auch noch Tippfehler oder grammatische Fehler einbauen. Deswegen braucht die AI-Engine nicht eine, sondern möglichst viele Varianten eines prototypischen Chats, und auch dann muss sie etwas Flexibilität an den Tag legen.
Wit.ai führt hierzu das Konzept der sogenannten Intents (Absichten). Bei einem Intent handelt es sich um nichts anderes als die Bedeutung, die einer Vielzahl von Ausdrucksweisen zugrunde liegen kann. Der Chat-Bot sollte idealerweise erkennen können, dass es sich in jedem dieser Fälle um eine gültige Anfrage handelt, und zwar im Grunde genommen sogar um dieselbe Anfrage. Der Bot soll in jedem Szenario richtig reagieren. Tragen Sie so viele alternative Varianten einer Anfrage für ein Intent ein, wie es Ihnen plausibel erscheint.
Nach einigen Minuten Verarbeitungszeit durch die Bot-Engine in der Cloud kennzeichnet der Dienst die einzelnen Gesprächsvorlagen (Stories) mit einem grünen Lämpchen: Die Engine hat diese Muster gelernt und kann sie korrekt verarbeiten. Davon können Sie sich in einem Chat-Fenster selbst vergewissern (Bild 12).
Im grünen Bereich: Gesprächsszenarien, welche die AI-Engine versteht und verarbeiten kann, werden grün gekennzeichnet (Bild 12)
So weit, so gut. Was passiert aber, wenn der Benutzer eine Schreibweise verwendet, die sich von den eingetragenen Gesprächsabläufen geringfügig unterscheidet? Dank künstlicher Intelligenz besitzt die Wit.ai-Engine die Fähigkeit, aus allen Apps, die sie bedient, und aus allen Benutzer-Interaktio­nen zu lernen. In der Praxis muss der Kommunikationsaustausch nicht zwangsläufig genau nach Plan ablaufen: Auch eine abgeänderte Reihenfolge zuvor trainierter Anfragen wird durch den Bot in der Regel verstanden und korrekt ausgewertet. Je mehr Anfragen die Bot-Engine verarbeitet, ­desto mehr Variationen des Gesprächsablaufs kann sie abdecken.
Als Nächstes müssen Sie dem Bot beibringen, aus den Anfragen des Benutzers nützliche Informationen zu extrahieren, sich diese bestätigen zu lassen und gegebenenfalls Fragen zu stellen, um die Bestellung zu vervollständigen. Hierzu gilt es, Objekte zu definieren.
Auf die Frage des Bots beispielsweise nach der Art der Speise antwortet der Benutzer mit einem gängigen Namen einer gewünschten Pizza. Diese Information muss der Bot jetzt richtig zuordnen. Dabei ist es erforderlich, mehrere Namen und auch alternative Schreibweisen zu berücksichtigen.
Um das gewünschte Verhalten des Bots zu konfigurieren, wählen Sie in der Antwort des Benutzers den Namen der Pizza aus und erzeugen Sie einen neuen Objekttyp namens pizza, indem Sie diese Zeichenkette in das Feld Add new entity eintippen. Dadurch kennzeichnen Sie Margherita als ein Objekt aus dem Array pizza. Wiederholen Sie diesen Vorgang für andere Pizzasorten.
Um ein so definiertes Objekt in dem Kontext des Bots zu erfassen, klicken Sie in das Eingabefeld Add context field der merge-Funktion des Chat-Bots hinein und tragen dort den Namen des betreffenden Objekts ein. Die auf diese Weise erfassten Objekte kann der Bot jetzt nutzen, wenn er mit dem Benutzer über seine Bestellung chattet. Um diese Funktionsfähigkeit des Bots zu testen, können Sie in dem Dokumentfenster des Webbrowsers probeweise einen Chat mit Ihrem Bot führen.
Messenger-Bots integrieren sich nicht nur in die zugehörige Facebook-Seite, sondern lassen sich mit Hilfe eines Facebook-Plug-ins unter Angabe des Graph API in der Version 2.6 auch in externe Webseiten einbauen:
<body>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '<APP_ID>',
      xfbml      : true,
      version    : 'v2.6'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.faocebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
Ein Send-To-Messenger-Plug-in löst einen Authentifizierungs-Callback aus:
<div class="fb-send-to-messenger" 
  messenger_app_id="ID_der_Facebook-App"
  page_id="ID_der_Facebook-Seite"
  data-ref="bis_zu_50-Zeichen-langer_Übergabeparameter"
  color="blue"
  size="standard"></div>
Ein Message-Us-Plug-in löst einen Nachricht-Erhalten-Callback aus.
<div class="fb-messengermessageus" 
  messenger_app_id="ID_der_Facebook-App"
  page_id="ID_der_Facebook-Seite"
  color="blue"
  size="standard" ></div>

Das jähe Ende von Parse

Parse, Facebooks eigenes Backend für die standardisierte Bereitstellung von Serverdiensten an mobile Anwendungen, legte der Anbieter im Januar 2016 zum alten Eisen. Bestehende Apps sollen bis Januar 2017 unverändert funktionieren, doch danach wird Facebook endgültig „den Stecker ziehen“. Entwickler, die ihre Apps auf Parse aufgebaut haben - alleine im Jahre 2014 waren es bereits eine halbe Million - stehen daher bald vor einem Problem.

Alternative Dienste, die Parse-ähnliche Funktionalität anbieten, beinhalten Amazon Web Services, Softlayer, Azure und Google App Engine.

Im Hinblick auf die Graph API verspricht Facebook neuerdings eine kontinuierliche Unterstützung einer jeden Version im Zeitrahmen von vollen zwei Jahren nach der erstmaligen Veröffentlichung.
Tipp: Mit dem neu vorgestellten API Upgrade Tool von Facebook können Sie die Auswirkungen eines Upgrades auf die Funktionsfähigkeit Ihrer Apps untersuchen.

Ein Fertiggericht: Facebook Social Plugins

Zur Integration von sozialen Netzen in eine Website können Sie einen der offiziellen Module des jeweiligen Anbieters oder einen der zahlreichen externen Dienste und Plug-Ins verwenden.
Die offiziellen Facebook-Module, die so genannten Social Plug-Ins, finden Sie unter der Adresse:
http://developers.facebook.com/docs/plugins/?locale2=de_DE
Um eines dieser Module in Ihre Website zu integrieren wechseln Sie hier zur Detailseite der gewünschten Erweiterung und stellen Sie die wichtigsten Parameter unter Verwendung des integrierten Widgets ein. So erhalten Sie den benötigten Code für mehrere alternative Methoden der Anbindung. Weitere Anpassungen des gewünschten Moduls können Sie anhand der Detailanleitung in einem Code-Editor Ihrer Wahl anpassen.
Die einfachsten Facebook-Plug-Ins basieren auf einem iFrame, den Sie ganz einfach in Ihre Webseite einbinden; einige Module verwenden wiederum XFBML-Elemente (eXtended Facebook Markup Language) und setzen das JavaScript SDK voraus. Bei diesen Modulen müssen Sie von Facebook eine App-ID (appId) erhalten, indem Sie Ihre Website als eine Facebook-Applikation registrieren. Hierzu navigieren Sie zur Adresse: https://developers.facebook.com/apps und erstellen eine neue Facebook-App für das Web. Dabei handelt es sich um einen Eintrag Ihrer Website in der Facebook-Datenbank; sie brauchen nicht wirklich eine Applikation zu „entwickeln“. Die so erzeugte App-ID müssen Sie dann in dem Code-Abschnitt der Webseite eintragen, der das JavaScript SDK initialisiert. 

Chat-Bot-Verzeichnisse

Das erste umfassende Verzeichnis von Bots für Facebook-Messenger, getauft auf den Namen BotPages, ist unter der Adresse https://www.botpages.com/ verfügbar. In diesem Bot-Verzeichnis findet sich unter anderem Inspector, ein Analytics-Dienst für Messenger-Bots - kostenfrei bis 10.000 Benachrichtigungen pro Monat (https://inspector.botpages.com/signup). Benutzer der Messanging-Plattform Slack können außerdem unter der Adresse http://botstash.io/ Facebook-Bots mit Slack-Integration finden. Auch erste Generatoren keimen bereits auf. Unter dem Namen BotCommerce entsteht unter der Adresse http://www.botcommerce.io/ ein Chat-Bot-Generator für Magento und Shopify.

Fazit

Angesichts der anhaltenden Popularität sozialer Netze und deren vielseitigen, ausgereiften APIs stellt die Anbindung von Websites und mobilen Apps eine verlockende Möglichkeit dar, den gebotenen Funktionsumfang um extern erstellte Funktionalität zu erweitern und kontextabhängig um benutzereigene Daten wie Fotos anzureichern. Richtig konzipiert kann eine durchdachte Integration sozialer Netze nicht zuletzt auch zum erhöhten Markterfolg der betreffenden mobilen App oder Webanwendung beitragen.
Dokumente
Diesen Artikel als PDF lesen.



Das könnte Sie auch interessieren