Widgets

Aus KWICK! Hilfe-Wiki

Wechseln zu: Navigation, Suche

Widgets sind kleine Tools, die nicht eigenständig betrieben werden können, sondern in eine spezielle Umgebung eingebunden werden müssen, um einwandfrei funktionieren zu können. Die Sidebar von Windows Vista kann beispielsweise an die persönlichen Vorlieben und Bedürfnisse mit Hilfe von Widgets angepasst werden.

Auch bei KWICK! gibt es die Möglichkeit, bestimmte Inhalte in einer anderen Umgebung, z. B. auf der eigenen Webseite, einzubinden und aufzurufen. Dies geschieht über das Fan- und/oder Event-Widget.

Inhaltsverzeichnis

Allgemeines

Die Fan- und Eventwidgets bietet den Besuchern Deiner Webseite die Möglichkeit Fans von Dir auf KWICK! zu werden bzw. sich für eines Deiner auf KWICK! eingestellten Events voranzumelden. Das Fan-Widget funktioniert nicht, wenn Du in den Einstellungen zur Privatsphäre die Fan-Funktion deaktiviert hast. Nicht eingeloggte oder registrierte Mitglieder werden bei beiden Widgets darüber hinaus vorher zum Login bzw. Registrierung aufgefordert.

Um Dein eigenes Fan- oder Eventwidget zu gestalten, benutze einfach unseren Fanwidget-Generator bzw. den Eventwidget-Generator, den Du rechts auf der Eventseite Deines Events findest. Für das Eventwidget ist ein bereits im KWICK! Kalender eingetragenes Event von Nöten.

Fanwidget-Generator

Eventwidget-Generator

Einbau

Für beide Widgets muss der Codeschnipsel, den der Generator erstellt hat, nach u. g. Beispiel aufgeteilt und in die entsprechenden Stellen des html-Codes Deiner Webseite (siehe graue Kommentare) eingebaut werden. Im head-Bereich kommt darüber hinaus der Hinweis auf das Script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Beginn erster Teil des Codesschnipsels. Das bestehende html-Tag um xmlns:sc="http://www.kwick.de/2010/ML erweitern. Dieser Abschnitt ist nicht zwingend erforderlich, aber empfehlenswert.-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sc="http://www.kwick.de/2010/ML"> 
<!--Ende-->
<head>
	<title>Meine Webseite</title>
<!--Beginn Code für das Script-->
        <script type="text/javascript" src="http://www.kwick.de/widget/all.js"></script>
<!--Ende-->
</head>

Erst im Body-Bereich müssen dann die Parameter (sc-tag) für das Widget selbst eingebaut werden. Diese werden automatisch vom jeweiligen Widget generiert und können je nach Konfiguration des Widgets unterschiedlich aussehen.

Fan-Widget

<body>
<!--Beginn zweiter Teil des Codeschnipsels-->
	 <sc:fan userid="6"></sc:fan> 
<!--Ende-->
</body>

Beispiel 1

<body>
         <sc:fan userid="6" width="220" show-personal-data="0" show-profile-picture="0" show-latest-status="0" show-gender-and-age="0" member-rows="3"></sc:fan>
</body>
Widget mit Kopfzeile, Fans einzeilig.

Beispiel 2

<body>
         <sc:fan userid="6" width="220" show-latest-status="0"></sc:fan>
</body>
Widget ohne Kopfzeile, Fans dreizeilig

Bei mehreren Widgets muss nur das sc-Tag erneut eingefügt bzw. angepasst werden. Am restlichen Code muss nichts verändert werden. Auf diese Weise lassen sich mehrere Fan- und Eventwidgets auf einer Webseite kombinieren.

<body>
         <sc:fan userid="6" width="220" show-latest-status="0"></sc:fan>
         <sc:fan userid="1" width="220" show-profile-picture="0" member-rows="2"></sc:fan>
</body>

Event-Widget

<body>
         <sc:event eventid="70727"></sc:event>
</body>
Eventwidget mit eingeblendeten Vorteilen für Mitglieder (hier Verlosung), vorangemeldete Mitglieder dreizeilig

Anpassen des Event-Widgets

Das Event-Widget lässt sich per CSS beliebig an die eigene Seite anpassen. Hierfür stehen unterschiedliche Möglichkeiten zur Verfügung.

Css.png

Beispiel für CSS:

.bg{
    background-color:black;
    color:white;
}
 
.boxShout{
    background-color:#00008b;
    color:white;
}
 
.thumb_1{
    border:2px;
}
 
input.submit{
    background: none #00008b;
    color:white;
}
 
a:link, a:visited, a:active{
    color:white;
}
 
a:hover{
    color:gray;
    text-decoration:underline;
}

Siehe auch

Meine Werkzeuge