Website Plugin

Step 1:

Registrierung

Wenn Sie Ihre Veranstaltungen auf Ihrer Website einbinden möchten, dann müssen Sie sich erst bei WispApp registrieren.

Veranstaltungseintragung

Falls Sie schon bei WispApp registriert sind, dann können Sie Veranstaltungen und Events im Loginbereich eintragen und veröffentlichen. Ihre eingetragenen Veranstaltungen bzw. Events werden nach sorgfälltiger Prüfung freigeschaltet und sind danach direkt öffentlicht erreichbar. Die automatische Erstellung Ihrer Veranstaltungen in Facebook über WispApp benötigen keinerlei Überprüfung und sind sofort unter Ihren Facebook-Account in Facebook veröffentlicht. Ebenfalls können Sie WispApp auf Ihrer Facebook-Page verwenden um dort alle Ihre Veranstaltungen anzuzeigen, indem Sie eine Facebook-App (noch nicht verfügbar, soon) erstellen und diese in Ihre Facebook-Page einbinden.

Step 2:

Vorbereitung für die Implementation

Die Implementierung des WispApp Plugins für Ihre Website wird in den nachfolgenden Schritten beschrieben.

First: Loggen Sie sich in den Loginbereich ein und notieren Sie sich Ihre User-ID, diese befindet sich oben rechts in der Navigationsleiste (rechte obere Ecke).

Second: Wenn Sie ihre User-ID gefunden haben, sollten sie als nächstes auf dieser Seite einen Test durchführen. Um diesen Test durchzuführen verwenden Sie bitte die untere Textbox und tragen Ihre User-ID ein und klicken auf die Schaltfläche "Testen".

Test:

Third: Falls der Test erfolgreich war, erscheint unter der Eingabemaske eine 200 in grüner Schriftfarbe und ihre Veranstaltungen sollten etwas weiter unten auf dieser Seite angezeigt werden. Wenn dies der Fall ist, können Sie jetzt den Programmcode auf ihrer Website implementieren. Dafür folgen Sie den Anweisungen unter Step 3 Implementierung.

Step 3:

Implementierung

Stellen Sie sicher das auf ihrer Website JQuery eingebunden ist, falls JQuery nicht eingebunden ist folgen Sie den Anweisungen unter dem Punkt JQuery einbinden sonst überspringen Sie diesen. Weitere Informationen über JQuery finden Sie auf der offiziellen JQuery-Website.

JQuery einbinden:

Fügen Sie den nachfolgenden Programmcode in Ihrer Website zwischen dem "head-tag" ein.

<head> ...
<script src="http://code.jquery.com/jquery-1.10.0.min.js" > </script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" > </script>...
</head>

WispApp Plugin einbinden

Fügen Sie den nachfolgenden Programmcode zwischen dem "head-tag" auf ihrer Website ein oder laden Sie sich dieses Plugin von GitHub.

<head> ...
<script src="http://dev.wispapp.de/js/jwisp_events.js" > </script>				
</head>

WispApp Layout einbinden

Damit Ihre Veranstaltungen auf Ihrer Website im selben Layout wie auf dieser Seite dargestellt werden, könne Sie unsere Stylesheets verweden. Fügen Sie den nachfolgenden Programmcode zwischen dem "head-tag" auf Ihrere Website ein.

<head> ...
<LINK rel="stylesheet" type="text/css" href="css/wisp-layout.css" /> ...
</head>

Sie können aber auch Ihr eigenes Layout erstellen um das Layout-Design an Ihre Website anzupassen. Erstellen Sie wie in der "css"-Datei Ihre eigenen Layoutkonfigurationen.

WispApp Code einbinden

Kopieren Sie den nachfolgenden Programmcode und fügen Sie diesen zwischen dem "body-tag" in Ihrer Website dort ein, wo Sie ihre Veranstaltungen angezeigt bekommen möchten.

<body> ...
<div id="wisp-events"> </div> ...
</body>

Als nächstes kopieren Sie den nachfolgenden JavaScript-Code und fügen diesen direkt hinter dem "body-tag" auf Ihrer Website ein.

JavaScript-Code:

User-id: not set

<body>
	<script>
		$(document).ready(function(){
			setWispSettings(userId, false);
		}
	</script> ...
</body>

Weitere Konfigurationsmöglichkeiten

Weitere Konfigurationsmöglichkeiten für die Event-Liste über das Plugin findet ihr unter dem Navigationspunkt Website Plugin - JavaScript im linken Navigationsmenü.

Veranstaltungen: