Facebook – so mögen auch die Datenschützer deinen Pagestream

Datenschutzkonformer Einbau des Facebook Page-Feeds mit graph.facebook.com. Mit kostenlosem Wordpressplugin und alternativ dem Code zum Copy & Paste für den Einbau ohne Plugin.

Wenn man schon News auf Facebook postet, dann ist es recht praktisch, wenn man diese auch direkt in seinen Blog einbindet. Facebook bietet dazu beispielsweise das Seiten-Plug-in an: Mit wenigen Eingaben generiert Facebook den Quellcode, den du in deine Seite setzen kannst – und schwupps werden die letzten Posts deiner Facebook-Fanpage auf deiner Seite angezeigt.

  • Allerdings ist diese Variante datenschutzrechtlich problematisch. Warum erfährst du in diesem Artikel.
  • Zusätzlich habe ich als Alternative eine Variante per WordPress-Plugin programmiert – die Anleitung gibt es in diesem Artikel.
  • Alle, die Wert auf Performance legen und die ihren Header schmal halten möchten: Die CSS in dem Plugin können deaktiviert und im eigenen Theme geschrieben werden. Die CSS-Vorlagen, die ich im Plugin verwende findet ihr ebenfalls zum Copy & Paste.
  • Und die Hardcoder unter euch finden ganz unten den Code zum Copy & Paste direkt für euer WordPress Theme

Warum die Fanpage-Integration per Facebook Seiten-Plugin datenschutzrechtlich problematisch ist

Ist dieser Code in deine Seite eingebettet, sendet er automatisch Userdaten auf die Server in die USA. Facebook nutzt diese beispielsweise, um den Werbetreibenden auf Facebook eine bessere Zusammenstellung der Zielgruppe zu ermöglichen. Und das mögen die Datenschützer verständlicherweise nicht.

Alternative: Integration des Facebookstreams per graph.facebook.com

Facebook stellt eine tolle Schnittstelle zur Verfügung, über die man sich die Daten des Facebookstreams einer Seite saugen kann.

Die Vorteile:

  • Auch User, die nicht in Facebook parallel angemeldet sind kommen in den Genuss, die Vorschau der Facebook-News zu sehen
  • Es werden keine Daten auf fremde Server gesendet
  • Die Optik kann an das eigene Layout komplett angepasst werden

Der Nachteil:

  • Der Einbau ist etwas komplizierter.
    Denn man braucht nicht nur den Link zur Fanpage, sondern man muss sich eine App anlegen um die sogenannte App-ID und ein App-Secret zu erhalten. Allerdings ist das nicht dramatisch, wie es auf den ersten Blick aussieht 🙂

Das WordPress-Plugin Slim Facebook Fanpage Stream:

Ich habe ein kleines schlankes Plugin für WordPress geschrieben, dass den Stream einer Fanpage ohne Page-Plugin lädt.

screen3

Diese Einstellungsmöglichkeiten habt ihr:

  • Eine Fanpage als Quelle hinterlegen
  • Anzahl der Posts festlegen
  • Länge des Posttextes auf eine maximale Zeichenanzahl kürzen
  • Einen Hashtag oder ein Wort hinterlegen, so dass nur Posts mit diesen Zeichen übernommen werden.
  • Vorlage von verschiedenen Styles.
    Wer kein weiteres CSS in seinen Header laden möchte, kann diese auf „None“ stellen und kann eigene CSS hinterlegen.
    Mehr dazu unten unter „Eigene CSS verwenden“

Und so geht es – Kurztutorial:

  1. Installation
    Installiere wie gewohnt das Plugin in deiner WordPress-Installation.
    Entweder im WordPress-Adminbereich unter Plugins installieren das Plugin „Slim Facebook Fanpage Stream“  suchen und installieren, oder auf  https://de.wordpress.org/plugins/slim-facebook-fanpage-stream herunterladen und manuell hochladen.
  2. Facebook-App erstellen, um App-Secret und App ID zu erhalten
    Gehe  auf https://developers.facebook.com/apps.
    Dort kannst du oben rechts per Klick auf den grünen Button „Neue App hinzufügen“ eine neue App erstellen.
    Gib dort einen Anzeigennamen und eine E-Mailadresse ein und wähle als Kategorie „App für Seiten“.
    Klicke rechts unten auf den blauen Button „App erstellen“.screen1
  3. App-ID und App-Secret (App-Geheimcode) übernehmen
    Danach erscheint die Übersichtsseite zu deiner App.
    Dort klickst du linke oben auf Einstellungen und du erhältst die zwei Werte für deine App-ID und deinen App-Secret alias „App-Geheimcode“.screen2
  4. Als nächstes brauchst du noch deine Seiten-ID.
    Diese erhältst du auf http://findmyfbid.com
    Dort gibst du einfach deine Adresse deiner Facebook-Fanpage ein und erhältst per Klick auf „Find numeric ID“ die passende ID
  5. Nun kannst du noch die restlichen Werte ausfüllen und dein Widget abspeichern

