koekje

Der Cookie Manager mit Streuseln

Spätestens seit der DSGVO sind Cookies in aller Munde – unverstanden, verteufelt und doch oftmals essentiell für die Einbindung und Nutzung diverser Dienste, auf die viele Webseitenbetreiber nicht verzichten wollen. Mancher Dienst, wie beispielsweise Tracker, haben einen essentiellen Wert für den Seitenbetreiber, da sie der Optimierung der Seite dienen können – sei es durch A/B-Testing oder Inhaltsoptimierung.

Doch mit der Nutzung fast aller Dienste, werden dem Besucher Cookies „aufgezwungen”, die dem Diensteanbieter unter Anderem dabei helfen, Profile und Verhaltensmuster anzulegen. Seit einiger Zeit werden uns Cookie-Banner präsentiert, die auf die Nutzung von Cookies hinweisen – manche sehr rudimentär, andere dafür sehr detailliert.

Im Zuge der DSGVO kommt nun die Frage auf, ob der Besucher nicht selbst entscheiden können soll, welchem Dienst er diese Daten gibt. Eindeutig ist die Rechtslage an der Stelle noch nicht, aber man kann sich vorbereiten. Insbesondere auch auf die Konsequenzen, die eine optionale Sperrung diverser Dienste mit sich bringt. Wie reagiert die Seite, wenn der Besucher YouTube aussperren will, aber im Servicebereich von einer Mehrzahl von Videos die Rede ist?

Und darum kümmert sich Koekje!

Koekje (friesisch für „Keks”) ist ein Cookie Manager, der individuell konfigurierbar ist und beim ersten Besuch der Seite dazu auffordert, die Dienste auszuwählen, die nicht gesperrt werden sollen. Alle anderen Dienste und Services werden – sofern richtig eingebunden – blockiert und erst auf Knopfdruck optional nachgeladen. Die zugelassenen Dienste werden selbstverständlich sofort geladen. Und natürlich wird die Auswahl in einem Cookie gespeichert.

Hilft koekje nur beim Blockieren von Diensten?

Nein! Ein weiterer Vorteil ist das Stichwort Ladezeit – ohne das Laden externer Inhalte wie YouTube-Videos oder Instagram-Bilder hat diese Seite aktuell eine Datenmenge von ca. 200 kB. Wenn alle Inhalt geladen werden, lädt der Browser mehrere Megabyte.

Welche Dienste unterstützt Koekje?

Aktuell unterstützt Koekje folgende Dienste:

YouTube, Facebook, Twitter, Vimeo, Spotify, Google Maps, Userlike, Instagram, Issuu, Google Analytics, Matomo

Ist die Einbindung automatisch DGSVO-konform?

Leider ist dies nicht möglich, da die reguläre Einbindung eines Dienstes erfolgt, bevor Koekje clientseitig eingreifen und korrigieren kann. Daher müssen minimale Änderungen am jeweiligen Embed-Code vorgenommen werden, was aber simpel und eindeutig beschrieben ist.

Was sind eigentlich notwendige Cookies?

Die meisten Seiten behaupten, sie benötigen Cookies um die Seite darzustellen und die Funktion sicherzustellen. In der Regel betrifft dies Seiten mit einem Login-Bereich um den dauerhaften Login zu ermöglichen oder den Warenkorb in Shops zu speichern. Grundsätzlich kann jede Seite selbst entscheiden, welche Cookies „notwendig“ sind.

Koekje selbst benötigt auch Cookies um die Einstellungen des Besuchers zu speichern.

Beginn

<script src="koekje.js"></script>
<link rel="stylesheet" href="koekje.css">
<script src="jquery.js"></script>
<script type="text/javascript">
    koekje({});
