Simple 2-Klick-Lösung für Drittanbieter-Content

„Fremder Content“ oder Drittanbieter-Inhalte sind Code-Snippets wie z.B. Facebook-Like oder YouTube-Videos, die in die eigene Site eingebunden werden können, um dann dort gezeigt zu werden.

Eine 2-Klick-Lösung ist dabei ein Mechanismus, der den fremden Inhalt erst nach einem Klick anzeigt, um dann das „Gefällt mir“ zu klicken oder den Video starten zu können.

Eingesetzt wird der 2-Klick-Mechanismus aus Datenschutzgründen. So bleibt dem Besucher die Entscheidung überlassen, ob seine Daten mittels Cookies an den Anbieter übermittelt werden oder nicht.

Eine sehr leistungsfähige Lösung gibt es bei heise.de – allerdings umfasst sie mehr als 2MB und ist auf soziale Netze ausgelegt. Die hier gezeigte Lösung ist sehr schlank und eignet sich für jeden Inhalt, der eingebettet werden kann.

In Kürze: Es sind ein paar Zeilen jQuery, die aus einem data-Attribut den einzubettenden Code lesen und in einen Container schreiben. Vorbereitet wird es mit PHP. Es eignet sich zur multiplen Nutzung, d.h. es können mehrere eingebettete Links pro Seite eingesetzt werden.

Am Anfang steht der einzubettende Code, als Beispiel dient YouTube:

<iframe src="https://www.youtube.com/embed/ULzF5_zKdvM" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Dieser muss in das folgende data-embed:

<a class="embed" data-embed="" data-box="box1234">Youtube</a>
<div id="box1234" style="display: none;"></div>

Das Attribut data-box zeigt auf den Container „box1234“ für den einzubettenden Code. Statt eines festen Wertes kann hier ein schlichtes uniqid() verwendet werden.

PHP bereitet die Variablen auf…

<?php 
$embed = rawurlencode('<iframe src="https://www.youtube.com/embed/ULzF5_zKdvM" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>');
$boxid = uniqid();
?>

…und trägt sie hier ein:

<a class="embed" data-embed="<?= $embed ?>" data-box="<?= $boxid ?>">Youtube</a>
<div id="<?= $boxid ?>" style="display: none;"></div>

Das folgende jQuery kann den Inhalt dann einbetten und wieder entfernen:

$(document).ready(function () {
  $('body').on('click', '.embed', function () {
    var $el = $(this);
    var embed = $el.data('embed'); // code to embed
    var box = '#'+$el.data('box'); // the id of the box container

    if (!$(box).html()) {
      $(box).html(decodeURIComponent(embed));
      $(box).show();
    } else {
      $(box).hide();
      $(box).html('');
    }
    return false;
  });
});

Damit hat man eine simple Lösung, die nur wenige Zeilen Code benötigt.

Gegen diese Lösung könnte sprechen, dass manche embed-Element relativ groß seien und sie so unnötig „mitgeschleppt“ würden. Eine Antwort darauf wäre, nur den Drittanbieter-Link in „data-embed“ einzutragen und über ein Ajax-Request und etwas PHP den einzubettenden Code zu erhalten.

Weiterhin „merkt“ sich diese Lösung keine Entscheidung, bzw. ist nicht auf „Dauer-Ein“ einstellbar. Mögliche Lösung: Zum „Merken“ wird ein entsprechender Cookie gesetzt. Weiterhin müsste das jQuery in einer Funktion gekapselt werden. Per onload() wird wiederum etwas Javascript geladen, was bei aktivem Cookie diese Funktion für jedes (oder evtl auch nur ein betreffendes) Element mit der CSS-Klasse „embed“ einmal ausgeführt.

Schreibe einen Kommentar