Diese Seite nutzt Cookies, um dir eine optimale Nutzung unserer Dienste zu ermöglichen. Mehr erfahren

Tools für deinen Blog oder Shop

Der wishsite-Button

Du betreibst einen Online-Shop oder einen Blog? Dann binde den wishsite-Button in deine Seite ein und steigere deinen Umsatz.

Standardgrößen des wishsite-Buttons

Großer wishsite Button
(Großer Button)
oder Kleiner wishsite Button
(Kleiner Button)

Mit dem wishsite-Button erleichterst du deinen Nutzern Produkte von deiner Seite auf ihre wishsite-Wunschliste hinzuzufügen. Damit lassen sich auch solche Nutzer monetarisieren, die sich ein Produkt selbst nicht kaufen wollen, es sich aber von Freunden oder Verwandten zum Beispiel zum Geburtstag oder zu Weihnachten wünschen.

Um den wishsite-Button einzubinden, gibt es prinzipiell zwei Möglichkeiten:

Der wishsite-Button (mit Javascript)

Der wishsite-Button in 5 Schritten

  1. wishsite-Button (inkl. kleiner Javascriptdatei) auf eigene Seite (z.B. Shop oder Blog) einbinden.
  2. Nutzer klickt auf Button -> Popup-Fenster wird geöffnet.
  3. Alle notwendigen Interaktionen zur Einbindung des Wunsches auf die wishsite-Wunschliste erfolgen im Popup.
  4. Popup wird anschließend geschlossen.
  5. Nutzer ist nach wie vor auf der ursprünglichen Seite (deinem Shop oder Blog!) und durchsucht diese nach weiteren interessanten Inhalten.

wishsite-Button einbinden - Schritt-für-Schritt

  1. Link zur Seite bzw. zum Produkt auswählen, der als Wunsch hinzugefügt werden soll.
  2. Code für wishsite-Button generieren (und nach Bedarf anpassen).
  3. Code für wishsite-Button inklusive Javascriptdatei in eigene Seite einbinden.

wishsite-Button (mit Javascript) generieren

(optional)

(optional)

(optional)

(optional)

/

wishsite_button wishsite button demo Vorschau:

Code-Beispiel

Im Folgenden ist ein kleines Code-Beispiel, dass du auf deine Seite kopieren kannst (du musst nur den blauen bzw. grünen Text kopieren). Du kannst den Code dabei ganz deinen Bedürfnissen anpassen. Wie du das machen kannst, steht einen Abschnitt weiter unten (den wishsite-Button richtig anpassen).

<html>
<head>
<title>
     Deine Internetseite
</title>
...
</head>
<body>
<script src="https://www.wishsite.de/api/v1/button/js" type="text/javascript"></script>
...
Hier könnte zum Beispiel ein Produktbild oder eine Produktbeschreibung stehen, sodass sich daneben eine Platzierung des wishsite-Buttons anbieten würde.
<a href="https://www.wishsite.de/add_wish?url=http://deine.url.de/zum/wunsch&name=Kamera&description=Dies ist ein Beispielwunsch&price=10,99 EUR&image_url=http://deine.url.de/zum/bild" target="_blank" onclick="wsButtonHandler.openPopup(this.href);return false;">
<img alt="wishsite_button" src="//www.wishsite.de/assets/wishsite_button_large.png" title="Zu meiner wishsite-Wunschliste hinzufügen"/>
</a>

...
</body>
</html>

Den wishsite-Button richtig anpassen

Der Aufbau des wishsite-Buttons ist immer gleich. Im Kern steht immer folgender Link (im Bild oben grün markiert!):

https://www.wishsite.de/add_wish?url=dein_link_zum_wunsch [+optionale Attribute]