</script>
koekje({
    google: {
        googleID:"UA-114674653-2",
        mapsKey:"AIzaSyCAo-GIfrrjF81iwyJRoJAXCdPktbv5Mbo",
        mapsFunction: "initMap"
    },
    services: {
        YouTube: true,
        Facebook: true,
        Twitter: true,
        Vimeo: true,
        Spotify: true,
        GoogleMaps: true,
        Userlike: true,
        Instagram: true,
        Issuu: true
    },
    tracker: {
        Matomo: false,
        GoogleAnalytics: true
    },
    widget: {
        position: 'top',
        color: {
            background: '#006b9c',
            text: '#545454'
        },
        mode: 'dark',
        layout: 'small',
        fonts: false,
        text : {
            default: {
                linkURL: 'datenschutz.html',
                headline: 'Cookies & Dienste',
                subheadline: 'Bitte wählen Sie, welche Dienste Sie automatisch zulassen möchten',
                button: 'Auswahl speichern und Seite neu laden',
                buttonAccordeon: 'weiter',
                copy: 'Datenschutz ist ein immer wichtiger werdendes Thema …',
                linktext: 'weitere Informationen',
                allowHeadline: 'Möchten Sie diese Inhalte immer erlauben?',
                allowCopy: 'Sie haben für diesen Inhaltstyp eine Ausnahme hinzugefügt …',
                allowYes: 'Ja',
                allowNo: 'Nein',
                allowDoNotAsk: 'Nicht mehr fragen'
            },
            de: {
                linkURL: 'datenschutz.html',
                headline: 'Cookies & Dienste',
                subheadline: 'Bitte wählen Sie, welche Dienste Sie automatisch zulassen möchten',
                button: 'Auswahl speichern und Seite neu laden',
                buttonAccordeon: 'weiter',
                copy: 'Datenschutz ist ein immer wichtiger werdendes Thema …',
                linktext: 'weitere Informationen',
                allowHeadline: 'Möchten Sie diese Inhalte immer erlauben?',
                allowCopy: 'Sie haben für diesen Inhaltstyp eine Ausnahme hinzugefügt …',
                allowYes: 'Ja',
                allowNo: 'Nein',
                allowDoNotAsk: 'Nicht mehr fragen'
            },
            en: {
                linkURL: 'data-privacy.html',
                headline: 'Cookies & Services',
                subheadline: 'Please choose which services to allow automatically',
                button: 'Save and reload page',
                buttonAccordeon: 'next',
                copy: 'Data protection has been more important than ever …',
                linktext: 'more Informations',
                allowHeadline: 'Would you like to always allow that type of content?',
                allowCopy: 'You added an exception for that type of content …',
                allowYes: 'Yes',
                allowNo: 'No',
                allowDoNotAsk: 'Do not ask again'
            }
        }
    },
    button: {
        text : {
            default: {
                text: "Bitte Inhalt nachladen"
            },
            de: {
                text: "Bitte Inhalt nachladen"
            },
            en: {
                text: "Please load content"
            }
        }
    },
    placeholder: false
});

Parameter

Tracker

Parameter Wert Default
Matomo Boolean false
GoogleAnalytics Boolean false
tracker: {
    Matomo: true,
    GoogleAnalytics: true
}                    

Google

Parameter Wert Default
googleID String
mapsKey String
mapsFunction String
google: {
    googleID:"UA-XXXXXXX-1",
    mapsKey:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    mapsFunction: "initMap"
}

Services

Parameter Wert Default
YouTube Boolean false
Facebook Boolean false
Twitter Boolean false
Vimeo Boolean false
Spotify Boolean false
GoogleMaps Boolean false
Userlike Boolean false
Instagram Boolean false
Issuu Boolean false
services: {
    YouTube: true,
    Facebook: true,
    Twitter: true,
    Vimeo: true,
    Spotify: true,
    GoogleMaps: true,
    Userlike: true,
    Instagram: true,
    Issuu: true
}

Widget

