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.

fanpagestream

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

    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.

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich über die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhübschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    Nützliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergründe, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder Bücher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    Nützliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed