Die WeGreen Nachhaltigkeitsampel kann kostenlos in eigene Anwendungen und Portale integriert werden.
Für die Integration stehen zwei Schnittstellen zur Verfügung:
Die Integration der WeGreen Nachhaltigkeitsampel als Widget erfolgt in zwei einfachen Schritten:
Fügen Sie bitte zunächst das folgende JavaScript vor dem schliessenden Body-Tag der Seite ein, auf der sie die Nachhaltigkeitsampel einblenden wollen:
<!-- (c) WeGreen UG -->
<!-- Initialize WeGreen JavaScript API -->
<div id="wg-root"></div>
<script type="text/javascript">
window.wgAsyncInit = function() {
WG.init({appId: '$APP_ID',
xwgml: true,
locale: '$LOCALE'});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol
+ '//api.wegreen.de/js/wgAPI.js';
document.getElementById('wg-root').appendChild(e);
}());
</script>
Ersetzen Sie nach dem Einfügen die Zeichenkette $APP_ID durch Ihre Application ID und die Zeichenkette $LOCALE durch die gewünschte Sprachvariante. WeGreen unterstützt die Sprachvarianten de (Deutsch), fr (Französisch) und en (Englisch).
Hinweis: Die Initialisierung der JavaScript API von WeGreen erfolgt asynchron und verlangsamt nicht das Laden oder die Darstellung Ihrer Webseite.
Danach gehen Sie zu der Nachhaltigkeitsampel, die sie in Ihre Seite einfügen wollen und Klicken auf "Einbetten". Fügen Sie den angezeigten Tag an der Stelle in Ihre Webseite ein, an der die Nachhaltigkeitsampel erscheinen soll. Fertig!
Hinweis: Das Widget aktualisiert sich selbstständig. Wenn sich z.B. die Bewertung des Unternehmens oder die Anzahl der interessierten Nutzer verändert, wird dies automatisch auf Ihrer Webseite dargestellt!
Wenn Sie die Nachhaltigkeitsampel in eine dynamische Webseite einfügen wollen, auf der je nach Aufruf unterschiedliche Unternehmen, Marken oder Produkte angezeigt werden, können Sie einen Tag einfügen, der automatisch die passende Nachhaltigkeitsampel findet. Fügen Sie dazu den folgenden Tag ein:
<div name="wg:badge" layout="$LAYOUT" $SELECTOR></div>
Zum Beispiel fügt der Tag <div name="wg:badge" slug="kik"></div> die Nachhaltigkeitsampel des Unternehmens Kik ein, wie nachfolgend dargestellt:
Die Nachhaltigkeitsampel von Kik wurde in diesem Beispiel durch den Selektor slug="kik" generiert. Es stehen Ihnen jedoch auch andere Selektoren zur Verfügung.
Ersetzen Sie nach dem Einfügen die Zeichenkette $LAYOUT durch die gewünschte Darstellungsvariante des Widgets. Es stehen die Varianten standard und link zur Verfügung.
Hinweis: Beim Layout standard kann über den Parameter width die gewünschte Breite des Widgets festgelegt werden, bis zu einer minimalen Breite von 125 Pixeln. Das Layout passt sich automatisch an.
<div name="wg:badge" slug="kik" width="500"></div>
<div name="wg:badge" slug="kik" width="350"></div>
<div name="wg:badge" slug="kik" width="250"></div>
<div name="wg:badge" slug="kik" width="125"></div>
Ersetzen Sie die Zeichenkette $SELECTOR durch die gewünschte Adressierung des Unternehmens, der Marke oder des Produkts, zu welchem die passende Nachhaltigkeitsampel dargestellt werden soll.
Zum Beispiel findet der nachfolgende Tag automatisch die Nachhaltigkeitsampel des Unternehmens, mit der angegebenen Homepage, im Link-Layout:
<div name="wg:badge" layout="link" href="http://www.dm-drogeriemarkt.de/index.html"></div>
Die nachfolgende Tabelle zeigt die möglichen Selektoren:| Name | Funktionsweise | Wert |
|---|---|---|
| slug | Slug eines Objekts in WeGreen, vgl. Wikipedia. Der Slug eines Objekts ist ein Teil der URL der jeweiligen Nachhaltigkeitsampel im Portal wegreen.de. Beispielsweise ist die Nachhaltigkeitsampel des Unternehmens "Procter & Gamble" auf WeGreen unter der URL http://wegreen.de/de/nachhaltigkeit/profile/procter-gamble/v/overview abrufbar. Der Slug (Bestandteil der URL) lautet deshalb procter-gamble. Jeder Slug ist eindeutig auf wegreen.de. Achten Sie deshalb auf eine exakte Schreibweise. Eine Alternative zum slug Selektion ist der Selektor text | Z.B "procter-gamble" für "Procter & Gamble" |
| text | Selektion über einen bekannten Namen des Unternehmens, der Marke oder des Produkts | Z.B. "BASF SE" oder "basf" |
| href | Selektion über zugeordnete Homepage | Vollständige URL der Homepage, z.B. "http://www.basf.com/index.html". Bei der Suche wird nur die Domain berücksichtigt. |
| fid | Selektion über ID in der Freebase Datenbank | Z.B. "/en/basf" für das Unternehmen BASF SE |
| special | Selektion der nachhaltigsten (Wert "best"), am wenigsten nachhaltigen (Wert "worst") oder am meisten abgerufenen (Wert "popular"). Bei "best" und "worst" werden nur Unternehmen mit sehr hoher Konfidenz berücksichtigt, also vielen unabhängigen Quellen. | Der zusätzliche Parameter "count" bestimmt die Anzahl der selektierten (Default und Maximum ist 10). |
Hinweis: Es können auch mehrere Tags auf einer Seite eingefügt werden, z.B. wenn Sie auf einer Seite Nachhaltigkeitsampeln zu verschiedenen Unternehmen, Marken oder Produkten darstellen wollen.
Sie wollen auf Ihrer Homepage oder in Ihrem Blogbeitrag die Ampel eines zufällig aus einer Liste ausgewählten Unternehmens anzeigen? Kein Problem.
Jeder der Selektoren akzeptiert auch eine Semikolon-separierte Liste von Werten. In diesem Fall wird zufällig einer der Werte ausgewählt.
Zum Beispiel fügt der Tag
<div name="wg:badge" slug="apple;nokia;sonyericsson;samsung" nocache="true"></div>
die Nachhaltigkeitsampel eines der Unternehmen ein, zufällig ausgewählt:
Hinweis: Der Parameter nocache="true" deaktiviert den Cache, so dass die zufällige Auswahl bei jedem Seitenabruf erfolgt. Wird der Parameter nicht angegeben oder als Welt false übergeben, erfolgt die Auswahl einmal stündlich.
Alternativ können Sie das Widget so parametrieren, dass alle Ampeln in einer Slideshow nacheinander angezeigt werden.
Fügen Sie hierfür einfach den Parameter slideshow="true" ein.
<div name="wg:badge" slug="apple;nokia;sonyericsson;samsung;htc-1" slideshow="true"></div>
Hinweis: Darstellung als Slideshow wird nur beim Standard-Layout unterstützt. Der Parameter nocache="true" wird für Slideshows nicht benötigt.
Slideshows können mit dem Selektor "special" kombiniert werden!
<div name="wg:badge" special="popular" count="10" slideshow="true"></div>
<div name="wg:badge" special="best" count="10" slideshow="true"></div>
<div name="wg:badge" special="worst" count="10" slideshow="true"></div>
Sie wollen auf Ihrer Webseite oder in einem Blogbeitrag die WeGreen Suche zugänglich machen und damit Ihren Nutzern einen Mehrwert bieten und unsere Mission unterstützen? Dafür gibt es das Suche-Widget!
Fügen Sie hierfür einfach den folgenden Tag an geeigneter Stelle in Ihrer Seite ein:
<div name="wg:search"></div>
Der Parameter width gibt die Breite des Suchformulars in Pixeln an. Das Layout des Formulars passt sich automatisch der Breite an. Die minimale Breite beträgt 125 Pixel - das Formular passt also auch gut in die linke oder rechte Spalte einer Webseite. Die maximale Breite ist unbegrenzt. Wird keine Breite angegeben, werden automatisch 500 Pixel verwendet.
<div name="wg:search" width="125"></div>
<div name="wg:search" width="250"></div>
<div name="wg:search" width="375"></div>
Per Default springt das Widget auf die Suchergebnisseite bzw. den besten Treffer auf wegreen.de.
Alternativ können die besten Trefer eingebettet in das Widget direkt auf Ihrer Seite angezeigt werden! Ergänzen Sie dafür einfach das Attribut embed-hits="true".
<div name="wg:search" embed-hits="true"></div>
Hinweis: Bitte achten Sie in diesem Fall darauf, dass die Höhe des Widgets sich für die Darstellung der Treffer auf 233 Pixel vergrössert.
Optional kann das Suche-Widget unterhalb des Formulars eine Ampel oder eine Ampel-Slideshow anzeigen, falls der Nutzer noch keine Sucheingabe getätigt hat. Setzen Sie hierfür einfach die Parameter des wg:badge Tags (s.o.) als Parameter des wg:search Tags, z.B. wie folgt:
<div name="wg:search" embed-hits="true" special="popular" slideshow="true"></div>
<div name="wg:search" embed-hits="true" slug="apple;nokia;sonyericsson;samsung;htc-1" slideshow="true"></div>
<div name="wg:search" embed-hits="true" special="best" slideshow="true"></div>
Auch bei Einbettung von Treffern und Anzeige einer Slideshow passt sich das Layout des Widgets der gewüschten Breite an, bis minimal 125 Pixel Breite.
<div name="wg:search" embed-hits="true" special="best" slideshow="true" width="250"></div>
<div name="wg:search" embed-hits="true" special="best" slideshow="true" width="125"></div>
Wir werden nach und nach weitere Features zu diesem Widget hinzufügen, z.B. die interaktive Vervollständigung der Eingabe des Nutzers. Sie müssen für die Nutzung dieser Features nach initialer Einbettung des Widgets nichts ändern, die Aktualisierung erfolgt automatisch.
Für nicht HTML-basierte Anwendungen steht eine wahlweise HTTP/JSON oder HTTP/XML basierte REST API als Webservice zur Verfügung.
Der Webservice kann zur Integration von WeGreen in Smartphone Apps, Adobe Flash basierte Web-Apps und Desktop Applikationen verwendet werden. Zum Beispiel verwendet Barcoo diese API zur Integration der WeGreen Nachhaltigkeitsampel in die eigenen Apps für iPhone, Android und Smartphones weiterer Hersteller.
Endpunkt des Webservice ist die URL http://api.wegreen.de/services/{service}/{subject}.{format}?{parameters}
service bestimmt den zu nutzenden Service. Aktuell stehen search für die Suche und Anzeige von Nachhaltigkeitsampeln sowie tracking für den Aufruf des Echtzeit Webtrackings bei Einblendung einer Ampel zur Verfügung.
subject bestimmt das Subjekt des Service. Bei der Suche wird aktuell der Wert scoreable unterstützt um nach von WeGreen bewerteten Entitäten zu Suchen (Unternehmen, Marken, Produkte etc.). Beim Tracking wird das Subjekt pageview, d.h. übermittelt, also die Einblendung bzw. der Seitenabruf einer Ampel - worauf die Auwertung von Besuchen (Visits), Besuchern (Visitors) etc. basiert.
format kennzeichnet das gewüschte Responseformat eines Aufrufs. Für alle Services und Subjekte werden json sowie xml unterstützt, d.h. die Response erfolgt in der JavaScript Object Notation oder in XML Notation.
parameters enthät eine Liste von Parameter in die dem Service übermittelt werden. Konkret werden Parameter als Query String übermittelt. Die Parameter der Services sowie die jeweilige Struktur der Rückgabe/Response wird in den folgenden Abschnitten definiert. Vorweg ein Beispiel:
Der Aufruf von http://api.wegreen.de/services/search/scoreable.json?appId=XXX&appSecret=YYY&locale=de&slug=basf liefert als Response die für die Darstellung der WeGreen Nachhaltigkeitsampel des Unternehmens BASF notwendigen Daten. Die Werte der Parameter appID und appSecret sind vor Aufruf durch die individuellen Werte Ihrer Applikation zu ersetzen, wie im folgenden erläütert.
Folgende Parameter muss bei jedem Request unabhägig von Service, Subjekt und anderen Parametern übermittelt werden:
Unabähängig vom aufgerufen Service, Subjekt, Format und Parameter enthät jede Response die folgenden Elemente:
Der Service search mit Subjekt scoreable erlaubt die Suche nach bewerteten Unternehmen, Marken und Produkten und liefert die für die Darstellung der zugehörigen Nachhaltigkeitsampel notwendigen Daten.
Die Response und darin enthaltene Daten dürfen maximal für 24 Stunden von Ihrer Anwendung gecached (lokal gespeichert) werden.
Für die Suche nach "Scoreables" ist bei jedem Request genau einer der folgenden Parameter anzugeben, welcher den gewünschten Treffer bestimmt:
Weitere Parameter
Sofern ein Objekt gefunden wurde, sind folgende Elemente enthalten. Elemente die nicht immer zurückgeliefert werden sind als solche gekennzeichnet:
Der Service track mit Subjekt pageview ist zwingend umgehend während oder maximal 5 Minuten nach Einblendung einer Nachhaltigkeitsampel aufzurufen.
Anwendungen die den Suche-Service in Anspruch nehmen aber den Tracking-Service nicht vereinbarungsgemäß aufrufen, werden gesperrt.
Die Response eines Tracking-Aufrufs enthält keine über die generischen Elemente hinausgehende.
Kontaktieren Sie bitte support@wegreen.de falls Sie Fragen zur Webservice API haben oder Unterstützung bei der Integration benötigen.
Die Nutzung der WeGreen APIs ist kostenlos, unterliegt jedoch Nutzungsbestimmungen. Z.B. muss bei der Verwendung der Daten WeGreen als Urheber der Informationen erkennbar sein und das WeGreen Design bei Einblendung der Ampel eingehalten werden.
Für die Nutzung der WeGreen APIs wird eine "Application ID", für die Webservice API zusätzlich ein "Application Secret" benötigt, das bei jedem Aufruf übermittelt werden muss. Application ID und Secret erlauben uns die Zugriffe auf den WeGreen Datenbestand zu kontrollieren und bei unsachgemäßer Nutzung zu sperren.
Jeder registrierte Nutzer von WeGreen hat automatisch eine persönliche Application ID und ein Application Secret. Um die persönliche Application ID und den Application Secret einsehen zu können, loggen Sie sich ein und klicken Sie hier.
Um den Zugriff auf den REST basierten Webservice freischalten zu lassen, wenden Sie sich bitte an den WeGreen Support. Der Berechtigungsstatus für die Nutzung der WeGreen APIs ist ebenfalls auf der Seite "Für Entwickler" einsehbar.