Parameter Wert Default
position String 'top'
mode String 'light'
layout String 'small'
fonts Boolean false
color
background String
text String
text
widget: {
    position: 'top',
    mode: 'dark',
    layout: 'small',
    fonts: true,
    color: {
        background: '#000000',
        text: '#ffffff'
    }
}
Parameter Wert Default
linkURL String
headline String 'Cookies & Dienste'
subheadline String 'Bitte wählen Sie, welche Dienste Sie automatisch zulassen möchten'
button String 'Auswahl speichern und Seite neu laden'
buttonAccordeon String 'weiter'
copy String 'Datenschutz ist ein immer wichtiger werdendes Thema. Wie wir mit Ihren Daten umgehen, können Sie in unserer Datenschutzerklärung nachlesen. Um Ihnen ein bestmögliches Erlebnis auf unseren Seiten zu bieten, verwenden wir Cookies. Wir möchten Ihnen jedoch die Möglichkeit geben, gewisse Cookies und Dienste im Vorfeld erst explizit zu aktivieren (Opt-In).'
linktext String 'weitere Informationen'
allowHeadline String 'Möchten Sie diese Inhalte immer erlauben?'
allowCopy String 'Sie haben für diesen Inhaltstyp eine Ausnahme hinzugefügt. Möchten Sie diese Art Inhalt immer laden? Bei Bestätigung wird die Seite neu geladen.'
allowYes String 'Ja'
allowNo String 'Nein'
allowDoNotAsk String 'Nicht mehr fragen'
widget: {
    text : {
        default: {
            linkURL: 'datenschutz.html',
            headline: 'Cookies & Dienste',
            subheadline: 'Bitte wählen Sie, welche Dienste Sie automatisch zulassen möchten',
            button: 'Auswahl speichern und Seite neu laden',
            buttonAccordeon: 'weiter',
            copy: 'Datenschutz ist ein immer wichtiger werdendes Thema …',
            linktext: 'weitere Informationen',
            allowHeadline: 'Möchten Sie diese Inhalte immer erlauben?',
            allowCopy: 'Sie haben für diesen Inhaltstyp eine Ausnahme hinzugefügt …',
            allowYes: 'Ja',
            allowNo: 'Nein',
            allowDoNotAsk: 'Nicht mehr fragen'
        },
        de: {
            linkURL: 'datenschutz.html',
            headline: 'Cookies & Dienste',
            subheadline: 'Bitte wählen Sie, welche Dienste Sie automatisch zulassen möchten',
            button: 'Auswahl speichern und Seite neu laden',
            buttonAccordeon: 'weiter',
            copy: 'Datenschutz ist ein immer wichtiger werdendes Thema …',
            linktext: 'weitere Informationen',
            allowHeadline: 'Möchten Sie diese Inhalte immer erlauben?',
            allowCopy: 'Sie haben für diesen Inhaltstyp eine Ausnahme hinzugefügt …',
            allowYes: 'Ja',
            allowNo: 'Nein',
            allowDoNotAsk: 'Nicht mehr fragen'
        },
        en: {
            linkURL: 'data-privacy.html',
            headline: 'Cookies & Services',
            subheadline: 'Please choose which services to allow automatically',
            button: 'Save and reload page',
            buttonAccordeon: 'next',
            copy: 'Data protection has been more important than ever …',
            linktext: 'more Informations',
            allowHeadline: 'Would you like to always allow that type of content?',
            allowCopy: 'You added an exception for that type of content …',
            allowYes: 'Yes',
            allowNo: 'No',
            allowDoNotAsk: 'Do not ask again'
        }
    }
}

Button

Parameter Wert Default
text String
button: {
    text : {
        default: {
            text: "Bitte Inhalt nachladen"
        },
        de: {
            text: "Bitte Inhalt nachladen"
        },
        en: {
            text: "Please load content"
        }
    }
}

Sonstiges

Parameter Wert Default
placeholder Boolean false
placeholder: false

Anwendung

YouTube

Original

<iframe width="560" height="315" src="https://www.youtube.com/embed/DKGWlsUdAcI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Koekje Version

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/DKGWlsUdAcI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="koekje" koekjetype="youtube"></iframe>

Ergebnis

Vimeo

Original

<iframe src="https://player.vimeo.com/video/83602160" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Koekje Version