Performance-Tipp: Eigene CSS verwenden

Das Plugin ist sehr schlank – und jeder, der auf die Performance achtet kann im Adminbereich die CSS-Stile auf „none“ stellen, kann seine eigenen CSS einfügen, so dass das Plugin den Header-Code nicht mit weiteren CSS-Dateien füllt.

Als Inspiration findet ihr hier die CSS der vier Stile, die ich im Plugin eingebaut habe zur Vorlage:

Variante Blacknwhite

#facebook_widget a {display:block; padding:10px; margin-bottom:3px; background-color:#efefef; color:#000; text-decoration:none; font-size:13px; line-height:18px; -webkit-transition: all 0.3s ease;position: relative;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease }
#facebook_widget a:hover {background-color:#000; color:#efefef;}
#facebook_widget a img {float:right; margin-left:10px; max-width:80px;}
#facebook_widget a em {font-size:90%; opacity:0.8}

Variante Romantic

#facebook_widget a {display:block;padding:20px; padding-left:5px; padding-right:5px; color:#4f4045; text-decoration:none; font-size:13px; line-height:18px; position:relative} 
#facebook_widget a:hover {color:#000; text-decoration:underline;}
#facebook_widget a img {float:right; margin:10px; margin-left:20px; max-width:80px; -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease; ;
 border:3px solid white;}
