Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Inhalt

1. Einleitung

SocialMedia ist ein Plugin auf Basis von PHP (und jQuery), dass es ermöglicht, soziale Medien-Plugins (wie beispielsweise den Facebook-Like-Button) datenschutzfreundlich einzubinden. Dem Nutzer wird die Wahl gelassen, die Empfehlen-Buttons von Twitter, Google und Facebook (wahlweise auch andere) auf Wunsch auch dynamisch anzuzeigen, um den vollen Funktionsumfang nutzen zu k├Ânnen. Hierzu wird er davon in Kenntnis gesetzt, dass entsprechende personenbezogene Daten an Staaten außerhalb der EU/EWR gesendet werden. Das Funktionsbeispiel (siehe nächster Punkt) macht das Prinzip verständlicher.

2. Beispiel

Beispiel

Live-Beispiel ansehen

3. Vorbereitung

SocialMedia basiert u.a. auf der Javascript-Bibliothek jQuery, weshalb diese vor der Einbindung des Plugins zuerst geladen werden muss (sofern der volle Funktionsumfang genutzt werden soll). jQuery steht auf Externer Link:  http://www.jquery.com/ zum kostenlosen Download zur Verfügung. Speichern Sie die Datei (jquery-X.Y.Z.min.js) vorzugsweise im Ordner /websource/js/ und binden Sie diese folgendermaßen im Header-Bereich des HTML-Codes ein:

<script src="/js/jquery-X.Y.Z.min.js"></script>

X.Y.Z ist mit der entsprechenden Versionsnummer zu ersetzen.

4. Download

Laden Sie sich die Datei socialmedia.zip herunter und speichern Sie die entpackten Dateien anschließend im Ordner /vkdaten/tools/socialmedia/

5. Einbindung

Fügen Sie folgende Zeile im Header-Bereich des HTML-Codes ein:

<link rel="stylesheet" href="/vkdaten/tools/socialmedia/socialMedia.css" />

Anschließend platzieren Sie an beliebiger Stelle im Body-Bereich des HTML-Codes folgenden Code zur Initialisierung des Plugins:

<div class="socialMedia"><!--#include virtual="/vkdaten/tools/socialmedia/socialMedia.php" --></div>

Diese Art der Einbindung erfordert, dass SSI (mit PHP-Includes) aktiv ist. Dies ist in der Regel bei Dateien mit der Endung .shtml der Fall. Damit allerdings auch PHP-Dateien eingebunden werden können, ist es noch notwendig, folgende Zeile in der Datei /websource/.htaccess zu ergänzen bzw. diese mit folgendem Inhalt neu anzulegen:

Options +Includes

Alternativ kann das Plugin auch innerhalb einer PHP-Datei mit folgendem Befehl eingebunden werden:

<php include("/vkdaten/tools/socialmedia/socialMedia.php"); ?>

6. Optionen

SocialMedia bietet eine Reihe von optionalen Einstellungen, die in der Datei options.conf zeilenweise (Optionsname und Wert jeweils mit Tabulator getrennt) gespeichert werden können, beispielsweise:

all_dynamic	1
large_buttons	0

Alternativ (bei Verwendung des Webbaukastens) kann im Ordner /vkdaten/ die Datei socialmedia.conf angelegt werden, die dann automatisch bevorzugt als Konfigurationsdatei anstatt der Datei options.conf geladen wird.

Es bestehen folgende allgemeine Optionen:

  • all_dynamic: Legt fest, ob alle Buttons direkt dynamisch oder statisch eingebunden werden sollen: 1 oder 0. Standard: 0. Anmerkung: Bei 1 wird der Optionsdialog zum Aktivieren der dynamischen Buttons ausgeblendet.
  • large_buttons: Aktiviert Box-Darstellung (große Buttons) der Empfehlen-Buttons: 1 oder 0. Standard: 0. Anmerkung: Funktioniert nur, sofern all_dynamic auf 1 gesetzt wurde.
  • infotext: Ermöglicht Darstellung eines benutzerdefinierten Informationstexts innerhalb des "dynamische Buttons aktivieren"-Dialogs. Standard: Im Folgenden können Sie die dynamischen Buttons von Google, Twitter und Facebook (dauerhaft) aktivieren. Bereits beim Aktivieren werden personenbezogene Daten von Ihnen an Staaten außerhalb der EU/EWR gesendet, dort verarbeitet und möglicherweise gespeichert. Sie können die Aktivierung jederzeit Rückgängig machen.

Optionen bzgl. des Google-Buttons:

  • google: Legt fest, ob der "Google +1"-Button angezeigt werden soll: 1 oder 0. Standard: 1.
  • google_dynamic: Automatisch dynamische Einbindung des "Google +1"-Buttons: 1 oder 0. Standard: 0.
  • google_icon: Relative Adresse zur Grafik des statischen "Google +1"-Buttons. Standard: dummy_google.png.

Optionen bzgl. des Twitter-Buttons:

  • twitter: Legt fest, ob der Twitter-Button angezeigt werden soll: 1 oder 0. Standard: 1.
  • twitter_dynamic: Automatisch dynamische Einbindung des Twitter-Buttons: 1 oder 0. Standard: 0.
  • twitter_icon: Relative Adresse zur Grafik des statischen Twitter-Buttons. Standard: dummy_twitter.png.

Optionen bzgl. des Facebook-Buttons:

  • facebook: Legt fest, ob der Facebook-Button angezeigt werden soll: 1 oder 0. Standard: 1.
  • facebook_dynamic: Automatisch dynamische Einbindung des Facebook-Buttons: 1 oder 0. Standard: 0.
  • facebook_icon: Relative Adresse zur Grafik des statischen Facebook-Buttons. Standard: dummy_facebook.png.

Optionen zur Einbindung eines benutzerdefinierten Buttons:

Es besteht die Möglichkeit, einen benutzerdefinierten Button zu integrieren. Dieser wird (sofern aktiviert) zwischen Twitter und Facebook-Button platziert (da der Facebook-Button stets eine variable Breite verlangt und deshalb bestenfalls rechts platziert wird).

Zur Einbindung stehen folgende Optionen bereit (als Konfigurationsbeispiel wurde jeweils der LinkedIn-Button als Standard gesetzt):

  • custom: Legt fest, ob der benutzerdefinierte Button angezeigt werden soll: 1 oder 0. Standard: 0.
  • custom_dynamic: Automatisch dynamische Einbindung des benutzerdefinierten Buttons: 1 oder 0. Standard: 0.
  • custom_name: Name des benutzerdefinierten Buttons, der im Optionsmenü angezeigt werden soll: Standard: LinkedIn
  • custom_dyn_code: Code der dynamischen Variante des Buttons. Standard: <script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-url="%url%" data-counter="right"></script>
  • custom_dyn_width: Breite der dynamischen Variante des Buttons (benötigt für die korrekte Abstandsregelung zum nächsten Button). Standard: 100px
  • custom_staticlink: Ziel-Link der statischen Variante des benutzerdefinierten Buttons. Standard: http://www.linkedin.com/shareArticle?mini=true&url=%url% (wobei %url% automatisch mit der aktuellen Seiten-URL ersetzt wird)
  • custom_icon: relativer Pfad der Grafik des statischen Buttons. Standard: custom_linkedin.png

7. Kompatibilität

ScrollTeaser ist mit allen modernen Browsern kompatibel. Ältere Browserversionen, im Besonderen des Internet Explorers, werden ggf. nicht unterstützt.

8. Lizensierung

ScrollTeaser ist unter der Externer Link:  Attribution 2.0 Generic (CC BY 2.0)-Lizenz lizensiert.