Social-Media- und Landkarteneinbettungen
Allgemeines
Mit dieser Funktionalität können Webautoren Plugins von sozialen Netzwerken und Landkartendiensten datenschutzkonform in die Webseite einbinden, indem der bereitgestellte einzubettende Quellcode der Anbieter Verwendung findet. Hierbei wird eine eigens erstellte 2-Klick-Lösung verwendet. Das bedeutet, dass beim ersten Besuch der Webseite mit einem so eingebundenen Plugin erst die Bestätigung (Pop-up) für das Anzeigen des Inhalt gegeben werden muss, dass Daten an Dritte übermittelt werden dürfen. Ansonsten ist der Inhalt nicht zu sehen. Diese Entscheidung kann in einem Cookie für 7 Tage gespeichert werden, danach ist eine erneute Erlaubnis notwendig.
Vorteil: Bei Besuch unserer Webseiten werden keine Daten unserer Webbesucher an die Dienste übermittelt. Erst wenn der Benutzer klickt, werden die Inhalte des Plugin angezeigt und Daten an die Anbieter der sozialen Dienste übermittelt.
Die folgenden Dienste und deren angegebenen Plugins werden dabei unterstützt:
- Facebook (Post, Kommentar, Video)
- Google Maps (Karte)
- Instagram (Foto)
- OpenStreetMap (Karte, API)
- Twitter (Tweet, Timeline)
- YouTube (Video)
Um die Funktionen nutzen zu können, muss die Datei
php/ext.inc am Seitenanfang geladen werden:
...
# Nutzung von Funktionen zum Einbetten externer Inhalte
require_once('php/ext.inc');
seite(__FILE__);Zur Beachtung:
- Browser muss JavaScript unterstützen, sonst werden diese Funktionen nicht wirksam.
- Webseite muss jQuery einbinden (ist standardmäßig der Fall).
Vordefinierte Funktionen
Einbetten von externen Inhalten
string ext_embed(string $code [, array($options)])
Die oben angegebenen Dienste stellen für das Einbinden/Einbetten der
Plugins einen Quellcode bereit. Dieser bereitgestellte Quellcode der Anbieter
wird für diese Funktionalität verwendet und wird im Folgenden durch
$code symbolisiert.
Parameter
$code |
erforderlich |
|
| $options | optional |
|
Rückgabewert
HTML-Text – kann mit echo ausgegeben werden.
Aufruf von Pop-up mit externem Inhalt
string ext_hs_url(string $link_text, string $url, string $titel, [, array $stil])
Ruft die Funktion hs_url()
auf, ergänzt diese um den Bestätigungsdialog für den externen Anbieter. Erlaubt
sind die iframe-Zielangaben der genannten Anbieter.
Parameter
Wie bei hs_url; zu beachten ist aber, dass $url
einem in der Datenschutzerklärung genannten Anbieter zugeordnet werden
können muss.
Rückgabewert
HTML-Text – kann mit echo ausgegeben werden.
Beispiel für Instagram
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_embed('<blockquote class="instagram-media" ...>...</blockquote><script ...></script>');
?>Ergebnis
Einbettung von Inhalten von externem Anbieter
Die Anzeige von eingebetteten externen Inhalten der Plattform Instagram auf der Website der TU Chemnitz und damit der Verbindungsaufbau zu dem externen Server des Anbieters setzt Ihre vorherige Einwilligung voraus. Erst wenn Sie die Einwilligung für den Anbieter erteilt haben, werden (personenbezogene) Daten von Ihnen an den externen Serverbetreiber, der sich gegebenenfalls in einem Drittland außerhalb der Europäischen Union befindet, weitergeleitet und dort verarbeitet, damit die Anzeige der Inhalte erfolgen kann.
Mit Bestätigung des Buttons erklären Sie sich ausdrücklich und freiwillig damit einverstanden, dass Ihre personenbezogenen Daten in dem in der Datenschutzerklärung näher beschriebenen Umfang und zu den dort beschriebenen Zwecken zur Einbettung der externen Inhalte auf der Website der TU Chemnitz verarbeitet werden. Die Einwilligung kann jederzeit insgesamt oder getrennt und ohne unangemessene Nachteile mit Wirkung für die Zukunft widerrufen werden.
Beispiel für Instagram
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_embed(
'<blockquote class="instagram-media" ...>...</blockquote><script ...></script>',
array('button' => 'Show Instagram Photo')
);
?>Ergebnis
Einbettung von Inhalten von externem Anbieter
Die Anzeige von eingebetteten externen Inhalten der Plattform Instagram auf der Website der TU Chemnitz und damit der Verbindungsaufbau zu dem externen Server des Anbieters setzt Ihre vorherige Einwilligung voraus. Erst wenn Sie die Einwilligung für den Anbieter erteilt haben, werden (personenbezogene) Daten von Ihnen an den externen Serverbetreiber, der sich gegebenenfalls in einem Drittland außerhalb der Europäischen Union befindet, weitergeleitet und dort verarbeitet, damit die Anzeige der Inhalte erfolgen kann.
Mit Bestätigung des Buttons erklären Sie sich ausdrücklich und freiwillig damit einverstanden, dass Ihre personenbezogenen Daten in dem in der Datenschutzerklärung näher beschriebenen Umfang und zu den dort beschriebenen Zwecken zur Einbettung der externen Inhalte auf der Website der TU Chemnitz verarbeitet werden. Die Einwilligung kann jederzeit insgesamt oder getrennt und ohne unangemessene Nachteile mit Wirkung für die Zukunft widerrufen werden.
Beispiel für Instagram
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_embed(
'<blockquote class="instagram-media" ...>...</blockquote><script ...></script>',
array('button' => '<img src="..." alt="...">')
);
?>Ergebnis
Einbettung von Inhalten von externem Anbieter
Die Anzeige von eingebetteten externen Inhalten der Plattform Instagram auf der Website der TU Chemnitz und damit der Verbindungsaufbau zu dem externen Server des Anbieters setzt Ihre vorherige Einwilligung voraus. Erst wenn Sie die Einwilligung für den Anbieter erteilt haben, werden (personenbezogene) Daten von Ihnen an den externen Serverbetreiber, der sich gegebenenfalls in einem Drittland außerhalb der Europäischen Union befindet, weitergeleitet und dort verarbeitet, damit die Anzeige der Inhalte erfolgen kann.
Mit Bestätigung des Buttons erklären Sie sich ausdrücklich und freiwillig damit einverstanden, dass Ihre personenbezogenen Daten in dem in der Datenschutzerklärung näher beschriebenen Umfang und zu den dort beschriebenen Zwecken zur Einbettung der externen Inhalte auf der Website der TU Chemnitz verarbeitet werden. Die Einwilligung kann jederzeit insgesamt oder getrennt und ohne unangemessene Nachteile mit Wirkung für die Zukunft widerrufen werden.
Nutzung von Cascading Style Sheets (CSS)
Für den Fall, dass das eingebundene Plugin sich nicht richtig in die Webseite eingliedert, kann mithilfe von Cascading Style Sheets (CSS) die Position wie auch die Größe angepasst werden. Dafür stellt die Funktion die Möglichkeit bereit, den Button bzw. das anklickbare Objekt mit einer selbst definierten CSS-Klasse zu versehen und damit an die Wünsche anzupassen.
Folgende Regeln gelten für die Namen der selbst erstellten CSS-Klassen:
- Die Namen dürfen nur kleine Buchstaben (a-z), Bindestriche (-) und Unterstriche (_) enthalten.
- Am Anfang und Ende des Namens muss ein kleiner Buchstabe stehen.
- Die Mindestlänge des Namens ist zwei, besteht somit nur aus kleinen Buchstaben.
Hinweise:
Es kann vorkommen, dass der einzubettende Quellcode leicht abgeändert werden muss, um das Plugin an die Webseite anzupassen. Denn sehr oft wird dem Plugin eine feste Größe (Höhe, Breite) mitgegeben, die eventuell angepasst oder entfernt werden kann. Auch das Ändern in einen prozentualen Wert kann möglich sein. Wenn das Plugin aber eine Mindestgröße haben muss, dann sollte der Platzhalter diesen Größen entsprechen. In den meisten Fällen ist die Breite wichtiger als die Höhe. Genauere Informationen dazu sind in den Dokumentationen beim Anbieter zu finden.
Beispiele
Inhalt der CSS-Datei (own_css_file.css)
– gilt für alle Beispiele
.button-width-instagram { width: 325px; }
.own-instagram-class-a { margin-right: 10px; width: 325px; float: left; }
.own-instagram-class-b { margin-left: 10px; width: 325px; float: right; }
.own-twitter-timeline-class-a { height: 200px; } // Scrollbalken!Erklärung zu den Instagram-CSS-Klassen:
Das Bild wird in diesen Fällen immer auf eine Breite von
325px (width: 325px) gestreckt, durch die
CSS-Klasse button-width-instagram. Denn es muss
genügend Platz für das Foto von Instagram vorhanden
sein. Wie im einzubettenden Quellcode von Instagram zu sehen
ist, wird dort von einer Mindestbreite von 326px
(min-width: 326px) ausgegangen. Deshalb wird auch
bei den anderen CSS-Klassen
(own-instagram-class-?) immer eine feste Breite
(width: 325px) angegeben.
Erklärung zur Twitter-Timeline-CSS-Klasse:
Wenn die Einträge in der Twitter Timeline nicht
beschränkt werden, würde diese Liste sehr lang
werden. In diesem Beispiel ist die Höhe der Twitter
Timeline (own-twitter-timeline-class-a) auf 200px
(height: 200px) begrenzt.
Inhalt des Seitenanfangs
<?php
...
$css_in = '@import url(own_css_file.css)'; // beinhaltet mehrere CSS-Klassen
require_once('php/ext.inc');
seite(__FILE__);
?>
...Instagram-Beispiel
...
<?php
echo ext_embed(
'<blockquote class="instagram-media" ...>...</blockquote><script ...></script>',
array(
'button' => '<img class="button-width-instagram" src="instagram_privacy.gif" alt="...">',
'css_class' => 'own-instagram-class-a',
)
);
?>
Lorem ipsum dolor sit amet, ...Ergebnis
Einbettung von Inhalten von externem Anbieter
Die Anzeige von eingebetteten externen Inhalten der Plattform Instagram auf der Website der TU Chemnitz und damit der Verbindungsaufbau zu dem externen Server des Anbieters setzt Ihre vorherige Einwilligung voraus. Erst wenn Sie die Einwilligung für den Anbieter erteilt haben, werden (personenbezogene) Daten von Ihnen an den externen Serverbetreiber, der sich gegebenenfalls in einem Drittland außerhalb der Europäischen Union befindet, weitergeleitet und dort verarbeitet, damit die Anzeige der Inhalte erfolgen kann.
Mit Bestätigung des Buttons erklären Sie sich ausdrücklich und freiwillig damit einverstanden, dass Ihre personenbezogenen Daten in dem in der Datenschutzerklärung näher beschriebenen Umfang und zu den dort beschriebenen Zwecken zur Einbettung der externen Inhalte auf der Website der TU Chemnitz verarbeitet werden. Die Einwilligung kann jederzeit insgesamt oder getrennt und ohne unangemessene Nachteile mit Wirkung für die Zukunft widerrufen werden.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Twitter-Timeline-Beispiel
...
<div class="row">
<div class="col-sm-8" style="text-align:justify">
Lorem ipsum dolor sit amet, ...
</div>
<div class="col-sm-4">
<?php
echo ext_embed('<a class="twitter-timeline" ...>...</a> <script ...></script>',
array('css_class' => 'own-twitter-timeline-class-a')
);
?>
</div>
</div>
...Ergebnis
Einbettung von Inhalten von externem Anbieter
Die Anzeige von eingebetteten externen Inhalten der Plattform Twitter auf der Website der TU Chemnitz und damit der Verbindungsaufbau zu dem externen Server des Anbieters setzt Ihre vorherige Einwilligung voraus. Erst wenn Sie die Einwilligung für den Anbieter erteilt haben, werden (personenbezogene) Daten von Ihnen an den externen Serverbetreiber, der sich gegebenenfalls in einem Drittland außerhalb der Europäischen Union befindet, weitergeleitet und dort verarbeitet, damit die Anzeige der Inhalte erfolgen kann.
Mit Bestätigung des Buttons erklären Sie sich ausdrücklich und freiwillig damit einverstanden, dass Ihre personenbezogenen Daten in dem in der Datenschutzerklärung näher beschriebenen Umfang und zu den dort beschriebenen Zwecken zur Einbettung der externen Inhalte auf der Website der TU Chemnitz verarbeitet werden. Die Einwilligung kann jederzeit insgesamt oder getrennt und ohne unangemessene Nachteile mit Wirkung für die Zukunft widerrufen werden.
Beispiel für OpenStreetMap
<?php
...
require_once('php/ext.inc');
seite(__FILE__);
?>
...
<?php
echo ext_hs_url('Kartenansicht', 'https://www.openstreetmap.org/export/embed.html?...');
?>Auf www.openstreetmap.org befindet sich rechts
die Teilen-Funktion. Der HTML-Code ist zum Einbetten via
ext_embed() gedacht. Aus dem HTML-Code die
iframe-src-Adresse kann für ext_hs_url() verwendet
werden.
Ergebnis
Einbettung von Inhalten von externem Anbieter
Die Anzeige von eingebetteten externen Inhalten der Plattform OpenStreetMap auf der Website der TU Chemnitz und damit der Verbindungsaufbau zu dem externen Server des Anbieters setzt Ihre vorherige Einwilligung voraus. Erst wenn Sie die Einwilligung für den Anbieter erteilt haben, werden (personenbezogene) Daten von Ihnen an den externen Serverbetreiber, der sich gegebenenfalls in einem Drittland außerhalb der Europäischen Union befindet, weitergeleitet und dort verarbeitet, damit die Anzeige der Inhalte erfolgen kann.
Mit Bestätigung des Buttons erklären Sie sich ausdrücklich und freiwillig damit einverstanden, dass Ihre personenbezogenen Daten in dem in der Datenschutzerklärung näher beschriebenen Umfang und zu den dort beschriebenen Zwecken zur Einbettung der externen Inhalte auf der Website der TU Chemnitz verarbeitet werden. Die Einwilligung kann jederzeit insgesamt oder getrennt und ohne unangemessene Nachteile mit Wirkung für die Zukunft widerrufen werden.