<iframe data-src="https://player.vimeo.com/video/83602160" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="koekje" koekjetype="vimeo"></iframe>

Ergebnis

Google Maps (iframe)

Original

<iframe width="100%" height="400" src="https://maps.google.com/maps?width=100%&height=600&hl=de&coord=,6.315736359406742&q=Naphausen+26%2C+41366+(Marker)&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Koekje Version

<iframe width="100%" height="400" data-src="https://maps.google.com/maps?width=100%&height=600&hl=de&coord=,6.315736359406742&q=Naphausen+26%2C+41366+(Marker)&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="koekje" koekjetype="googlemaps"></iframe>

Ergebnis

Google Maps (API)

Original

<div id="demomap" style="width:100%;height:500px"></div>

Koekje Version

<div id="demomap" style="width:100%;height:500px" class="koekje" koekjetype="googlemaps"></div>

Ergebnis

Twitter Timeline

Original

<a class="twitter-timeline" href="https://twitter.com/MeCookieMonster?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Koekje Version

<a class="twitter-timeline koekje" href="https://twitter.com/MeCookieMonster?ref_src=twsrc%5Etfw" koekjetype="twitter">Tweets by MeCookieMonster</a>

Ergebnis

Twitter Follow Button

Original

<a class="twitter-follow-button" data-show-count="false" href="https://twitter.com/MeCookieMonster?ref_src=twsrc%5Etfw">Follow @MeCookieMonster</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Koekje Version

<a href="https://twitter.com/MeCookieMonster?ref_src=twsrc%5Etfw" class="twitter-follow-button koekje" data-show-count="false" koekjetype="twitter">Follow @MeCookieMonster</a>

Ergebnis

Twitter Post

Original

<blockquote class="twitter-tweet" data-lang="de"><p lang="en" dir="ltr">If dat the way da cookie crumbles, then me will just eat all da crumbs! <a href="https://twitter.com/hashtag/MondayMotivation?src=hash&ref_src=twsrc%5Etfw">#MondayMotivation</a> <a href="https://t.co/AetlbvTcT4">pic.twitter.com/AetlbvTcT4</a></p>— Cookie Monster (@MeCookieMonster) <a href="https://twitter.com/MeCookieMonster/status/993513376549625856?ref_src=twsrc%5Etfw">7. Mai 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Koekje Version

<blockquote class="twitter-tweet koekje" koekjetype="twitter" data-lang="de"><p lang="en" dir="ltr"><a href="https://twitter.com/MeCookieMonster/status/993513376549625856?ref_src=twsrc%5Etfw">7. Mai 2018</a></blockquote>

Ergebnis

Spotify

Original

<iframe src="https://open.spotify.com/embed/user/1253032672/playlist/7HucVNgOc2AmLIkNYz0rgX" width="100%" height="500" frameborder="0" allowtransparency="true"></iframe>

Koekje Version

<iframe data-src="https://open.spotify.com/embed/user/1253032672/playlist/7HucVNgOc2AmLIkNYz0rgX" width="100%" height="500" frameborder="0" allowtransparency="true" class="koekje" koekjetype="spotify"></iframe>

Ergebnis

Facebook Beitrag

Original

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FCookieMonster%2Fposts%2F10155395861886587&width=500" width="500" height="468" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Koekje Version

<iframe data-src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FCookieMonster%2Fposts%2F10155395861886587&width=500" width="500" height="468" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" koekjetype="facebook" class="koekje"></iframe>

Ergebnis

Facebook Like-Button

Original

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FCookieMonster%2F&layout=standard&show_faces=true&action=like" id="lkbtn" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Koekje Version

<iframe data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FCookieMonster%2F&layout=standard&show_faces=true&action=like" id="lkbtn" scrolling="no" frameborder="0" allowTransparency="true" koekjetype="facebook" class="koekje"></iframe>

Ergebnis

Userlike

Original

<script async type="text/javascript" src="//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/99ef411cc01c627a2ae45647f5c8b8a3bcba9d4e8ae846cc60ce4043626f081a.js"></script>

