ausgehende Links zu anderen Websites filtern oder kennzeichnen im Sinne der DSGVO

    Meine neuen Websites stehen bald vor der Fertigstellung. In den diversen Beiträgen habe ich auch Links zu manchen anderen Websites angelegt. Klickt der Besucher darauf, so werden dann ja personenbezogene Daten an den Inhaber der externen Website übertragen wie z.B. IP-Adresse, Referrer, Browsertyp usw. usw.


    Generell aber habe ich die Site incl. Matomo so gestaltet, dass kein Cookie-Consent erforderlich ist und somit das lästige „Weg-Klick-Banner” entfällt.


    Wie sollte dann ein externer Link gestaltet sein, damit er der DSGVO genügt?

    1. Ist dort ein Button erforderlich, der zunächst ein PopUp mit Hinweis zur Datenübertragung zeigt und von dem aus erst dann der Link genutzt werden kann? Und welche frei konfigurierbaren Lösungen als Joomla-Extensions sollte ich hierzu nutzen
    2. Oder reicht es aus, den nach extern gehenden Link als solchen eindeutig zu kennzeichnen, z.B. durch ein Kästchen mit Pfeil nach rechts oben? Und wie würde im letztgenannten Fall der Besucher über die Bedeutung dieser Kennzeichnung informiert, sodass eine "informierte Einwilligung" gemäß DSGVO überhaupt möglich wird?

    Der zweite Fall ist die Einbindung einer interaktiven OpenStreetMap-Karte. Hier bin ich mir sicher, dass die relativ aufwendige Lösung gemäß Frage 1 erforderlich ist, genau so als wenn ich YouTube- oder Vimeo-Videos einbinden würde.


    Trotz sorgfältiger Suche bei extensions.joomla.com habe ich keine aussagekräftige Beschreibung bei den Extensions gefunden, aus der hervor geht, ob ich außer YouTube oder Vimeo-Links auch Links zu anderen Websites wie z.B. OpenStreetMap mit einem Vorschaltbutton versehen kann. (Der einzubindende Content der anderen Site würde vermutlich dann immer per Iframe geladen.)


    Und zu Frage 2 fand ich folgende CSS-Lösung. (Könnte ja auch für andere hier hilfreich sein.):


    Externe Links auf Webseiten: Was ist zu beachten?
    Aus Datenschutzgründen sind Social Media Plugins wie die von Facebook oder Twitter hochkritisch. Wie sieht es mit einer einfachen Verlinkung auf Social Media…
    dr-dsgvo.de


    Code
    a[href^="http://"]:not([href*="dr-dsgvo.de"]):after,
