Instagram DSGVO konform in WordPress einbinden

So wie bei mir in der rechten Sidebar sieht es aus, wenn du Instagram DSGVO konform mit diesem Code integrieren möchtest.
Es handelt sich dabei nicht um eine direkte Verbindung mit Instagram, die sogenannten Embeds.
Denn genau das ist laut Datenschutzverordnung nicht zulässig.

Embeds

Bei Embeds von YouTube, Soundcloud, Instagram & Co. werden Inhalte des fremden Anbieters auf deiner Seite geladen und damit auch die IP Adresse deines Besuchers weitergegeben.
Bei einigen dieser Dienste ist es möglich, Benutzeraccounts anzulegen. Wenn Besucher deiner Webseite einen Instagram Account haben und angemeldet sind, erhält auch Instagram diese Daten.

Die gängige Methode, deinen Instagram Feed mittels Plugin oder Embed Code, direkt von Instagram, einzubauen, ist zwar einfacher aber unter den gegebenen Umständen, nicht zulässig.
Um möglichen Ärger zu vermeiden, habe ich nach einer anderen Lösung gesucht.
Ohne diese direkte Verbindung kommen die Daten deines Accounts natürlich nicht automatisch zu dir.
Also vor allem deine geposteten Bilder, Likes, Follower usw..

Um dennoch dein Profil auf deinem Blog zu präsentieren habe ich an einer Lösung gebastelt.
Ich denke, es ist ganz gut gelungen, wenn man bedenkt, dass ich kein Programmierer bin.
Lass mich kurz erklären, was zu tun ist, damit es bei dir auch so aussieht.
Bedenke, es ist nicht gestattet, den Instagram Schriftzug zu verwenden.
Für das Logo, auch glyph genannt, gelten zahlreiche Bestimmungen.
Daher habe ich mich entschieden sie lieber nicht zu verwenden.

Was du für das Instagram Feed Widget benötigst

1. Dein Insta-Profilbild 150x150px groß.
   Kann eckig bleiben. Lade es in die Medienbibliothek hoch.
2. Den Link zu deinem Instagram Profil.
   Sieht bei mir so aus: https://www.instagram.com/nico.stanitzok/
3. Die 9 schönsten Bilder oder erfolgreichsten Bilder deines Insta Account. 300x300px groß.
4. Die Bild-Links zu deinem Insta-Beitrag.
   Beispiel, Bild 1 zeigt eine Banane. Geh auf deinen Account, Click das Bananenbild an.
   Oben in der Adresszeile deines Browsers steht die Adresse zu diesem Beitrag. 
   Anklicken und kopieren.
5. Den Text deiner Account Biografie.

Der einzige Nachteil dieser Methode besteht darin, dass die Daten nicht topaktuell sind.
Aber ganz ehrlich, wer deinen Blog besucht und auf das Instagram Profil von dir stößt, weiß ja nicht, wie aktuell die Bilder sind.
Hier solltest du daher am besten deine schönsten Bilder verwenden.
Die so richtig zum Draufklicken einladen.

Und wenn dir danach ist, kannst du anstelle von 100 auch 100000 Follower eintragen.
Natürlich nicht!
Aber ob da 1333 oder 1555 steht, finde ich nicht so tragisch.
Lässt sich aber ganz schnell ändern, auch täglich, wenn es dir ganz wichtig ist.

Ok, der Code besteht aus zwei Teilen, dem HTML für das Widget in der Sidebar und dem CSS Code für das Styling, den du in das sogenannte Stylesheet eintragen musst.
Ich setze voraus, dass du dich ein wenig in deinem WordPress Backend auskennst, und wo du Widgets und style.css findest.

Es ist grundsätzlich immer eine gute Idee, regelmäßig Sicherheitskopien deiner Website und Datenbank anzulegen, bevor du am Code etwas veränderst.

Wo den Code hineinkopieren?

