Facebook Plugin und Slideshow

[AlcoLix]

Hallo Community,

ich habe zwei Probleme mit meiner Webseite und ich hoffe, dass ihr mir weiterhelfen könnt.

1.Problem: Facebook Plugin wird nicht angezeigt (bei keinem Browser):

Ich habe bei https://developers.facebook.com/docs/plugins/page-plugin den Code generiert und eingebunden aber mein container bleibt weiß.

Folgende Codeschnipsel sind in Verwendung:

Script:

<!-- Facebook API Einbindung-->

<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.0';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

HTML:

<div class="row">
<div class="grid full">
<div class="box white left">
<h2>Facebook</h2>
<div class="fb-page" data-href="https://www.facebook.com/L%C3%A4ndliche-Produkte-1755041801222661/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/L%C3%A4ndliche-Produkte-1755041801222661/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/L%C3%A4ndliche-Produkte-1755041801222661/">Ländliche Produkte</a></blockquote></div>
</div>
</div>
</div>

Ein Bild dazu findet ihr im Anhang.

2. Problem:

Mein Slider mag nicht. Seht ihr evtl den Fehler?

Javascript:

var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("produkt");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}

HTML:

<div class="row">
<div class="grid full">
<div class="box no-height">

<h2>Angebote der Woche</h2>
<div class="product-list front">
<div class="produkt">
<a href="apfel.html">
<img src="img/small1.jpg"></a>
<p>Äpfel
<span class="preis">1,99 € ^*</span></p>
</div>
<div class="produkt">
<a href="erdbeeren.html">
<img src="img/small2.jpg"></a>
<p>Erdbeeren
<span class="preis">1,99 € ^*</span></p>
</div>
<div class="produkt">
<a href="gurke.html">
<img src="img/small3.jpg"></a>
<p>Gurken
<span class="preis">0,99 € ^*</span></p>
</div>

<div class="produkt">
<a href="fleisch.html">
<img src="img/small5.jpg"></a>
<p>Rind
<span class="preis">5,49 € ^*</span></p>
</div>

<div class="produkt">
<a href="eier.html">
<img src="img/small7.jpg"></a>
<p>Eier
<span class="preis">2,49 € ^*</span></p>
</div>
<p><small>* alle Preise inkl. 19% gesetzl MwSt.</small></p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>

Alles unterhalb der Überschrift sollte automatisch durchlaufen, macht er aber nicht. Hab jetzt meine Änderungen wieder aus der HTML rausgenommen. Kann mir jemand sagen wie ich das in die HTML einbinde, damit das funktioniert? Oder muss da irgendwas spezielles in die CSS?