Einbinden von Facebook, Twitter & Co. in Intrexx - Intrexx 6

WERKSTATT

Einbinden von
Facebook,
Twitter & Co. in
Intrexx

Intrexx 6

In diesem Werkstattbeitrag zeigen wir Ihnen, wie Sie Social Media Dienste wie Facebook,
     Twitter und Co. in Ihr Portal einbinden. Hierbei soll darauf geachtet werden, dass die Intrexx-
     Seite, die die Bewertungsfunktionen zur Verfügung stellt, stets benutzbar bleibt, auch während
     im Hintergrund die benötigten Daten an die Betreiber übermittelt werden. Um dies zu
     realisieren, werden die jeweils benötigten JavaScript-Dateien asynchron nachgeladen. Das
     Prinzip zum Einbinden ist in allen drei Fällen das gleiche: Zunächst wird eine vorgegebene
     Sprungmarke gesetzt (über die HTML-Elemente  oder ) und dann beim Aufruf der
     Seite das JavaScript geladen, eingebunden und ausgeführt.

1.   Twitter Tweet-Button
     Um den Twitter Tweet-Button in das Portal zu integrieren, wird zunächst eine Sprungmarke
     gesetzt - zum Beispiel über das Ansichtselement Statischer Text. Platzieren Sie dieses Element
     auf einer Intrexx-Seite und öffnen Sie im Eigenschaftendialog den Reiter Optionen. Wählen Sie
     die Option Programmierung, nur Standardsprache, um zusätzlich Velocity-Code hinterlegen zu
     können. Somit kann in der Sprungmarke über die bereits vordefinierte globale Variable
     ${lang} die aktuelle Session-Sprache übergeben werden.

     Tweet

     Die Einbindung des Tweet-Buttons erfolgt über ein Skript, das mit Hilfe des JQuery Ausdrucks
     $.getScript() direkt von Twitter nachgeladen werden kann. Es muss lediglich eine Funktion
     definiert werden (in diesem Beispiel tw()), die das Nachladen der Datei über JQuery ausführt.

     function twitter(){
            return $.getScript('http://platform.twitter.com/widgets.js');
     }

     Abschließend wird im onload-Event der Seite der Skriptaufruf eingefügt:

     twitter();

     Es wird das gesamte Tweet-Button API unterstützt.

2.   Google +1
     Etwas umfangreicher ist das JavaScript für Googles +1. Um den Aufruf mit Übergabewerten,
     wie im Google +1 API beschrieben, zu ermöglichen, kann erst nach Minipulation vom window
     auf die Kurzschreibweise $.getScript() von jQuery zurückgegriffen werden. Das Prinzip bleibt
     dennoch das gleiche.

     Mit einem statischen Text (Programmierung, nur Standardsprache) wird der benötigte HTML-
     Code eingefügt:

           HTML5 wird nicht von allen Browsern interpretiert. Alternative Implementierungen
           zur Unterstützung älterer Browser finden Sie in der API-Dokumentation und den
           Hilfeseiten von Google.

     Erfassen Sie anschließend folgendes Skript im Intrexx JavaScript-Editor:

     function googleplus(l){
            window.___gcfg={lang: l};
            return $.getScript('https://apis.google.com/js/plusone.js');
     }

     UNITED PLANET - INTREXX 6 PORTAL BUILDER - FACEBOOK, TWITTER & CO IN INTREXX              2

Dieses Skript wird ebenfalls über das onload()-Ereignis beim Aufruf der Seite eingebunden.
     Dabei soll die aktuelle Sprache mit übergeben werden. Dies lässt sich über die globale Velocity-
     Variable ${lang} realisieren:

     googleplus('${lang}');

3.   Facebook Like-Button
     Mehr Informationen hierzu finden Sie auf der Seite Like-Button API.
     Zu Beginn muss - analog zu den bisherigen Beispielen - mit Hilfe eines statischen Textes
     (Option Programmierung, nur Standardsprache) wieder ein  Element erzeugt werden,
     das innerhalb von JavaScript mit JQuery-Statements referenziert und angesprochen werden
     kann:

           HTML5 wird nicht von allen Browsern interpretiert. Alternative Implementierungen
           zur Unterstützung älterer Browser finden Sie in der API-Dokumentation und den
           Hilfeseiten von Facebook.

     Da der Quellcode zur Einbindung etwas länger ist und einige Veränderungen möglich sind, wird
     hier etwas näher auf diesen eingegangen. Der Quellcode sieht wie folgt aus:

     function facebook(l){
            // define possible languages
            switch(l){
                   case "de":
                          l = 'de_DE';
                          break;
                   case "fr":
                          l = 'fr_FR';
                          break;
                   default:
                          l = 'en_US';
                          break;
            }

            (
                     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.facebook.net/"+l+"/all.js#xfbml=1";
                            fjs.parentNode.insertBefore(js, fjs);
                     }
                     (document, 'script', 'facebook-jssdk')
            );
     }

     Innerhalb switch-case-Konstrukts, das sich im ersten Abschnitt befindet, können optional
     weitere Sprachen hinzugefügt werden. Intrexx nutzt die Sprachkürzel nach ISO 639-1
     wohingegen Facebook die Kürzel nach RFC 1766 für den Aufbau einer URL verlangt. Ein
     geeignetes Mapping wird in Ermangelung bereits vorhandener ECMA-Empfehlungen derzeit
     nicht angeboten. Das Mapping muss daher von Hand erfolgen. Sollen also weitere Sprachen
     unterstützt werden, ist das begonnene switch-case fortzuführen.

     Der Aufruf erfolgt im Beispiel im onload-Event der Seite:

     facebook('${lang}');

     UNITED PLANET - INTREXX 6 PORTAL BUILDER - FACEBOOK, TWITTER & CO IN INTREXX               3

4.   Abschließende Informationen
     Oftmals ist die Weitergabe genau eines Ziels (also einer Ziel-URL) eines Datensatzes
     gewünscht. An dieser Stelle bieten alle APIs die Möglichkeit, die gewünschte URL einzutragen.
     Diese Funktionalität unter Intrexx zu erhalten, bedarf keiner großen Anpassungen - im
     Regelfall reicht es aus, sich die URL aus den Informationen der zur Verfügung stehenden
     Request-Werte manuell zu generieren und diese auf die in der jeweiligen API-Dokumentation
     beschriebene Variante zu übermitteln.

     UNITED PLANET - INTREXX 6 PORTAL BUILDER - FACEBOOK, TWITTER & CO IN INTREXX            4

©2013 United Planet. All rights reserved. www.unitedplanet.com. Intrexx and United Planet are
registered trademarks of United Planet, Freiburg - Germany. Alle im Text erwähnten Hersteller,
Produkte und Dienstleistungen sind Marken oder eingetragene Marken der jeweiligen Unternehmen in
Deutschland und anderen Ländern weltweit.