2016-08-21 7 views
0

Ich möchte einige Facebook-Posts (Bilder) auf meiner Website einbetten, die reaktionsschnell sein soll. Ich verwende Bootstrap als Hauptrahmen für alles und es ist sehr einfach, eine typische Bildempfindlichkeit zu erhalten.Einbetten von Facebook-Post auf responsive Website

Leider mit Facebook-Posts sind das iframe Objekte und sie wollen nicht so schön skalieren.

Für meine Tests, die ich dieses iframe bin mit:

<div class="iframe_div">  
<div>Title</div> 
    <div> 
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKickstarter%2Fphotos%2Fa.10152384621799885.1073741831.73182029884%2F10154511546454885%2F%3Ftype%3D3&width=500" style="border:none;overflow:hidden;width:100%;height:100%;position:absolute;left:0;" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 
    </div> 
    <div>Tekst</div> 
</div> 

Mein Problem ist, dass, wenn ich die Größe des Fensters am Wechsel ich manchmal ganze Post und andere Zeit nur obere Hälfte davon sehen kann. Nun, genauer gesagt, ändert sich allmählich zwischen diesen beiden Werten. Gut ist, dass es nie zu breit ist, aber es ist nicht Höhe genug, um ganz anzuzeigen.

Ein weiteres Problem ist, dass es den Text darunter überlagert, und nur wenn ich einen festen Wert für iframe_div ich bin in der Lage, es zu sehen, aber dann ist es nicht responsive Design.

Hat es jemand geschafft, Facebook Post in responsive Design-Seite einzubetten?

Antwort

1

Sie haben die Container von iframe, um Stil dieses versuchen:

.post-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 35px; 
height: 0; 
overflow: hidden; 
} 

Sie müssen auch Stil iframe wie:

position: absolute; 
top:0; 
left: 0; 
width: 100%; 
height: 100%; 

Sie Polsterung für Ihren Beitrag anpassen können.

+0

Wow, es funktioniert super! Vielen Dank. – sebap123

1

Ersetzen dieses Stück am Ende:

&width=500

für diesen

&width=auto

und style = "width: 100%"

es ist alles

+0

Ich habe es in Chrom versucht und es war wirklich cool, sollte es auf anderen Browsern versuchen – JBoulhous