#facebook_widget a:hover img {max-width:90px; margin:5px; margin-left:15px; }
#facebook_widget a em {font-size:90%; opacity:0.8}
#facebook_widget a:nth-child(2n) {background-color:#d2c0bd; padding-bottom:10px; padding-top:10px; }
#facebook_widget a:nth-child(2n):before {
 position: absolute;
 top: -12px;
 right: 0px;
 left: 0px;height: 12px;
 background-size: 16px 32px;
 background-repeat: repeat-x;
 background-image: 
 linear-gradient(45deg, transparent 34%, #d2c0bd 34%, #d2c0bd 66%, transparent 66%), 
 linear-gradient(315deg, transparent 34%, #d2c0bd 34%, #d2c0bd 66%, transparent 66%);
 content: "";
}
#facebook_widget a:nth-child(2n):after {
 position: absolute;
 bottom: -12px;
 right: 0px;
 left: 0px;
 height: 16px;
 background-size: 16px 32px;
 background-repeat: repeat-x;
 background-image: 
 linear-gradient(45deg, #d2c0bd 34%, transparent 34%, transparent 66%, #d2c0bd 66%), 
 linear-gradient(315deg, #d2c0bd 34%, transparent 34%, transparent 66%, #d2c0bd 66%);
 content: "";
}
#facebook_widget a:last-child:after {height: 0px; }
#facebook_widget a:first-child {padding-top:10px;}
#facebook_widget {border: 1px dashed #938a8d; padding:5px; }

Variante Icyblue

#facebook_widget a {display:block; padding:10px; margin-bottom:3px; color:#000; text-decoration:none; font-size:13px; line-height:18px; 
 text-align:center;
background: #d4e4ef; /* Old browsers */
background: -moz-linear-gradient(45deg, #d4e4ef 0%, #86aecc 100%); 
background: -webkit-linear-gradient(45deg, #d4e4ef 0%,#86aecc 100%);
background: linear-gradient(45deg, #d4e4ef 0%,#86aecc 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=1 );
} 
 
#facebook_widget a:hover {background-color:#000; color:#fff; 
background: #b5bdc8;
background: -moz-linear-gradient(45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%); 
background: -webkit-linear-gradient(45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
background: linear-gradient(45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 );
}
#facebook_widget a img {float:none ; display:block; margin:0px auto; -ms-filter: grayscale(1) brightness(110%);
-webkit-filter: grayscale(1) brightness(110%);
-moz-filter: grayscale(1) brightness(110%);
-o-filter: grayscale(1) brightness(110%);
filter: grayscale(1) brightness(110%);
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease ;
 -webkit-transition: all 0.3s ease;
margin-bottom:10px;}
#facebook_widget a:hover img {float:none ; display:block; margin:0px auto; -ms-filter: grayscale(0) brightness(100%);
-webkit-filter: grayscale(0) brightness(100%);
-moz-filter: grayscale(0) brightness(100%);
-o-filter: grayscale(0) brightness(100%);
filter: grayscale(0) brightness(100%);
margin-bottom:10px;}
#facebook_widget a em {font-size:90%; opacity:0.8}

Variante Coffee

#facebook_widget a {display:block;padding:20px; padding-left:5px; padding-right:5px; border-bottom:3px solid #77aab8; background-color:#fff; color:#6e5745; text-decoration:none; font-size:13px; line-height:18px; -webkit-transition: all 0.7s ease;
 -moz-transition: all 0.7s ease;
 -o-transition: all 0.7s ease;
 transition: all 0.7s ease; } 
#facebook_widget a:hover {background-color:#e6d9c9; color:#000;}
#facebook_widget a img {float:right; margin-left:10px; max-width:80px; -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease; margin:5px;}
#facebook_widget a:hover img {max-width:90px; margin:0px;}
#facebook_widget a em {font-size:90%; opacity:0.8}

Tipp:
Wie ihr eigene CSS hinzufügt findet ihr in dem Beitrag „Eurem Worpress Theme eigene CSS hinzufügen

 

Für Hardcoder: Hier der Code für den direkten Einbau des Facebook-Pagestreams in euer WordPresstheme ohne Plugin

Für alle, die die Pluginzahl so minimal wie möglich halten möchten – Hier der Code zum Copy & Paste in euer Theme. Die roten Stellen mit den „XXXX“ müsst ihr mit euren eigenen Angaben ersetzen:

<?php

//Hier könnt ihr eure Werte eingeben
$anzahl = "5";
$facebookseitenid = "xxxxxxx";
$facebookappid = "xxxxx";
$facebooksecret = "xxxxx";
$facebookhashtag = "#beispiel";
$facebooklaenge = "100";

 

// Die Ausgabe
echo '
<div class="own_colors"><div id="facebook_widget" class="ideenlounge">';

$anzahlneu = $anzahl + 1;
$url = 'https://graph.facebook.com/'.$facebookseitenid.'/feed?access_token='.$facebookappid.'|'.$facebooksecret.'&fields=attachments,message,link,from,type,name,caption,created_time,description,picture&limit='.$anzahlneu;
 
$rCURL = curl_init();

curl_setopt($rCURL, CURLOPT_URL, $url);
curl_setopt($rCURL, CURLOPT_HEADER, 0);
curl_setopt($rCURL, CURLOPT_RETURNTRANSFER, 1);

$json = curl_exec($rCURL);

curl_close($rCURL);
$json_data = json_decode($json, true);
$count_empty = 0;
$count = 0;

for (; ; ) {

 if (empty($json_data['data'][$count]['created_time'])) { 
 break; 
 } 

 if ($count > $anzahl-1+$count_empty ) 
 {
 break;
 }

if (isset($json_data['data'][$count]['link'])) {
$postlink = $json_data['data'][$count]['link']; }

if (empty($postlink)) { $count=='5'; }

if (isset($json_data['data'][$count]['picture'])) 
{ 
$postimage = $json_data['data'][$count]['picture']; }

if (isset($json_data['data'][$count]['message'])) 
{ 
$postmessage = $json_data['data'][$count]['message'];

if (!empty($facebooklaenge)) {
$postmessagekurz = substr($postmessage,0, $facebooklaenge); 
}
else {
$postmessagekurz = $postmessage;}
}

if (isset($json_data['data'][$count]['name'])) 
{ 
$postname = $json_data['data'][$count]['name']; }

$created_time = $json_data['data'][$count]['created_time'];
$date_source = strtotime($created_time); 
$posttime = date('\V\o\m d.m.Y \u\m H:i\h', $date_source);


if (!empty($facebookhashtag) && strpos($postmessage,$facebookhashtag) !== false || empty($facebookhashtag)) {
 
 echo '<a href="'.$postlink.'" target="_blank">';
 if (isset($json_data['data'][$count]['picture'])) 
 { echo '<img src="'.$postimage.'">'; }
 echo '<b>'.$posttime.'</b><br>';
 if (isset($json_data['data'][$count]['message'])) { echo $postmessagekurz ;
 $text1 = strlen($postmessage);
 $text2 = strlen($postmessagekurz);
 if ($text1 != $text2) { echo ' [...] ';} 
 echo ' | ' ; }
 if (isset($json_data['data'][$count]['name'])) { echo ' <em> '.$postname.'</em>' ;}
 echo '<div class="clear"></div></a>' ;
 $count = $count+1; 
 }
 
 else { 
$count_empty = $count_empty+1; 
$count = $count+1; 
 } 
}
?>
</div>
</div>

Kommentare

  1. Nadine Uzelino 23. September 2016 um 17:28 Uhr

    Ich bin zwar auf Blogspot, aber ich finde du hast diesen Artikel toll gestaltet. Übersichtlich und einfach gegliedert und die Erklärungen sind auch leicht verständlich! Finde ich super.

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz