Blocked Content Type anlegen

Blocked Content Type anlegen

Du bist hier:
Geschätzte Lesezeit: 4 min

Über Blocked Content Types

nach oben

Mit Hilfe der Blocked Content Types (BCTs) kannst du verschiedene Designs für geblockte Inhalte/Medien hinterlegen. Borlabs Cookie enthält bereits verschiedene Designs für YouTube, Instagram, Facebook, Google Maps, Vimeo und Twitter, die du anpassen kannst. Anhand dieses Artikels erfährst du, wie du einen eigenen Blocked Content Type für den Dienst SoundCloud anlegen kannst.

Neuen Blocked Content Type hinzufügen

nach oben

Klicke zunächst in Borlabs Cookie auf den Tab Blocked Content Types und anschließend auf den Button Neu hinzufügen.

Fülle die Felder wie im Screenshot dargestellt aus. Die ID ist eine eindeutige Kennzeichnung, ausschließlich bestehend aus Kleinbuchstaben, die für diesen Blocked Content Type durch dich festgelegt wird. Die ID kann später in Shortcodes verwendet werden, um einen zu blockierenden Inhalt dem Blocked Content Type zuzuweisen. In vielen Fällen wirst du sie aber gar nicht benötigen.

Setze das Häkchen bei Status, damit der BCT auf deiner Website zur Verfügung steht.

Der Name wird an verschiedenen Stellen verwendet, im Feld Vorschau beispielsweise wird die Variable %%name%% mit dem Wert von Name ersetzt.

Unter Host(s) trägst du soundcloud.com ein. Wird jetzt ein Iframe oder eine oEmbed-URL mit dem Host soundcloud.com oder w.soundcloud.com gefunden, verknüpft Borlabs Cookie automatisch den BCT von SoundCloud mit dem Iframe und blockiert ihn.

Unter Vorschau hinterlegst du das HTML-Gerüst deines Designs/Layouts für diesen BCT. Standardmäßig wird dort bereits ein funktionierender HTML-Code hinterlegt, den du nach belieben ersetzen kann.

Alle anderen Optionen und Felder kannst du für dieses Beispiel ignorieren. Scrolle anschließend nach unten und drücke auf Speichern.

Demo Inhalt erstellen

nach oben

Erstelle jetzt zum Testen eine Seite oder Beitrag in WordPress und füge dort einen Iframe von SoundCloud ein. Hast du gerade keinen SoundCloud Iframe-Code zur Hand, kannst du diesen hier kopieren und in der Text Ansicht des WordPress Editors oder einem HTML Element in deinem PageBuilder einfügen:

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/499274556&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

Speichere die Seite und rufe die Vorschau auf. Wenn du alles richtig gemacht hast, sollte der Iframe von SoundCloud wie im folgenden Screenshot blockiert dargestellt werden.

Darstellung anpassen

nach oben

Ein richtiger Hingucker ist das jetzt nicht, aber immerhin funktioniert es. Als nächstes werten wir die Darstellung auf und verpassen ihr einen kleinen SoundCloud-Touch. Speichere zunächst das SoundCloud Logo auf deiner Festplatte ab und lade es in deinem WordPress hoch.

Du kannst das Logo in verschiedenen Größen und Farben bei SoundCloud herunterladen. Alternativ drücke mit der rechten Maustaste auf das Bild und wähle Grafik speichern unter... aus.

Ersetze als nächstes den Inhalt im Feld Vorschau mit folgendem HTML-Code:

<div class="bct-soundcloud">
	<div class="logo">
		<img src="https://www.deine-website.de/wp-content/uploads/2018/09/soundcloud-logo-orange.png" alt="SoundCloud Logo">
	</div>
	<div class="text">
		<p><a role="button" data-borlabs-cookie-unblock>SoundCloud Player laden</a></p>
		<p>Durch das Laden akzeptieren Sie die <a href="https://soundcloud.com/pages/privacy" target="_blank">SoundCloud Datenschutzerklärung</a>.</p>
	</div>
</div>

Klicke in der Medien-Verwaltung auf das hochgeladene SoundCloud Logo und kopiere die URL des Logos.