a[href^="https://"]:not([href*="dr-dsgvo.de"]):after {
content: url('/fonts/external-link_sm2.png');  vertical-align:unset;  padding-left:4px;
}

    Ob das funktioniert, hab ich noch nicht ausprobiert.

    Für iframes OpenStreetMap zum Beispiel hier den CCC TwoClick:


    Für externe Link das «Kästchen mit Pfeil» und zusätzlich in den Datenschutz schreiben was dieses Zeichen bedeutet.


    Sollte es meiner Ansicht nach genügen, aber vielleicht kommen da noch weitere Meinungen.

    Stef Herzlichen Dank dir. Die von dir vorgeschlagene Lösung scheint genau das zu sein, was ich brauche.


    Ich kenne mich mit Github nicht aus. Wie / wo kann ich dort dasa Modul herunter laden, sodass es in einer installierbaren Zip-Datei vorliegt? Das finde ich nicht.


    Jetzt muss ich nur noch schauen, wie ich das mit meinem YooTheme Pagebuilder kombiniere. Dort werden Lightboxen entweder als Modal oder per Lightbox angezeigt und in der Lightbox der iframe geöffnet.

    Das zugehörige CSS verwendet Uikit. Leider funktionieren die Light- / Modalboxen immer noch nicht wirklich so, wie in deren Dokumentation angegeben.

    Ahhhh unter "Releases" ganz rechts war es zu finden. Herzlichen Dank dir!

    So ich habs probiert und das Modul funktioniert als solches auch prima. Aber die Einbindung der interaktiven OSM-Karte gelingt mir noch nicht.

    In YooTheme gibt es extra ein Element, bei dem ganz komfortabel OSM integriert wird und zahlreiche Gestaltungsoptionen möglich sind. Dazu wird ein Script von Leafletjs.com genutzt und OSM dahinein geladen. Da ich den zugehörigen Code, den YooTheme dazu in die Webseite schreibt, nicht extrahieren und irgendwo einfügen kann, habe ich einfach einen Joomla-Beitrag mit dem YooTheme-Element und der OSM-Karte als einzigen Inhalt angelegt und diesen Beitrag dann mit vollständiger URL in den iframe eingetragen.

    Nun wird die Karte angezeigt, aber sie ist statisch, nicht interaktiv. Vermutlich lädt nun das Script von Leafletjs.com nicht mehr.


    Ich fand auch zwei weitere Extensions, die ich aber vorerst mal nicht nutzen möchte, die ich hier aber für Interessenten nenne:

    Bei Framotec gibt es eine Extension zur korrekten Einbindung von OSM, kostet aber 17,85 EUR je Jahr pro Website. Ist mir zuviel. und ich fand ein weiteres Github-Projekt, das ähnlich wie mod_ccctwoclick arbeitet. Es heißt mod_qliframe


    Mein Ziel ist es nun, in dem URL-Feld für den Iframe, der von mod_ccctwoclick erzeugt wird, eine erweiterte URL einzugeben, mit der eine interaktive OSM-Karte mitsamt meinem Standort als Symbol dargestellt wird. (Besser zwei beschriftbare Symbole für Haus und für Parkplatz). Aber gemäß der Erläuterungen bei OSM hierist das ohne ein Script-Gedöne nicht möglich.

    Gibt es doch noch einfachere Lösungen?

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Clemens-XS mit diesem Beitrag zusammengefügt.

    Gesetzt den Fall, was ich persönlich nicht glaube, dass man bei externen Links eine Auszeichnung nach DSGVO braucht, so weit diese Links nicht schon beim Besuch deiner Seite Daten irgendwohin senden, würde eine rein visuelle Auszeichnung des Links nicht reichen. Könnte ja auch Sehbehinderte geben, die gerne Abmahnungen schicken ;)

    Oder jemand besucht die Seite im reinen Lesemodus oder mit bestimmten deaktivierten Elementen oder ...


    Oder anders: Ich persönlich würde es eher als nicht ratsam ansehen, in der Datenschutzerklärung zu behaupten, dass Links die keine externe, visuelle Auszeichnung haben, nicht auf externe Seiten führen.


    Ich halte mich da eher (na ja, auch nicht immer) an die uralten Tipps, dass man einen Linktext so formuliert und der zusätzliche title ggf. als Ergänzung, dass ein Besucher weiß, wo es hingehen wird. Oder man hat halt gleich den Link selbst als Linktext. Jedenfalls nicht wegen der DSGVO, sondern um den Besucher zu informieren...

    Re:Later Da stimme ich dir zu und habe schon immer im laufenden Text einen Hinweis, dass ich nun zu einer externen Quelle verlinke. Mit dem CSS, das ich oben veröffentlichte, habe ich jetzt ein "Weltkugel-Icon" an jeden Link angefügt, der http oder https enthält.


    Aktuell beschäftigt mich nur die technische Seite der DSGVO-korrekten Einbindung von OSM. Vermutlich komme ich nicht um die Verwendung des Leaflet-Scripts herum. Leider steht in der Dokumentation hier nur, wie man das Ganze per weiterem JS einbindet. Und von JS verstehe ich nun mal nix.


    Ich fand jetzt noch diese Seite hier: https://switch2osm.org/using-t…ing-started-with-leaflet/

    Dort findet sich ein Beispiel, wie OSM in eine Webseite integriert wird. Damit müsste ich damit eine HTML-Seite basteln, die dann über eine reguläre URL in den Iframe geladen wird. Genau das habe ich gerade ausprobiert. Die Seite wird prima angezeigt, wenn ich sie direkt lade. Wenn ich sie aber über mod_icctwoclick im Iframe darstellen will, wird sie nicht geladen.

    Zitat

    Ich fand jetzt noch diese Seite hier: https://switch2osm.org/using-t…ing-started-with-leaflet/

    Dort findet sich ein Beispiel, wie OSM in eine Webseite integriert wird. Damit müsste ich damit eine HTML-Seite basteln, die dann über eine reguläre URL in den Iframe geladen wird. Genau das habe ich gerade ausprobiert. Die Seite wird prima angezeigt, wenn ich sie direkt lade. Wenn ich sie aber über mod_icctwoclick im Iframe darstellen will, wird sie nicht geladen.

    Weiß auch nicht, aber jetzt funktioniert es endlich mit der separat angelegten Seite. Aber die Gestaltungsmöglichkeiten gefallen mir nicht: Schön ist, dass der Datenschutz-Text ausgeblendet wird, sobald man mit dem Button akzeptiert hat. Aber der Erklärungstext und die beiden Links (Datenschutzerklärung und Karte öffnen) laufen ineinander in einem <p>-Block. In der CSS finden sich vier Zeilen und ich sehe nicht, wo ich noch etwas beeinflussen kann. Das Vorschaubild zur Karte wird bei schmalerer Screenwidth in der Breite gestaucht, die Höhe bleibt gleich. Bei Mobilgeräten im Portraitmodus sieht das nicht so toll aus.


    Nun habe ich das mod_qliframe auch noch installiert. Der Datenschutztext wird hier nicht ausgeblendet, nachdem man per Button zugestimmt hat. Optisch gut ist, dass nun zwei echte Buttons oben an der Karte dran hängen. Das Vorschaubild zur Karte wird hier gleichmäßig scaliert auf 100% width gehalten.


    Nachdem also erstmal die Karte über eine separate HTML-Datei in den Iframe geladen werden kann, prüfe ich jetzt noch Lösungen, die ich in Verbindung mit YooTheme Pagebuilder und Lightbox / Modalbox selbst erstellen kann.


    Ich komme also so oder so zu einer Lösung und ich danke für eure Unterstützung hier!

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Clemens-XS mit diesem Beitrag zusammengefügt.

    Zitat von Clemens-XS
    Code
    a[href^="http://"]:not([href*="dr-dsgvo.de"]):after,