Koekje Version

<script async class="koekje" koekjetype="userlike" type="text/javascript" data-src="//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/99ef411cc01c627a2ae45647f5c8b8a3bcba9d4e8ae846cc60ce4043626f081a.js"></script>

Instagram Profil

Original

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BhZ8xFVgR7f/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" data-instgrm-version="10"style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/BhZ8xFVgR7f/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div><div style=" display:block; height:60px; margin:0 auto 16px; width:210px;"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 840 300" width="210" version="1"><path d="M65 49c-16 7-34 26-40 50-7 31 23 44 25 39 3-5-5-6-7-22-2-21 7-43 19-53 3-2 2 0 2 5v102c0 21-1 28-3 35-1 7-4 11-2 13s12-3 17-10c7-9 9-20 10-32v-51-68c0-5-14-11-21-8m575 102c0 11-3 20-6 26-6 12-18 16-23-1-3-10-4-26-1-39 2-13 8-23 17-22 10 0 14 13 13 36zm-162 70c0 19-3 35-9 40-9 7-21 1-19-12 2-12 13-25 28-40v12zm-2-70c-1 10-4 20-6 26-6 12-19 16-24-1-4-12-3-28-1-37 2-13 8-24 18-24 9 0 14 10 13 36zm-94-1c-1 11-3 20-6 27-7 12-19 16-24-1-4-13-3-30-1-39 2-14 8-23 18-22 9 0 14 13 13 35zm430 13c-2 0-3 3-4 7-3 14-6 17-10 17-5 0-9-7-10-21v-52c0-4-1-8-12-12-5-2-12-4-15 4a209 209 0 0 0-15 50c-1-6-2-17-2-41-1-4-1-8-7-11-3-2-13-6-16-2s-7 13-11 25l-5 15v-34c0-4-2-5-3-5l-12-3c-4 0-5 2-5 5v58c-2 11-8 25-15 25s-10-6-10-33l1-34v-13c0-3-6-5-9-5l-7-1c-2 0-4 2-4 4v4c-4-6-10-9-13-10-10-3-21-1-29 10-6 9-10 19-11 33-2 11-1 22 1 31-3 10-7 14-12 14-7 0-12-11-11-31 0-13 3-22 6-35 1-6 0-8-3-11-2-3-7-4-13-3l-19 4 1-4c2-15-14-14-19-9-3 3-5 6-6 12-1 9 7 13 7 13a139 139 0 0 1-24 51 1390 1390 0 0 1 0-54l1-12c0-3-2-4-5-5l-9-2c-5-1-7 2-7 4v4c-4-6-9-9-13-10-10-3-21-1-29 10-6 9-10 21-11 33v29c-1 8-6 16-11 16-7 0-10-6-10-33v-34l1-13c0-3-6-5-9-5l-8-1c-2 0-4 2-4 4v4c-4-6-9-9-13-10-10-3-20-1-28 10-6 7-10 15-12 33l-1 15c-2 12-11 27-19 27-4 0-8-9-8-27l1-62h27c3 0 6-12 3-13l-16-1-13-1 1-25c0-2-3-4-4-4l-11-3c-5-1-8 0-8 4l-1 27-21-1c-4 0-8 16-3 16l23 1-1 46v3c-3 19-16 29-16 29 3-12-3-22-13-30l-20-15s5-4 9-14c3-7 3-14-4-16-12-3-22 6-25 16-3 7-2 13 3 18l1 2-10 18c-9 15-15 28-21 28-4 0-4-13-4-24l2-41c0-5-3-8-7-11-3-2-8-5-11-5-5 0-19 1-33 39l-5 14 1-46-2-3c-2-1-8-4-14-4-2 0-3 1-3 4l-1 72 1 15 2 6 5 3c2 0 12 2 13-2 0-5 0-10 6-30 8-30 20-45 25-50h2l-2 38c-1 37 6 44 16 44 7 0 18-7 29-26l19-32 11 11c9 8 12 16 10 24-2 6-7 12-17 6l-7-5h-6c-3 3-6 6-7 11-1 4 3 6 8 8 4 2 12 3 17 4 21 0 37-10 49-38 2 24 11 37 26 37 10 0 20-13 25-26 1 6 3 10 6 14 11 19 34 15 46-1l4-7c1 15 13 20 20 20 8 0 16-3 21-16l3 4c11 19 34 15 46-1l1-2v10l-10 9c-18 16-31 29-32 43-2 18 13 25 24 26 12 1 22-6 29-15 5-8 9-25 9-43l-1-25a200 200 0 0 0 38-66h14c2 0 2 0 2 2s-9 34-1 55c5 15 17 19 24 19 8 0 16-6 20-15l1 3c12 19 35 15 46-1l4-7c3 16 15 20 22 20s14-3 19-16l1 12 4 3c7 2 13 1 16 1 2-1 3-2 3-6 1-9 0-25 3-36 5-20 9-27 11-31 2-2 3-2 3 0l2 35c1 13 3 21 5 23 4 7 8 8 12 8 3 0 8-1 8-5 0-3 0-16 5-35 3-13 8-24 10-28a252 252 0 0 0 3 52c5 21 18 23 23 23 11 0 19-7 22-28 0-5-1-9-4-9" fill="#262626"/></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> Sieh dir diesen Beitrag auf Instagram an</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BhZ8xFVgR7f/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">This is me biggest cookie Ever!</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein Beitrag geteilt von <a href="https://www.instagram.com/cookie_monster_realreal/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Cookie Monster</a> (@cookie_monster_realreal) am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-04-10T21:44:15+00:00">Apr 10, 2018 um 2:44 PDT</time></p></div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>

