Willkommen
Das Windows Live Messenger Web Toolkit ist da - schön, dass Sie hierhin gefunden haben!
Hier finden Sie alle Hintergrund-Informationen zum Windows Live Messenger Web Toolkit.
Dazu Installationsanleitungen in .NET bzw. C#, PHP 5 und Wordpress, womit Sie das Windows Live Messenger Web Toolkit schnell und sicher in Ihrer Webseite ausprobieren können.
Unser interaktives Tutorial zeigt Ihnen die interessantesten Funktionen, gleich mit Quelltext.
Ein Blick in die Ressourcen zeigt ihnen die interessantesten Links, Videos und Webseiten.
Die Inhalte dieser Seite im Überblick:
Im Tab Einführung - diesem Tab - finden Sie eine Beschreibung, was das Windows Live Messenger Web Toolkit ist.
Dazu eine Erläuterung, für welche Webseiten-Betreiber (Anwendungs-Szenarien) und welche Nutzer (Nutzerzahlen) es geeignet ist.
Und schließlich, welche Voraussetzungen es an Ihre Technik stellt.
Im Tab Interaktives Tutorial finden Sie die wichtigsten UI-Controls, mit denen sie Messenger-Funktionen in Ihre Webseite integrieren können - jeweils mit einer Beschreibung, einer Demo und dem dazu gehörenden Quelltext.
Diese Funktionen werden Sie ausprobieren können, sobald Sie das Windows Live Messenger Web Toolkit einmal installiert haben.
In den Tabs Installation C#, Installation PHP5 und Installation PHP-Plugin finden Sie Tutorials, mit denen wir Sie Schritt für Schritt durch den Installations-Prozess in Ihrem .NET oder PHP-System leiten.
Das Tab Installation Wordpress gibt Ihnen wichtige Hinweise zur Installation in Ihrem Wordpress-Blog.
Im Tab Ressourcen schließlich finden Sie weiterführende Links, eine Liste uns bekannter Seiten mit Windows Live Messenger Web Toolkit und Videos zum Thema.
Aber lesen Sie zunächst, was das Windows Live Messenger Web Toolkit überhaupt ist:
Was ist das Windows Live Messenger Web Toolkit?
Mit dem Windows Live Messenger Web Toolkit können Sie einen vollständigen Windows Live Messenger und verschiedene Windows Live- und Windows Live Messenger-Funktionen besonders einfach in Ihre Webseite integrieren.
Dieser vollständige
Windows Live Messenger ist die sogenannte
Web Bar, die sich - ohne Ihr Layout zu beeinträchtigen - an den unteren Rand Ihrer Webseite legt:
Dazu - und auch ohne die
Web Bar - können Sie auch nützliche und Ihren Nutzern wohlbekannte Messenger-Elemente in Ihr Layout integrieren - vom SignIn-Button über Display-Bilder, -Namen und editierbare Status-Informationen bis hin zu ganzen Kontaktlisten für ihre Weiterempfehlen-Funktionen.
Hinweis: Natürlich müssen Sie Ihren Nutzern diese Funktionen nicht aufzwingen. Praktische If-Else-Konstruktionen wie "Wenn der Nutzer angemeldet ist" lassen Sie sicherstellen, dass nur bestimmte Funktionen, Inhalte oder HTML-Codes nicht-eingeloggten Nutzern angezeigt werden.
So können Sie z.B. nur einen bestimmten Platz für den Anmelde-Button reservieren und Ihre Nutzer entscheiden, ob sie die Windows Live Messenger Web Toolkit-Funktionen nutzen möchten.
Für wen ist das Windows Live Messenger Web Toolkit geeignet?
Nutzer:
Weltweit gibt es über 320 Mio. Mitglieder der Windows Live-Community - in Deutschland sind dies über 10 Mio. Mitglieder.
All diese können können Ihre Windows Live Messenger Web Toolkit-Funktionen umgehend nutzen, ohne sich extra registrieren zu müssen!
Seiten-Betreiber:
Es gibt hauptsächlich drei Bereiche, in denen Ihnen das
Windows Live Messenger Web Toolkit nützlich sein wird:
Screen-Time:
Halten Sie Ihre Nutzer länger auf Ihrer Seite, indem Sie sie bei Ihnen chatten lassen.
Das Zuhause-Gefühl:
Begrüßen Sie Ihre Nutzer mit ihrem Avatar und Namen - und geben Sie Ihren Nutzern die aus Windows Live gewohnten Status-Funktionen zur Hand. Funktionen, die diese kennen und schätzen!
Kontakte nutzen:
Indem Sie Ihren Nutzern deren persönliches Windows Live-Adressbuch anbieten, können diese mit 2-3 Klicks Ihre Seite weiterempfehlen und im Messenger diskutieren.
Zudem ist nicht unwahrscheinlich, dass die Inhalte Ihrer Webseite Gesprächsthema in den Chats Ihrer Nutzer werden.
Voraussetzungen für das Einbinden des Windows Live Messenger Web Toolkits
Das
Windows Live Messenger Web Toolkit funktioniert auf den meisten Servern.
Unterstützte Sprachen sind:
-
C# (.NET)
-
Java
-
Perl
-
PHP5
-
Python
-
Ruby
-
VB
Interaktives Tutorial: UI-Controls
Das interaktive Tutorial zeigt Ihnen die wichtigsten UI-Controls mit Beschreibung, Demo und Quelltext.
Sie sind angemeldet: Viel Spaß!
Melden Sie sich hier an, damit Sie die Funktionen in den folgenden Abschnitten Ihren Anmeldungsdaten entsprechend sehen können:
Für eine Windows Live ID registrieren (3 Minuten, kostenlos)
Eine der in unseren Tutorials beschriebenen Installationen vorausgesetzt, können Sie den jeweiligen Quelltext direkt in Ihr HTML kopieren, um das Control bei Ihnen einzubauen.
Die folgenden Funktionen sind nur ein kleiner Ausschnitt der Möglichkeiten - aber die wahrscheinlich interessantesten.
All diese Funktionen können Sie auch in einer typischen Konstellation sehen: auf unserer
Beispiels-Webseite.
SignIn-Button
SignIn Button einbinden. Der Button wird nicht angezeigt, wenn Sie eingeloggt sind:
Sie sind eingeloggt - daher wird Ihnen der Button nicht angezeigt.
Bitte melden Sie sich zunächst an:
Registrieren
<msgr:sign-in></msgr:sign-in>
Display-Name
Zeigt den Display-Namen des eingeloggten Nutzers an (oder ist versteckt, wenn der Nutzer nicht eingeloggt ist):
<msgr:display-name cid="$user"></msgr:display-name>
Sie können den Namen des Nutzers auch in einer Text-Passage anzeigen:
Hallo , wie geht's?
<msgr:display-name cid="$user" editable="false" linked="false"></msgr:display-name>
Oder als Link zu seinem
Windows Live-Profil anzeigen:
Hallo , willkommen zurück!
<msgr:display-name cid="$user" linked="true"></msgr:display-name>
Der Displayname kann onclick editierbar gemacht werden:
<msgr:display-name cid="$user" editable="true"></msgr:display-name>
Ist der Nutzer nicht angemeldet, kann ein Platzhalter angezeigt werden:
<msgr:display-name cid="$user" default="Max Mustermann"></msgr:display-name>
Display-Bild
Zeigt das Display-Bild des eingeloggten Nutzers oder einen Platzhalter an.
Das Display-Bild kann in drei Größen angezeigt werden:
small,
medium und
large:
<msgr:display-picture cid="$user" size="small"></msgr:display-picture>
<msgr:display-picture cid="$user" size="medium"></msgr:display-picture>
<msgr:display-picture cid="$user" size="large"></msgr:display-picture>
Das Display-Bild kann auch ohne den Rahmen (der farblich den Status des Nutzers anzeigt) eingebunden werden:
<msgr:display-picture cid="$user" presence-enabled="false"></msgr:display-picture>
Status
Zeigt den (editierbaren) Status des Nutzers an:
<msgr:status cid="$user"></msgr:status>
Personal Message
Zeigt die (editierbare) Personal Message des Nutzers an:
<msgr:personal-message cid="$user"></msgr:personal-message>
Kontakt hinzufügen
Zeigt einen Button zum Hinzufügen eines neuen Kontakts an:
<msgr:add-contact></msgr:add-contact>
Kontaktliste
Zeigt die Kontakte des eingeloggten Nutzers in einer Liste an:
<msgr:contact-list></msgr:contact-list>
If-Else-Statement
Nur wenn der Nutzer eingeloggt ist, wird ihm das enthaltene HTML angezeigt:
<msgr:if cid="$user" condition="online">
Beendet das If-Online-Statement:
</msgr:if>
Beispiel:
<msgr:if cid="$user" condition="online">
Sie sind online!
</msgr:if>
Um ein If-Else-Statement zu erhalten, setzen Sie das Else-Control in ein If-Control:
<msgr:if cid="$user" condition="available">
Sie sind im Messenger verfügbar (available)
<msgr:else>
Sie sind nicht im Messenger verfügbar
</msgr:else></msgr:if>
Web Bar
Zeigt die Web Bar an:
Unten am Browser-Rand - das ist die Webbar!
Bitte melden Sie sich zunächst an:
Registrieren
<msgr:bar></msgr:bar>
Tutorial: Installation in C# (.NET)
Unsere Freunde von
Gimas haben ein kurzes Tutorial erstellt, welches wir Ihnen hier anbieten dürfen:
Es erklärt die Integration des Windows Live Messenger Web Toolkit in einer .NET-Umgebung mittels C# in Visual Studio 2005/2008 oder Visual Web Developer 2005/2008 Express.
Nach drei vorbereitenden Schritten brauchen Sie nur noch ein paar Zeilen Code in Ihrem Projekt ergänzen, schon sind Sie fertig :)
Dateien herunterladen und anlegen
Das Team von Windows Live hat ein SDK herausgebracht, auf dem diese Installation aufsetzen wird.
Starten Sie
Visual Studio 2005/2008 oder
Visual Web Developer 2005/2008 Express.
Öffnen Sie die Beispiels-Webseite über
Datei > Öffnen > Webseite:
<Entpackter Ordner>\WebToolkit\GettingStarted\CSharp\
Wenn Sie die folgende Meldung sehen, bestätigen Sie diese mit
Ja:
Erstellen einer lokalen Test-Domain
Damit Sie die Web-Applikation auch lokal testen können, müssen ein paar Einstellungen am Server vorgenommen werden.
Da für die
Windows Live Messenger Web Toolkit-Applikation eine
Domain und eine
Return URL angegeben werden muss, erstellen Sie wie folgte eine Domain, die auf localhost (127.0.0.1) verweist:
Öffnen Sie mit dem Editor die Datei hosts im Ordner \Windows\System32\drivers\etc\.
Damit Sie die Datei hosts bearbeiten können, benötigen Sie unter Windows Vista Administrator-Rechte!
Legen Sie einen (nur lokal gültigen) DNS-Eintrag an.
Verwenden Sie für dieses Projekt die Domain wlm-wt.example.com.
Konfiguration des Entwicklungs-Webservers des Web-Projekts
Damit Sie die Web-Applikation auch lokal testen können, müssen Sie Ihr Webprojekt entsprechend einstellen.
Klicken Sie im Projekt-Explorer auf das Webprojekt.
Stellen Sie den Server auf
Dynamische Ports: NEIN und
Port:80:
Registrieren Sie Ihr Windows Live Messenger Web Toolkit
Für jede Domain, auf der Sie das Windows Live Messenger Web Toolkit verwenden möchten, benötigen Sie jeweils eine Application-ID.
Geben Sie Projekt-Namen und -Beschreibung an. Geben Sie als Domain
wlm-wt.example.com und als Return-URL
http://wlm-wt.example.com/CSharp ein.
Speichern Sie Ihre Eingaben und notieren Sie sich die nun angezeigten Application-ID und Secret-Key.
Einstellungen der Webconfig
Die bei der Registrierung erhaltenen Angaben müssen nun auf Ihre Webprojekt übertragen werden.
Gehen Sie zurück in ihr Web-Projekt und ersetzen Sie in der Webconfig die Angaben
%%YOURAPPID%% und
%%YOURAPPKEY%% durch die eben notierten
Application-ID und
Secret-Key:
.jpg)
Starten der Test-Applikation
Ihre Test-Applikation kann nun gestartet werden!
Starten Sie nun Ihr Test-Projekt durch Klicken auf den Play-Button.
Fertig :)
Tutorial: Installation in PHP5
Dieses Tutorial erklärt die Integration des Windows Live Messenger Web Toolkit in PHP5.
Nach vier vorbereitenden Schritten brauchen Sie nur noch ein paar Zeilen Code in Ihrer HTML-Datei ergänzen, schon sind Sie fertig :)
Achtung: PHP4 wird nicht unterstützt! Welche PHP-Version auf Ihrem Server installiert ist, können Sie mit der
phpinfo()-Funktion herausfinden.
Sollten Sie noch PHP4 verwenden, sollten Sie ohnehin über ein Upgrade nachdenken...
Tipp: Einige Provider erlauben ein PHP-Upgrade per HTACCESS, z.B.
All-inkl (AddHandler php5-cgi .php) und
1&1 (AddType x-mapp-php5 .php).
Vorbereitung: Benötigte PHP-Libraries
Ihre PHP5-Installation muss die PHP-Libraries mhash, mcrypt und curl beinhalten.
Diese Libraries sind in den meisten PHP-Installationen bereits enthalten.
Wenn Sie sich nicht sicher sind, schauen Sie mit
phpinfo() nach.
Wenn Sie diese Libraries nicht installiert haben, hilft Ihnen die
PHP-Funktionsreferenz weiter.
Vorbereitung: Notwendige Dateien herunterladen
Das Team von Windows Live hat ein SDK herausgebracht, auf dem diese Installation aufsetzen wird.
Legen Sie einen neuen Ordner in dem Root-Verzeichnis Ihrer Webseite an und benennen Sie ihn wlmwt.
Finden Sie den Ordner samples.zip/WebToolkit/GettingStarted/PHP und kopieren Sie seine Inhalte in den gerade erstellten Ordner wlmwt.
Verschieben Sie die Datei
refreshmessengertoken.php ein Verzeichnis nach oben (also in das Root-Verzeichnis Ihrer Webseite).
Beispielhafte Ordnerstruktur:
Vorbereitung: Registrieren Sie Ihr Windows Live Messenger Web Toolkit
Für jede Domain, auf der Sie das Windows Live Messenger Web Toolkit verwenden möchten, benötigen Sie jeweils eine Application-ID.
Geben Sie Projekt-Namen und -Beschreibung an. Geben Sie als Domain z.B.
wlm-wt.example.com und als Return-URL
http://wlm-wt.example.com/ ein.
Speichern Sie Ihre Eingaben und notieren Sie sich die nun angezeigten Application-ID und Secret-Key.
Vorbereitung: Konfigurations-Dateien anpassen
Nun müssen Sie ein paar Konfigurationen vornehmen, damit sich Ihre Installation mit der gerade registrierten Applikation verbinden kann.
Öffnen Sie die Datei
wlmwt/conf/settings.xml und ersetzen Sie
%%YOURAPPID%% durch die notierte
Application ID sowie
%%YOURAPPKEY%% durch den notierten
Secret Key. Speichern Sie die Datei.
Sollte Ihnen das Speichern verweigert werden, öffnen Sie mit Rechtsklick das Kontext-Menü, wählen Sie Eigenschaften und entfernen Sie das Häkchen bei Schreibgeschützt.
Damit das gesamte Windows Live Messenger Web Toolkit in einem Unterordner liegen kann, müssen noch einige Pfad-Angaben angepasst werden:
Öffnen Sie die Datei
wlmwt/lib/settings.php und ersetzen Sie den
. in Zeile 8 durch
wlmwt.
In dieser Zeile
$KEYFILE = './conf/settings.xml';
soll damit folgendes stehen:
$KEYFILE = 'wlmwt/conf/settings.xml';
Öffnen Sie die Datei
refreshmessengertoken.php.php und ergänzen Sie die Pfadebene
wlmwt/ in Zeile 18 und 19.
In diesen Zeilen
include 'lib/settings.php';
include 'lib/windowslivelogin.php';
soll damit folgendes stehen:
include 'wlmwt/lib/settings.php';
include 'wlmwt/lib/windowslivelogin.php';
Einbindung: Applikation initialisieren
Ganz am Anfang der HTML-Datei muss die Library geladen und konfiguriert werden.
Binden Sie dafür diesen Code
in Zeile 1 Zeichen 0 ein:
<?php
// Settings und Funktionen laden
include "wlmwt/lib/settings.php";
include "wlmwt/lib/windowslivelogin.php";
// Dateipfade Ihrer WLMWT-Installation
$KEYFILE = "wlmwt/conf/settings.xml";
$_PRIVACY_URL = "wlmwt/Privacy.html";
$_CHANNEL_URL = "wlmwt/Channel.html";
$_TOKEN_URL = "refreshmessengertoken.php";
// Windows Live ID Delegated Authentication
$wll = WindowsLiveLogin::initFromXml($KEYFILE);
$_APP_VERIFIER = $wll->getAppVerifier();
?>
Speichern Sie die Datei.
Einbindung: Das HTML-Tag ergänzen
Das HTML-Tag muss angepasst werden, um die Applikation zu initialisieren.
Ergänzen Sie das HTML-Tag <html> am Anfang Ihrer HTML-Datei mit diesem Code um dieses Attribut:
xmlns:msgr="http://messenger.live.com/2009/ui-tags"
Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:msgr="http://messenger.live.com/2009/ui-tags">
Einbindung: Javascript-Dateien in den Head einbinden
Im Head Ihres HTMLs müssen Javascript-Dateien hinzugeladen werden.
Kopieren Sie diese Codes an das Ende des Heads (direkt vor </head>):
<script language="javascript" src="http://www.wlmessenger.net/api/3.0/loader.js"></script>
<script language="javascript">Microsoft.Live.Core.Loader.load(['messenger.ui', 'messenger.ui.styles.core']);</script>
Einbindung: Am Anfang des Bodys das App starten
Nun kann die Applikation geladen werden.
Kopieren Sie diesen Code an den Anfang des Bodys - also direkt hinter <body>:
<msgr:app id="appTag"
application-verifier-token="<?php echo $_APP_VERIFIER; ?>"
privacy-url="<?php echo $_PRIVACY_URL; ?>"
channel-url="<?php echo $_CHANNEL_URL; ?>"
token-url="<?php echo $_TOKEN_URL; ?>">
</msgr:app>
Einbindung: Am Ende des Bodys die Web Bar einbinden (optional aber empfohlen)
Die Web Bar ist die Leiste am unteren Rand des browsers und enthält einen vollständigen Messenger.
Um die Webbar zu integrieren, kopieren Sie diesen Code an das Ende des Bodys - also direkt vor </body>:
<msgr:bar></msgr:bar>
Da die Webbar unten an Ihrer Webseite heftet, müssen Sie u.U. ein wenig Abstand zwischen Ihre Seite und den unteren Browserrand bringen.
In den meisten Fällen sollte dies mit den vier Zeilenumbrüchen erledigt sein.
Kopieren Sie diese vor den Code der Webbar:
<br /><br /><br /><br />
Fertig :)
Sie können Ihre Windows Live Messenger Web Toolkit-Installation nun hochladen und testen!
Tutorial: Installation mit dem PHP5-Plugin
Es geht noch einfacher - mit unserem PHP5-Plugin!
Als weniger versierter Entwickler erleichtert Ihnen das Plugin die Arbeit sehr, da Sie nur noch PHP-Funktionen an jenen Stellen aufrufen müssen, an denen Sie das Web Toolkit einbinden möchten.
Als versiertem Entwickler steht Ihnen das Plugin als Vorlage für Ihre persönliche Web Toolkit-PHP-Library zur Verfügung, mit der Sie Ihre Codes pflegeleicht kapseln können. Wie Sie dafür die Datei wlmwt/plugin.php anpassen müssen, finden Sie sicher schnell heraus ;)
Bedenken Sie, dass dieses Plugin nur einen beschränkten Funktionsumfang des
Windows Live Messenger Web Toolkit unterstützt.
Allerdings können Sie die nicht unterstützten Funktionen problemlos durch die im Abschnitt
Interaktives Tutorial beschriebenen Codes und die Codes von
MSLiveLabs (Reiter 'Learn' klicken) ergänzen.
Achtung: PHP4 wird nicht unterstützt! Welche PHP-Version auf Ihrem Server installiert ist, können Sie mit der
phpinfo()-Funktion herausfinden.
Sollten Sie noch PHP4 verwenden, sollten Sie ohnehin über ein Upgrade nachdenken...
Tipp: Einige Provider erlauben ein PHP-Upgrade per HTACCESS, z.B.
All-inkl (AddHandler php5-cgi .php) und
1&1 (AddType x-mapp-php5 .php).
Vorbereitung: Benötigte PHP-Libraries
Ihre PHP5-Installation muss die PHP-Libraries mhash, mcrypt und curl beinhalten.
Diese Libraries sind in den meisten PHP-Installationen bereits enthalten.
Wenn Sie sich nicht sicher sind, schauen Sie mit
phpinfo() nach.
Wenn Sie diese Libraries nicht installiert haben, hilft Ihnen die
PHP-Funktionsreferenz weiter.
Vorbereitung: Notwendige Dateien herunterladen
Wir haben Ihnen ein Zip zusammengestellt, auf dessen Dateien diese Installation aufsetzen wird.
Legen Sie einen neuen Ordner in dem Root-Verzeichnis Ihrer Webseite an und benennen Sie ihn wlmwt.
Kopieren Sie seine Inhalte aus dem zip-Ordner in den gerade erstellten Ordner wlmwt.
Verschieben Sie die Datei
refreshmessengertoken.php ein Verzeichnis nach oben (also in das Root-Verzeichnis Ihrer Webseite).
Beispielhafte Ordnerstruktur:
Vorbereitung: Registrieren Sie Ihr Windows Live Messenger Web Toolkit
Für jede Domain, auf der Sie das Windows Live Messenger Web Toolkit verwenden möchten, benötigen Sie jeweils eine Application-ID.
Geben Sie Projekt-Namen und -Beschreibung an. Geben Sie als Domain z.B.
wlm-wt.example.com und als Return-URL
http://wlm-wt.example.com/ ein.
Speichern Sie Ihre Eingaben und notieren Sie sich die nun angezeigten Application-ID und Secret-Key.
Vorbereitung: Konfigurations-Dateien anpassen
Nun müssen Sie eine Konfiguration vornehmen, damit sich Ihre Installation mit der gerade registrierten Applikation verbinden kann.
Öffnen Sie die Datei
wlmwt/conf/settings.xml und ersetzen Sie
%%YOURAPPID%% durch die notierte
Application ID sowie
%%YOURAPPKEY%% durch den notierten
Secret Key. Speichern Sie die Datei.
Sollte Ihnen das Speichern verweigert werden, öffnen Sie mit Rechtsklick das Kontext-Menü, wählen Sie Eigenschaften und entfernen Sie das Häkchen bei Schreibgeschützt.
Einbindung: Das Plugin laden
Ganz am Anfang der HTML-Datei muss das Plugin geladen werden.
Ganz am Anfang Ihrer HTML-Datei - also in Zeile 1 - müssen Sie das Applikations-Plugin einbinden
<?php include "wlmwt/plugin.php"; ?>
Einbindung: Das HTML-Tag ergänzen
Das HTML-Tag am Anfang Ihrer HTML-Datei muss angepasst werden, um die Applikation zu initialisieren.
Ergänzen Sie das HTML-Tag <html> mit diesem Code um ein Attribut:
<?php wlmwtInclude("html"); ?>
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php wlmwtInclude("html"); ?>>
Einbindung: Javascript-Dateien in den Head einbinden
Im Head Ihrer HTML-Datei müssen Javascript-Dateien hinzugeladen werden.
Kopieren Sie diesen Code an das Ende des Heads (also direkt vor </head>):
<?php wlmwtInclude("head"); ?>
Einbindung: Am Anfang des Bodys das App starten
Nun kann die Applikation geladen werden.
Kopieren Sie diesen Code an den Anfang des Bodys - also direkt nach <body> - Ihres HTMLs:
<?php wlmwtInclude("body"); ?>
Einbindung: Am Ende des Bodys die Webbar einbinden (optional)
Die Web Bar ist die Leiste am unteren Rand des browsers und enthält einen vollständigen Messenger.
Um die Webbar zu integrieren, kopieren Sie diesen Code an das Ende des Bodys - also direkt vor </body>:
<?php wlmwtShow("webbar"); ?>
Da die Webbar unten an Ihrer Webseite heftet, müssen Sie u.U. ein wenig Abstand zwischen Ihre Seite und den unteren Browserrand bringen.
In den meisten Fällen sollte dies mit den vier Zeilenumbrüchen erledigt sein.
Kopieren Sie diese vor den Code der Webbar:
<br /><br /><br /><br />
Fertig :)
Sie können Ihre Windows Live Messenger Web Toolkit-Installation nun hochladen und testen!
Tutorial: Installation in Wordpress
Dieses Tutorial erklärt die Integration des Windows Live Messenger Web Toolkit in Wordpress.
Nach vier vorbereitenden Schritten brauchen Sie nur noch ein paar Zeilen Code in Ihrem Theme ergänzen, schon sind Sie fertig :)
Achtung: PHP4 wird nicht unterstützt! Welche PHP-Version auf Ihrem Server installiert ist, können Sie mit der
phpinfo()-Funktion herausfinden.
Sollten Sie noch PHP4 verwenden, sollten Sie ohnehin über ein Upgrade nachdenken...
Tipp: Einige Provider erlauben ein PHP-Upgrade per HTACCESS, z.B.
All-inkl (AddHandler php5-cgi .php) und
1&1 (AddType x-mapp-php5 .php).
Vorbereitung: Benötigte PHP-Libraries
Ihre PHP5-Installation muss die PHP-Libraries mhash, mcrypt und curl beinhalten.
Diese Libraries sind in den meisten PHP-Installationen bereits enthalten.
Wenn Sie sich nicht sicher sind, schauen Sie mit
phpinfo() nach.
Wenn Sie diese Libraries nicht installiert haben, hilft Ihnen die
PHP-Funktionsreferenz weiter.
Vorbereitung: Notwendige Dateien herunterladen
Das Team von Windows Live hat ein SDK herausgebracht, auf dem diese Installation aufsetzen wird.
Legen Sie einen neuen Ordner in dem Root-Verzeichnis Ihrer Webseite an und benennen Sie ihn wlmwt.
Finden Sie den Ordner samples.zip/WebToolkit/GettingStarted/PHP und kopieren Sie seine Inhalte in den gerade erstellten Ordner wlmwt.
Verschieben Sie die Datei
refreshmessengertoken.php ein Verzeichnis nach oben (also in das Root-Verzeichnis Ihrer Webseite).
Beispielhafte Ordnerstruktur:
Vorbereitung: Registrieren Sie Ihr Windows Live Messenger Web Toolkit
Für jede Domain, auf der Sie das Windows Live Messenger Web Toolkit verwenden möchten, benötigen Sie jeweils eine Application-ID.
Geben Sie Projekt-Namen und -Beschreibung an. Geben Sie als Domain
wlm-wt.example.com und als Return-URL z.B.
http://wlm-wt.example.com/ ein.
Speichern Sie Ihre Eingaben und notieren Sie sich die nun angezeigten Application-ID und Secret-Key.
Vorbereitung: Konfigurations-Dateien anpassen
Nun müssen Sie ein paar Konfigurationen vornehmen, damit sich Ihre Installation mit der gerade registrierten Applikation verbinden kann.
Öffnen Sie die Datei
wlmwt/conf/settings.xml und ersetzen Sie
%%YOURAPPID%% durch die notierte
Application ID sowie
%%YOURAPPKEY%% durch den notierten
Secret Key. Speichern Sie die Datei.
Sollte Ihnen das Speichern verweigert werden, öffnen Sie mit Rechtsklick das Kontext-Menü, wählen Sie Eigenschaften und entfernen Sie das Häkchen bei Schreibgeschützt.
Damit das gesamte Windows Live Messenger Web Toolkit in einem Unterordner liegen kann, müssen noch einige Pfad-Angaben angepasst werden:
Öffnen Sie die Datei
wlmwt/lib/settings.php und ersetzen Sie den
. in Zeile 8 durch
wlmwt.
In dieser Zeile
$KEYFILE = './conf/settings.xml';
soll damit folgendes stehen:
$KEYFILE = 'wlmwt/conf/settings.xml';
Öffnen Sie die Datei
refreshmessengertoken.php.php und ergänzen Sie die Pfadebene
wlmwt/ in Zeile 18 und 19.
In diesen Zeilen
include 'lib/settings.php';
include 'lib/windowslivelogin.php';
soll damit folgendes stehen:
include 'wlmwt/lib/settings.php';
include 'wlmwt/lib/windowslivelogin.php';
Einbindung: Applikation initialisieren
Ganz am Anfang der HTML-Datei muss die Library geladen und konfiguriert werden.
Binden Sie dafür diesen Code
in Zeile 1 Zeichen 0 ein:
<?php
// Settings und Funktionen laden
include "../../../wlmwt/lib/settings.php";
include "../../../wlmwt/lib/windowslivelogin.php";
// Dateipfade Ihrer WLMWT-Installation
$KEYFILE = "../../../wlmwt/conf/settings.xml";
$_PRIVACY_URL = "../../../wlmwt/Privacy.html";
$_CHANNEL_URL = "../../../wlmwt/Channel.html";
$_TOKEN_URL = "../../../refreshmessengertoken.php";
// Windows Live ID Delegated Authentication
$wll = WindowsLiveLogin::initFromXml($KEYFILE);
$_APP_VERIFIER = $wll->getAppVerifier();
?>
Speichern Sie die Datei.
Einbindung: Das HTML-Tag ergänzen
Das HTML-Tag Ihres Themes muss angepasst werden, um die Applikation zu initialisieren.
Ergänzen Sie das HTML-Tag
<html> am Anfang Ihrer HTML-Datei (der Theme-Datei
header.php) mit diesem Code um dieses Attribut:
xmlns:msgr="http://messenger.live.com/2009/ui-tags"
Beispiel:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:msgr="http://messenger.live.com/2009/ui-tags">
Einbindung: Javascript-Dateien in den Head einbinden
Ihrer HTML-Datei (der Theme-Datei header.php) muss Javascript-Dateien hinzuladen.
Kopieren Sie diese Codes an das Ende des Heads (direkt vor </head>):
<script language="javascript" src="http://www.wlmessenger.net/api/3.0/loader.js"></script>
<script language="javascript">Microsoft.Live.Core.Loader.load(['messenger.ui', 'messenger.ui.styles.core']);</script>
Einbindung: Am Anfang des Bodys das App starten
Nun kann die Applikation geladen werden.
Kopieren Sie diesen Code an den Anfang des Bodys in Ihrer HTML-Datei (der Theme-Datei
header.php) - also direkt hinter <body>:
<msgr:app id="appTag"
application-verifier-token="<?php echo $_APP_VERIFIER; ?>"
privacy-url="<?php echo $_PRIVACY_URL; ?>"
channel-url="<?php echo $_CHANNEL_URL; ?>"
token-url="<?php echo $_TOKEN_URL; ?>">
</msgr:app>
Einbindung: Am Ende des Bodys die Web Bar einbinden (optional aber empfohlen)
Die Web Bar ist die Leiste am unteren Rand des browsers und enthält einen vollständigen Messenger.
Um die Webbar zu integrieren, kopieren Sie diesen Code an das Ende des Bodys - also direkt vor </body>:
<msgr:bar></msgr:bar>
Da die Webbar unten an Ihrer Webseite heftet, müssen Sie u.U. ein wenig Abstand zwischen Ihre Seite und den unteren Browserrand bringen.
In den meisten Fällen sollte dies mit den vier Zeilenumbrüchen erledigt sein.
Kopieren Sie diese vor den Code der Webbar:
<br /><br /><br /><br />
Fertig :)
Sie können Ihr Windows Live Messenger Web Toolkit-Theme nun hochladen und testen!