a[href^="https://"]:not([href*="dr-dsgvo.de"]):after {
content: url('/fonts/external-link_sm2.png');  vertical-align:unset;  padding-left:4px;
}

    Ob das funktioniert, hab ich noch nicht ausprobiert.

    bei mir hatte der Code bis vor Kurzem funktioniert, bzw. etwas angepasst so in Benutzung:

    Code
    a[href^='http://']:not( 
 [href^='http://www.mona-stefan.de/']):not( 
 [href^='http://mona-stefan.de/']),
a[href^='https://']:not( 
 [href^='https://www.mona-stefan.de/']):not( 
 [href^='https://mona-stefan.de/'])
{
 padding-right: 12px;
 background: url(../images/External.png) right no-repeat;
}


    aber nun funktioniert das nicht mehr bzw. sieht nun so aus

    Zitat


    hier das Bildchen für die externe Verlinkung:

    hier mit Quellpfad: https://mona-stefan.de/images/External.png (hab dasselbe Bild auch als External.svg gespeichert, selber Effekt)

    Der Screenshot mit den defekten Bildchen von weiter oben stammt von hier: https://mona-stefan.de/motorsa…/03-ersatzteile-2#komatsu


    Es sieht so aus, als würde das Bild viel zu groß hinterlegt werden.

    Woher kann das kommen?

    Stefanseiner :

    Warum kaperst du diesen Thread anstatt einen eigenen zu erstellen ?


    Zitat

    Für die Fragesteller:


    ...Neue Fragen, vor allem, wenn diese nicht vom Threadersteller kommen, nicht in schon bestehende Threads posten (Kapern eines Threads), sondern einen neuen eigenen Thread eröffnen...

    aus:


    Forenregeln

    Nochmal kurz zur Kennzeichnung externer Links.


    Ich bin da folgenden Weg gegangen:


    1) Folgenden Code in die user.css packen:

    Code
    /* Externe Links mit extern-link.gif markieren mit class="ext_link" */