Das Stylesheet (style.css) findest du in jedem Fall in deiner WordPress Arbeitsumgebung auf der linken Seite unter Design und dann auf Editor clicken.
Bei mir wird es automatisch als erstes aufgerufen.
Das erkennst du leicht an der Überschrift.
Dort steht der Name deines Theme und die aufgerufene Datei.
Bei mir steht da: Name deines Theme: Stylesheet (style.css) 

Steht das nicht da, schau auf der rechten Seite danach und click dann Stylesheet (style.css) an.

Wenn du erst ein wenig experimentieren und ausprobieren möchtest, ob deine Links und Bilder funktionieren, musst du das nicht im Live-Modus auf deiner Webseite machen.
Gehe dazu auf Codepen und kopiere dort HTML und CSS Code in die vorgesehenen Kästen.

Den folgenden Code kopieren und ganz am Ende in die Style.css einfügen.
Es ist durchaus möglich, dass es nicht auf Anhieb passt.
Weiter unten gehe ich darauf ein, was du ändern musst, um den Code anzupassen.

/*** START INSTAGRAM WIDGET DSGVO Konform ***/
/* Darstellung als Tabelle */
 table {
     border-collapse: collapse;
     border: none;
     font-size: 10px;
}
 th, td {
     border: none;
}
 .a {
     table-layout: auto;
     width: 100%;
}
 .b {
     table-layout: auto;
     width: 100%;
}
/* Profilbild */
 .bio-img {
     border-radius: 100%;
    /* macht das Bild rund */
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     margin-bottom: 110px;
    /* Abstand nach unten - Diese Zahl musst du evtl. anpassen, damit der FOLLOW Button und das Profilbild möglichst auf einer Ebene sind */
     max-width: 70px;
     max-height: 70px;
    /* Größe und Breite des Bildes */
     float: left;
    /* Das Bild soll auf der linken Seite sein */
}
 .bio {
     text-align: left;
     margin-bottom: 1px;
     float: right;
    /* Follow Button und dein @name.name sollen auf der rechten Seite sein */
}
 .follow {
     float: right;
     margin-right: 100px; /* Abstand zum rechten Rand. Passe diese Zahl an, wenn der Button zu weit nach link gerutscht ist (kleinere Zahl) oder nicht weit genug links ist. (höhere Zahl)*/
}
/* Style Follow Button */
 .link-btn {
     color: #fafafa;
     background: #3897f0;
     padding: 2px 30px;
     display: block;
     margin: 5px;
     text-align: center;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 14px;
}
 .link-btn:hover {
     background: #fafafa;
    /* Style für die Feed Bilder */
}
 .feed-img {
     width: 97%;
    /* die Zahl evtl. anpassen */
}
/*** END INSTAGRAM WIDGET DSGVO Konform ***/

Der HTML Code für die Sidebar

Hier siehst du den Code für das Sidebar Widget im Ganzen.
Es müssen noch die ganzen Links der Bilder und die Links zum Instagram Account mittels Copy & Paste eingetragen werden.

Das geht am einfachsten, wenn du dir den Code zunächst in einen Editor lädst.
Die Übersicht ist dort wesentlich besser.
Du kannst nach „Online HTML Editor“ suchen oder den Notepad++ Editor auf deinem Rechner installieren.
Hier gehts zur offiziellen Seite, das Programm ist kostenlos: Download: Notepad++

Danach habe ich den Code in kleine Bausteine zerlegt um zu erklären, was darin steht und was du ändern musst, dass deine eigenen Texte, Links zu deinem Account und Bilder zu sehen sind.

<!-- Instagram DSGVO Feed -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="social-media-ig-bio" content="html-code">
    <title>html-code-widget-ig-feed</title>
</head>