Folgende Attribute müssen/können bei der Verwendung dieses Links angegeben werden:

  • url (Pflicht): Dieser Parameter enthält den externen Link, der zum Wunsch führt
  • name (optional): Mit diesem Parameter kann ein Name für den Wunsch übergeben werden
  • description (optional): Mit diesem Parameter kann eine weiterführende Beschreibung übergeben werden
  • price (optional): Mit diesem Parameter kann eine Preisangabe übergeben werden
  • image_url (optional): Mit diesem Parameter kann eine URL zu einem Bild übergeben werden, das zum Wunsch gespeichert werden soll

Wichtiger Hinweis!
Bei der Angabe von URLs (zum Wunsch oder zu einem Bild) sollte diese URL immer codiert werden.

Spätestens wenn der externe Link Sonderzeichen enthält, die in Form einer URL bestimmte Bedeutungen besitzen, sollte der externe Link entsprechend codiert werden. Für Leerzeichen kann etwa der Code %20 verwendet werden, für einen Doppelpunkt (:) der Code %3A oder für einen Schrägstrich (/) der Code %2F.

Ein externer Link kann codiert etwa wie folgt übergeben werden:

https://www.wishsite.de/add_wish?url=http%3A%2F%2Fwww.amazon.de

Der wishsite-Button (ohne Javascript)

Was ist der Unterschied zum wishsite-Button mit Javascript

Der wishsite-Button ohne Javascript unterscheidet sich nur wenig vom wishsite-Button mit Javascript. Einziger Unterschied: Es wird auf die Einbindung der Javascript-Datei verzichtet.

Hinweis:
Sollte der Browser eines Nutzers kein Javascript unterstützen (z.B. weil es explizit ausgestellt wurde), funktioniert der wishsite-Button mit Javascript trotzdem. Er verhält sich dann genauso wie der wishsite-Button ohne Javascript.

wishsite-Button einbinden - Schritt-für-Schritt

  1. Link zur Seite bzw. zum Produkt auswählen, der als Wunsch hinzugefügt werden soll.
  2. Code für wishsite-Button generieren (und nach Bedarf anpassen).
  3. Code für wishsite-Button inklusive Javascriptdatei in eigene Seite einbinden.

(Der Ablauf ist derselbe wie beim wishsite-Button mit Javascript)

wishsite-Button (ohne Javascript) generieren

(optional)

(optional)

(optional)

(optional)

/

wishsite_button wishsite button demo Vorschau:

Code-Beispiel

Im Folgenden ist ein kleines Code-Beispiel, dass du auf deine Seite kopieren kannst (du musst nur den blauen bzw. grünen Text kopieren). Du kannst den Code dabei ganz deinen Bedürfnissen anpassen. Wie du das machen kannst, findest du wieder im Abschnitt den wishsite-Button richtig anpassen.

<html>
<head>
<title>
     Deine Internetseite
</title>
...
</head>
<body>
...
Hier könnte zum Beispiel ein Produktbild oder eine Produktbeschreibung stehen, sodass sich daneben eine Platzierung des wishsite-Buttons anbieten würde.
<a href="https://www.wishsite.de/add_wish?url=http://deine.url.de/zum/wunsch&name=Kamera&description=Dies ist ein Beispielwunsch&price=10,99 EUR&image_url=http://deine.url.de/zum/bild" target="_blank" onclick="wsButtonHandler.openPopup(this.href);return false;">
<img alt="wishsite_button" src="//www.wishsite.de/assets/wishsite_button_large.png" title="Zu meiner wishsite-Wunschliste hinzufügen"/>
</a>

...
</body>
</html>

wishsite-Link

Anstelle des wishsite-Buttons kannst du auch einfach einen Link verwenden. Der Link ist im Prinzip nichts anderes als der wishsite-Button, nur dass hier nicht das wishsite-Button-Bild als Ankertext verwendet wird, sondern ein frei wählbarer Text.

Um dir automatisch einen Link erstellen zu lassen, fülle einfach folgendes Formular aus und lass dir den Code generieren. Auch diesen Code kannst du wieder gemäß der gegebenen Möglichkeiten ganz deinen Anforderungen anpassen (s. den wishsite-Button richtig anpassen).