.ext_link:after {
  content: url(../../../../../images/extern-link.gif);
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: none;
  padding-left: 5px;
}

    2) Die angehängte Datei "extern-link.gif" in das images-Verzeichnis laden


    3) Den Quellcode in den Artikeln für die Link wie folgt ändern:


    von z.B.


    Code
    <a href="https://www.test.com">www.test.com</a>


    ändern auf:


    Code
    <a href="https://www.test.com" class="ext_link" title="Achtung! Dies ist ein externer Link!" target="_blank" rel="noopener">www.test.com</a>


    Damit sollte man eigentlich auf der sicheren Seite sein ganz ohne Plugins und Aufwand...


    VG, Jo

    Zitat von Stefanseiner

    weil die Frage dieselbe ist: wie kann man mit Joomla das Markieren externer Links realisieren.

    Und zusätzlich da ich den vom TE erwähnten Code benutze

    Ist meiner Meinung nach aber kein grund einen Thread zu kapern.

    Du kannst ja in deinem eigenen Thread diesen Thread einfach verlinken und/oder zitieren usw...

    Zitat von Kapstadt

    Nochmal kurz zur Kennzeichnung externer Links.


    Ich bin da folgenden Weg gegangen:

    danke, die Lösung mit Klassen habe ich auch schon gefunden, scheint mir aber zu aufwändig für bereits existierende Links



    Zitat von Sieger66

    Ist meiner Meinung nach aber kein grund einen Thread zu kapern.

    vielleicht haben wir da unterschiedliche Definitionen, aber in einem Diskussionsforum, wo man idR themengebunden diskutiert und nicht TE-gebunden ist es gemeinhin dann ein "Kapern", wenn man das Thema wechselt oder in eine andere Richtung lenkt.

    Also z.B. die Diskussion über Thread-Kapern, die könnte man gut auslagern. Alles bis dahin ist so exakt am Thema entlang, wie es nur geht.

    Stefanseiner Ich habe inzwischen folgende Lösung zur Kennzeichnung externer Links mittels eines GIF:

    Code
    /* externe Links mit Icon kennzeichnen */
a[href^="http://"]:not([href*="meine-domain.de"]):after,
a[href^="https://"]:not([href*="meine-domain.de"]):after {
content: url('/images/grafik/weblink.png');    padding-left:6px;
}

    Das funktioniert zuverlässig und ohne Klassen.



    Und für die Hinterlegung von Text-Links mit einer Hintergrundfarbe habe ich für meine Website, die mit dem YooThemePagebuilder gebaut ist und daher UIkit verwendet, folgenden Code von YooTheme bekommen:

    Code
    #tm-main .uk-link,
#tm-main a:not([class*="uk-"]) {
background-color: rgba(255,151,0,0.2);
color: inherit;
padding: 0 4px;
}

    Du müsstest dir den Code halt passend basteln, wenn du kein UIkit verwendest.


    Es gibt aber auch Elemente, die z.B. anklickbar sind, wie z.B. die Icons in Icagenda oder die Breadcrumbs oder die Titel der Accordions, in denen keine URL steht, sondern eine JS-Funktion aufgerufen wird. Diese Elemente werden leider (zurzeit noch) ebenfalls als Link farbig hinterlegt. Da bastele ich noch dran. Und wenn ichs nicht hinbekomme, muss ich das halt so akzeptieren. Sooo schlimm sieht das jetzt auch nicht aus.


    Mir gefällt einfach nicht, wenn der Text plötzlich wegen eines Links in strahlendem Blau oder anderer auffälliger Farbe erstrahlen und dann den Lesefluss aber auch den Gesamteindruck der Seite stören. Da finde ich einen sanften Pastellton hinter den Links viel passender und der Kontrast beim Lesen bleibt erhalten. Was Google dazu meint, ist mir sch... egal.