Ersetze im Vorschau HTML-Code den Pfad des Bildes (https://www.deine-webite.de/wp-content/...) durch deine URL zum Bild.

Speichere nun den geänderten Vorschau HTML-Code. Klicke Anschließend auf den Tab Styling und füge im Feld für Benutzerdefiniertes CSS folgenden CSS-Code ein:

.bct-soundcloud * {
    box-sizing: border-box;
}
    
.bct-soundcloud {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    color: #333;
    display: table;
}

.bct-soundcloud .logo {
    display: table-cell;
    vertical-align: middle;
    padding: 8px;
}

.bct-soundcloud .logo img {
    vertical-align: middle;
}

.bct-soundcloud .text {
    display: table-cell;
    vertical-align: middle;
    padding: 8px;
    text-align:center;
}

.bct-soundcloud .text p {
    font-size: 11px;
    margin: 0;
    padding: 0;
}

.bct-soundcloud .text a[role="button"] {
    background: linear-gradient(#ff8800, #ff3300);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    margin: 0 0 4px 0;
    padding: 2px 12px;
}

.bct-soundcloud .text a[role="button"]:hover {
    text-decoration: none;
}

Drücke auf Einstellungen speichern und lade die Seite mit dem SoundCloud Iframe-Code neu. Am besten du nutzt dafür den Browser im Inkognito-Modus, damit du keine gecachte CSS-Datei lädst. Falls du ein Caching Plugin aktiviert hast oder Autoptimize verwendest, deaktiviere es vorübergehend. Auf deiner Seite sollte nun der blockierte SoundCloud Iframe wie folgt aussehen:

Das sieht doch schon deutlich besser aus!

Darstellung anpassen - Erweitert

nach oben

Eine Besonderheit der BCTs ist, dass es jetzt möglich ist, dem Besucher die Option zu geben, Inhalte/Medien wie denen von SoundCloud grundsätzlich zu entsperren, so dass nicht jedes Mal erneut auf SoundCloud Player laden geklickt werden muss. Dafür muss lediglich eine Checkbox mit dem Namen unblockAll hinterlegt werden. Borlabs Cookie erkennt diese Checkbox und ob sie aktiviert wurde, und speichert diese Information im Cookie des Besucher, um zukünftig automatisch alle blockierten Inhalte/Medien des Blocked Content Types zu entsperren.

Um diese Option anzubieten, ersetze den Vorschau HTML-Code mit folgendem:

<div class="bct-soundcloud">
	<div class="logo">
		<img src="http://www.deine-website.de/wp-content/uploads/2018/09/soundcloud-logo-orange.png" alt="SoundCloud Logo">
	</div>
	<div class="text">
		<p class="bct-left"><a role="button" data-borlabs-cookie-unblock>SoundCloud Player laden</a></p>
		<p class="bct-right"><label><input type="checkbox" name="unblockAll" value="1" checked> Zukünftig nicht mehr blockieren.</label></p>
		<p>Durch das Laden akzeptieren Sie die <a href="https://soundcloud.com/pages/privacy" target="_blank">SoundCloud Datenschutzerklärung</a>.</p>
	</div>
</div>

Vergiss nicht die URL des SoundCloud Logos im HTML-Code anzupassen. Klicke auf Speichern und klicke danach auf den Tab Styling. Ersetze den CSS-Code von vorher mit folgendem CSS-Code:

.bct-soundcloud * {
    box-sizing: border-box;
}
    
.bct-soundcloud {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    color: #333;
    display: table;
}

.bct-soundcloud .logo {
    display: table-cell;
    vertical-align: middle;
    padding: 8px;
}

.bct-soundcloud .logo img {
    vertical-align: middle;
}

.bct-soundcloud .text {
    display: table-cell;
    vertical-align: middle;
    padding: 8px;
}

.bct-soundcloud .text p {
    font-size: 11px;
    margin: 0;
    padding: 0;
}

.bct-soundcloud .text a[role="button"] {
    background: linear-gradient(#ff8800, #ff3300);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    margin: 0 0 4px 0;
    padding: 2px 12px;
}

.bct-soundcloud .text a[role="button"]:hover {
    text-decoration: none;
}

.bct-left {
    display: inline-block;
    text-align: left;
    width: 49%;
}

.bct-right {
    display: inline-block;
    text-align: right;
    width: 49%;
}

Drücke auf Einstellungen speichern und lade die Seite mit dem SoundCloud Iframe-Code neu. Die Darstellung des blockierten SoundCloud Iframes sollte nun wie folgt aussehen:

War der Artikel hilfreich?
Nicht hilfreich 0
Aufrufe: 426