Koekje Version

<blockquote class="instagram-media koekje" data-instgrm-permalink="https://www.instagram.com/p/BhZ8xFVgR7f/" data-instgrm-version="8" koekjetype="instagram" style="width:100%;height:500px"></blockquote>

Ergebnis

Instagram Beitrag

Original

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Bhk8-FGA8M_/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" data-instgrm-version="10"style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/Bhk8-FGA8M_/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div><div style=" display:block; height:60px; margin:0 auto 16px; width:210px;"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 840 300" width="210" version="1"><path d="M65 49c-16 7-34 26-40 50-7 31 23 44 25 39 3-5-5-6-7-22-2-21 7-43 19-53 3-2 2 0 2 5v102c0 21-1 28-3 35-1 7-4 11-2 13s12-3 17-10c7-9 9-20 10-32v-51-68c0-5-14-11-21-8m575 102c0 11-3 20-6 26-6 12-18 16-23-1-3-10-4-26-1-39 2-13 8-23 17-22 10 0 14 13 13 36zm-162 70c0 19-3 35-9 40-9 7-21 1-19-12 2-12 13-25 28-40v12zm-2-70c-1 10-4 20-6 26-6 12-19 16-24-1-4-12-3-28-1-37 2-13 8-24 18-24 9 0 14 10 13 36zm-94-1c-1 11-3 20-6 27-7 12-19 16-24-1-4-13-3-30-1-39 2-14 8-23 18-22 9 0 14 13 13 35zm430 13c-2 0-3 3-4 7-3 14-6 17-10 17-5 0-9-7-10-21v-52c0-4-1-8-12-12-5-2-12-4-15 4a209 209 0 0 0-15 50c-1-6-2-17-2-41-1-4-1-8-7-11-3-2-13-6-16-2s-7 13-11 25l-5 15v-34c0-4-2-5-3-5l-12-3c-4 0-5 2-5 5v58c-2 11-8 25-15 25s-10-6-10-33l1-34v-13c0-3-6-5-9-5l-7-1c-2 0-4 2-4 4v4c-4-6-10-9-13-10-10-3-21-1-29 10-6 9-10 19-11 33-2 11-1 22 1 31-3 10-7 14-12 14-7 0-12-11-11-31 0-13 3-22 6-35 1-6 0-8-3-11-2-3-7-4-13-3l-19 4 1-4c2-15-14-14-19-9-3 3-5 6-6 12-1 9 7 13 7 13a139 139 0 0 1-24 51 1390 1390 0 0 1 0-54l1-12c0-3-2-4-5-5l-9-2c-5-1-7 2-7 4v4c-4-6-9-9-13-10-10-3-21-1-29 10-6 9-10 21-11 33v29c-1 8-6 16-11 16-7 0-10-6-10-33v-34l1-13c0-3-6-5-9-5l-8-1c-2 0-4 2-4 4v4c-4-6-9-9-13-10-10-3-20-1-28 10-6 7-10 15-12 33l-1 15c-2 12-11 27-19 27-4 0-8-9-8-27l1-62h27c3 0 6-12 3-13l-16-1-13-1 1-25c0-2-3-4-4-4l-11-3c-5-1-8 0-8 4l-1 27-21-1c-4 0-8 16-3 16l23 1-1 46v3c-3 19-16 29-16 29 3-12-3-22-13-30l-20-15s5-4 9-14c3-7 3-14-4-16-12-3-22 6-25 16-3 7-2 13 3 18l1 2-10 18c-9 15-15 28-21 28-4 0-4-13-4-24l2-41c0-5-3-8-7-11-3-2-8-5-11-5-5 0-19 1-33 39l-5 14 1-46-2-3c-2-1-8-4-14-4-2 0-3 1-3 4l-1 72 1 15 2 6 5 3c2 0 12 2 13-2 0-5 0-10 6-30 8-30 20-45 25-50h2l-2 38c-1 37 6 44 16 44 7 0 18-7 29-26l19-32 11 11c9 8 12 16 10 24-2 6-7 12-17 6l-7-5h-6c-3 3-6 6-7 11-1 4 3 6 8 8 4 2 12 3 17 4 21 0 37-10 49-38 2 24 11 37 26 37 10 0 20-13 25-26 1 6 3 10 6 14 11 19 34 15 46-1l4-7c1 15 13 20 20 20 8 0 16-3 21-16l3 4c11 19 34 15 46-1l1-2v10l-10 9c-18 16-31 29-32 43-2 18 13 25 24 26 12 1 22-6 29-15 5-8 9-25 9-43l-1-25a200 200 0 0 0 38-66h14c2 0 2 0 2 2s-9 34-1 55c5 15 17 19 24 19 8 0 16-6 20-15l1 3c12 19 35 15 46-1l4-7c3 16 15 20 22 20s14-3 19-16l1 12 4 3c7 2 13 1 16 1 2-1 3-2 3-6 1-9 0-25 3-36 5-20 9-27 11-31 2-2 3-2 3 0l2 35c1 13 3 21 5 23 4 7 8 8 12 8 3 0 8-1 8-5 0-3 0-16 5-35 3-13 8-24 10-28a252 252 0 0 0 3 52c5 21 18 23 23 23 11 0 19-7 22-28 0-5-1-9-4-9" fill="#262626"/></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> Sieh dir diesen Beitrag auf Instagram an</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/Bhk8-FGA8M_/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Cookie doe!</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein Beitrag geteilt von <a href="https://www.instagram.com/cookie_monster_realreal/?utm_source=ig_embed&utm_campaign=embed_loading_state_script" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Cookie Monster</a> (@cookie_monster_realreal) am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-04-15T04:17:40+00:00">Apr 14, 2018 um 9:17 PDT</time></p></div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>

Koekje Version

<blockquote class="instagram-media koekje" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Bhk8-FGA8M_/?utm_source=ig_embed" data-instgrm-version="9" koekjetype="instagram" style="width:100%;height:500px"></blockquote>

Ergebnis

Issuu

Original

<div data-configid="1859967/63730321" style="width:100%; height:467px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>

Koekje Version

<div data-configid="1859967/63730321" style="width:100%; height:467px;" class="issuuembed koekje" koekjetype="issuu"></div>

Ergebnis

Download