<body>
    <table class="a">
        <tr>
            <th>
                <a href="https://instagram.com/nico.stanitzok" target="_blank" rel="noopener">
				<img class="bio-img" title="Folge Nico (@nico.stanitzok) auf Instagram" src="https://nicostanitzok.de/wp-content/uploads/2018/09/nico-stanitzok-autor-instagram.png" alt="Folge Nico (@nico.stanitzok) auf Instagram"> <!-- Hinter src= den Pfad zu deinem Profilbild eintragen. Zu finden in der WordPress Mediathek.  -->
			</a>
            </th>
            <th>
                <div class=follow>
                    <h4><a title="Folge Nico (@nico.stanitzok) auf Instagram" href="https://www.instagram.com/nico.stanitzok/" target="_blank" rel="noopener">@nico.stanitzok</a></h4>
                    <!-- Dein Account Name mit Link zu deinem Insta-Account.  -->
                    <a title="Folge Nico (@nico.stanitzok) auf Instagram" href="https://www.instagram.com/nico.stanitzok/" target="_blank" rel="noopener" class="link-btn">FOLLOW</a>
                    <!-- Blauer Button mit Link zu deinem Insta-Account.  -->
                </div>
                <div class=bio> <b>
            <a href="https://instagram.com/nico.stanitzok">150 <!-- Anzahl Beiträge eintragen -->
            </a> 
          </b>		<label>Beiträge</label> <b>
            <a href="https://instagram.com/nico.stanitzok">1444 <!-- Anzahl der Follower eintragen-->
            </a>
          </b>      <label>Abonnenten</label> <b>
            <a href="https://instagram.com/nico.stanitzok">336 <!-- Anzahl der abonnierten Accounts eintragen -->
            </a> 
		    </b>	<label>abonniert</label>
                    <br>
                    <br> <span>
            <b>recipes & real food <!-- Name deines Accounts -->
            </b>
            <br>
            Food-Blogger & Author <!-- Hier der Text für deine Bio. Verwende <br> für einen Zeilenumbruch -->
            <br>
            nutritionista not barista
            <br>
            Wartet geduldig auf die Geburt seiner Tochter.
          </span>
                </div>
            </th>
        </tr>
    </table>
    <table class="b">
        <tr>
            <td>
                <a href="https://www.instagram.com/p/Bnxuna6nnVz/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/kokostarte-ohne-backen-vegan.jpg" alt="@nico.stanitzok auf Instagram folgen."> 
			</a>
                <!-- immer 2 Zeilen sind für eins der 9 Bilder. Zwischen <tr> und </td> -->
            </td>
            <td>
                <a href="https://www.instagram.com/p/Bnsc1Z3n1C6/" target="_blank" rel="noopener">
                    <!-- Hier den Link zum Instagram Beitrag eintragen -->
                    <img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/chia-quark-himbeeren.jpg" alt="@nico.stanitzok auf Instagram folgen.">
                </a>
                <!-- Hier nach src= zwischen den Häkchen den Pfad zum entsprechenden Bild aus der WordPress Mediathek hinein kopieren -->
            </td>
            <td>
                <a href="https://www.instagram.com/p/Bnsc1Z3n1C6/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/zucchini-lasagne.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="https://www.instagram.com/p/Bnp3cBMnLJ8/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/zoodlesalat-currydressing.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
            <td>
                <a href="https://www.instagram.com/p/BniL-x4neba/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/japanisches-curry.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
            <td>
                <a href="https://www.instagram.com/p/BnVSO1tnJtR/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/nudelsuppe.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="https://www.instagram.com/p/BnSkHWiHb3I/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/spaghetti-bolognaise.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
            <td>
                <a href="https://www.instagram.com/p/Bm5D312n6Gy/" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/kuerbis-thai-food-gra-prao-ei.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
            <td>
                <a href="https://instagram.com/nico.stanitzok" target="_blank" rel="noopener">
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/joghurt-haferflocken-fruechte.jpg" alt="@nico.stanitzok auf Instagram folgen.">
			</a>
            </td>
        </tr>
    </table>
</body>

</html>

Profilbild und Bio-Text

Den ganzen HTML Code hier drüber musst du noch mit deinen Daten füllen.
Im Folgenden habe ich die einzelnen Bausteine noch mal im Detail erklärt.

