Facebook embed codes Darstellung

Antworten
#1
27.11.2018 09:41 (zuletzt bearbeitet: 30.11.2018 14:36)
avatar  aggi
#1
ag
aggi

Guten Tag,

ich habe auf meiner Seite 3 nebenstehende Elemente , die aus Facebook embed codes/Plus Ins bestehen. 2 Beiträge die mittels eines emebed Codes dargestellt werden und ein Plugin zu den Events, die auf der FB Seite erscheinen. In der Desktop Version werden die Sachen auch korrekt dargestellt.
Tablet/mobile- alles verschoben, bzw zerschossen. Anbei die Beispiele zu den Codes...was ist schiefgelaufen? Danke Euch

1
2
3
4
5
6
7
8
9
10
 

<iframe src=
"https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpg%2FKiezGiganten%2Fevents%2F&tabs=events&width=750&height=531&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=true&appId"
width="480" height="600" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=500" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 

 



Ich habe die Beitragscodes durch die Funktion 'einbetten' generiert, den Event Code (ist automatisch aktualisiert, sobald auf FB neue Events reingestellt werden) durch den FB Plug in/ FB Developers...


 Antworten

 Beitrag melden
#2
27.11.2018 09:56
avatar  Charles
#2
avatar
Charles

Wird wohl an den festen Pixel-Werten für Höhe und Breite liegen.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
#3
27.11.2018 10:23 (zuletzt bearbeitet: 30.11.2018 14:37)
avatar  aggi
#3
ag
aggi

ok und was wäre das optimale um die Elemente symmetrisch darzustellen und zwar auf jedem device und in jedem betriebssystem? anbei die ansicht die es auf der webseite (chrome/mac) gibt-so soll es auch auf allen devices aussehen...

anbei die eingebetteten codes und deren jetzige pixel werte....hilfe :-)

1
2
3
4
5
6
7
8
9
 

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=500" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=300" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&width=300" width="310" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 
 


 Antworten

 Beitrag melden
#4
27.11.2018 10:30
avatar  aggi
#4
ag
aggi

anbei noch die screens

Bildanhänge

 Antworten

 Beitrag melden
#5
27.11.2018 10:31
avatar  aggi
#5
ag
aggi


 Antworten

 Beitrag melden
#6
27.11.2018 10:50 (zuletzt bearbeitet: 27.11.2018 10:50)
avatar  Charles
#6
avatar
Charles

Zitat von aggi im Beitrag #3
ok und was wäre das optimale um die Elemente symmetrisch darzustellen

Eine Angabe in Prozent und nicht in Pixel.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
#7
27.11.2018 10:52
avatar  aggi
#7
ag
aggi

magst Du mir bitte einen Beispiel geben, anhand eines Codes, wie ich es ändern/ bearbeiten soll? Ich bin halt kein Developer :-/

Danke sehr agnieszka


 Antworten

 Beitrag melden
#8
27.11.2018 11:38
avatar  Charles
#8
avatar
Charles
Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
#9
27.11.2018 11:59
avatar  aggi
#9
ag
aggi

danke sehr , ich versuche es :-/


 Antworten

 Beitrag melden
#10
29.11.2018 14:18 (zuletzt bearbeitet: 30.11.2018 14:38)
avatar  aggi
#10
ag
aggi

ich habe den Beispielcode jetzt wie folgt abgeändert, leider funktioniert es immer noch nicht responsive- wäre dankbar über jegliche tipps, was ich falsch gemacht habe. vg agnieszka

1
2
3
 
<div class=“embed-container“ >
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKiezGiganten%2Fposts%2F360681667810643%3A0&max-width=100%" width="100%" height="531" style=
"border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
 


 Antworten

 Beitrag melden
#11
29.11.2018 18:13
avatar  Charles
#11
avatar
Charles

Bei mir sieht deine Seite in der mobilen Ansicht auch ok aus.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
#12
30.11.2018 14:41 (zuletzt bearbeitet: 30.11.2018 14:42)
avatar  az_
#12
avatar
az_

Hi Aggi,

...vielleicht hilft Dir ein Hard-Reload bei Deinem mobilen Browser. iOS > Einstellungen Safari > Website-Daten löschen glaub ich.

LG, az


PS: Bitte Code immer einkapseln mit <code> </code> !


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#13
30.11.2018 17:03 (zuletzt bearbeitet: 03.12.2018 15:23)
avatar  aggi
#13
ag
aggi

Danke Euch für Eure Hilfe, Ich schaue mir das noch übers Wochenende nochmal an, auf verschiedenen Devices. Und versuche es mit dem Hard-Reload auch. Irgendwie sah es halt ziemlich zerschossen aus das ganze. Noch eine Frage bzgl. der Buttons: im vertikaler Ansicht vom Bildschirm sind sie an die Breite der FB-Beitragsbilder angepasst, wenn man aber die Bildschirmansicht horizontal ausrichtet, sind sie länger als die eingebetteten FB-Beiträge, was ziemlich doof aussieht.

Wie kann ich diese anpassen, so dass sich auch deren Länge je nach Ansicht verändert?

Anbei ein Beispielcode von dem Button. Danke Euch und vorab schon ein schönes Wochenende für Euch

1
 
<a class="hs-button fullwidth-btn text-center strong-blue" >KiezNews</a>
 



Danke Agnieszka


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!