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.
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.
Facebook stellt eine tolle Schnittstelle zur Verfügung, über die man sich die Daten des Facebookstreams einer Seite saugen kann.
Die Vorteile:
Der Nachteil:
Ich habe ein kleines schlankes Plugin für WordPress geschrieben, dass den Stream einer Fanpage ohne Page-Plugin lädt.
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:
#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}
#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; }
#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}
#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 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>
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.