Wunder dich nicht über die ganzen Ausrufezeichen.
Für eine bessere Übersicht habe ich das HTML in einem speziellen Programm „ordentlich“ richten lassen.
Dem HTML Widget von WordPress gefällt diese Ordnung aber nicht so schön.

<table class="a">
        <tr>
            <th>
                <a href="https://instagram.com/dein.account" target="_blank" rel="noopener"> <!-- Hier deine Adresse zum Profil eintragen. -->
				<img class="bio-img" title="Folge XXXX (@dein.account) auf Instagram" src="https://nicostanitzok.de/wp-content/uploads/2018/09/nico-stanitzok-autor-instagram.png" alt="Folge xxxx (@dein.account) auf Instagram"> 
			</a>			<!-- Hinter src= den Pfad zu deinem Profilbild eintragen. Zu finden in der WordPress Mediathek.  -->
            </th>
            <th>
                <div class=follow>
                    <h4><a title="Folge XXXXX (@dein.acccount) auf Instagram" href="https://www.instagram.com/dein.account/" target="_blank" rel="noopener">@nico.stanitzok</a></h4>
							<!-- Dein Account Name mit Link zu deinem Insta-Account eintragen.  -->
                   <a title="Folge XXXX (@dein.account) auf Instagram" href="https://www.instagram.com/dein.account/" target="_blank" rel="noopener" class="link-btn">FOLLOW</a>
								<!-- Blauer Button mit Link zu deinem Insta-Account.  --><!-- Hier deine Adresse zum Profil eintragen. -->
                </div>

3×3 Feed-Bilder

Für jeweils 3 Bilder in einer Reihe ist ein Block, davon gibt es 3.
Zwischen <td> und </td> stehen für eine Bilderreihe die Adresse zum jeweiligen Beitrag auf Instagram und die zweite Adresse ist der Pfad zum Bild in deiner Mediathek.

Bild in der Mediathek entsprechend dem Link zum Instagram Beitrag anklicken.
URL des Bildes Kopieren und wie unten im Code beschrieben nach src= “ hier “ zwischen den Häkchen einfügen.

<td>
                <a href="https://www.instagram.com/p/Bnxuna6nnVz/" target="_blank" rel="noopener">
						<!-- Hier den Link zum Instagram Beitrag eintragen -->
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/kokostarte-ohne-backen-vegan.jpg" alt="@nico.stanitzok auf Instagram folgen."> 
				</a><!-- Hier nach src= zwischen den Häkchen den Pfad zum entsprechenden Bild aus der WordPress Mediathek hinein kopieren -->
            </td>
            <td>
                <a href="https://www.instagram.com/p/Bnsc1Z3n1C6/" target="_blank" rel="noopener">
						<!-- Hier den Link zum Instagram Beitrag eintragen -->
                    <img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/chia-quark-himbeeren.jpg" alt="@nico.stanitzok auf Instagram folgen.">
                </a><!-- Hier nach src= zwischen den Häkchen den Pfad zum entsprechenden Bild aus der WordPress Mediathek hinein kopieren -->
            </td>
            <td>
                <a href="https://www.instagram.com/p/Bnsc1Z3n1C6/" target="_blank" rel="noopener">
						<!-- Hier den Link zum Instagram Beitrag eintragen -->
				<img class="feed-img" title="@nico.stanitzok auf Instagram folgen." src="https://nicostanitzok.de/wp-content/uploads/2018/09/zucchini-lasagne.jpg" alt="@nico.stanitzok auf Instagram folgen.">
				</a><!-- Hier nach src= zwischen den Häkchen den Pfad zum entsprechenden Bild aus der WordPress Mediathek hinein kopieren -->
</td>

Das sieht nach viel Arbeit aus.
Aber glaub mir, so wild ist es gar nicht.
Wenn du weißt, welche Bilder du verwenden möchtest, verkleinere sie wie angegeben.
Ich verwende dafür Photoshop oder Irvan View (kostenlos).

Bei Fragen verwende bitte die Kommentarfunktion, damit ist gewährleistet, dass jeder etwas davon hat.