Facebook-Feed mit Hintergrundbild

Extensions, Bedingungen und Preise, Third Party Apps
Extrazeit
Mitglied (Level 1)
Mitglied (Level 1)
Beiträge: 2
Registriert: Fr 18. Dez 2020, 10:17
Wohnort: Graz

Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Extrazeit »

Liebe Mobirise Spezialisten, ich benötige eure Hilfe.

Ich habe auf einer Website (grafen.at), den FB-Feed eingebaut,
in diesem Block würde ich gerne ein Hintergrundbild einfügen.

Ich verwende jetzt schon das dritte Jahr, dass komplette Mobirise-Kit.
Aktuelle Version: 5.2.5 Beta (funktioniert bei mir sehr gut)
Vielen Dank für eure Unterstützung und bleibt gesund.
[Windows 10, Mobirise 5.2.5 komplett]
Benutzeravatar
Rancher
Moderator
Moderator
Beiträge: 465
Registriert: Di 8. Dez 2020, 18:37
Wohnort: Elsass

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Rancher »

Ich würde einen Block mit einem Hintergrundbild nehmen und anstatt des Textes den Code von Facebook eintragen.
Wenn Dein Pferd tot ist, steig ab.
Extrazeit
Mitglied (Level 1)
Mitglied (Level 1)
Beiträge: 2
Registriert: Fr 18. Dez 2020, 10:17
Wohnort: Graz

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Extrazeit »

Vielen Dank,
ich wollte eine Abkürzung nehmen.
Aber so ist es auch ok.
Vielen Dank für eure Unterstützung und bleibt gesund.
[Windows 10, Mobirise 5.2.5 komplett]
Benutzeravatar
Rancher
Moderator
Moderator
Beiträge: 465
Registriert: Di 8. Dez 2020, 18:37
Wohnort: Elsass

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Rancher »

Noch kürzer? :confused:
Wenn Dein Pferd tot ist, steig ab.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Moin,

so richtig verstehen tue ich diese Diskussion jetzt noch nicht, denn Du meinst doch den Mobirise-Block oder?

Der Mobirise-Block "Facebook Feed" bietet keine Möglichkeit für ein Hintergrundbild - nur für eine andere Farbe. Man kann doch keinen Mobirise-Block auf einem anderen Mobirise-Block aufziehen:

Facebook-Feed.JPG

Dann müsste man den Code vom Facebook-Plugin händisch einbauen, was Ellen wohl meint - also dann nicht den Block "Facebook-Feed" von Mobirise verwenden.

Ich habe dafür auch ein Beispiel auf einer meiner Seiten erstellt:

https://www.mobirise-tutorials.com/Busi ... -Feed.html
Benutzeravatar
Rancher
Moderator
Moderator
Beiträge: 465
Registriert: Di 8. Dez 2020, 18:37
Wohnort: Elsass

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Rancher »

Und was ist daran nicht zu verstehen?
Wenn Dein Pferd tot ist, steig ab.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Extrazeit hat geschrieben: Mo 11. Jan 2021, 12:00 Ich habe auf einer Website (grafen.at), den FB-Feed eingebaut,
in diesem Block würde ich gerne ein Hintergrundbild einfügen.
ich dachte und hatte verstanden, dass er den Mobirise-Block "Facebook-Feed" mit Hintergrundbild ändern wollte und danach fragte, deswegen wollte ich nochmals klar stellen, dass das eben nicht in diesem Block vorgesehen ist.
Benutzeravatar
netzkeks
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 46
Registriert: Do 21. Jan 2021, 19:43
Wohnort: NRW

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von netzkeks »

Hallo Tommy,

weil ich auch gerne anstatt nur eine Farbe, ein Bild als Hintergrund für den Facebook-Feed haben möchte,
habe ich das Plugin, welches du in deinem Tutorial "Social-Feed" beschreiben hast, in ein Modul eingebaut.

Was ja auch funktioniert, jedoch wenn ich die Seite verlasse und wieder auf die Seite gehe,
muss ich immer die "F5 Taste" drücken, damit die Daten angezeigt werden. :confused:

Unsere Dorf Seite: https://www.hohenwepel.de/buecher.html

Bei dir im Tutorial ist das nicht so.
Hast du eine Idee woran das liegen kann?
Hast du ein autorefresh in deiner Seite?

Schöne Grüße
Daniel

PS. Vielleicht könnte ja Mobirise ihr offizielles Plugin etwas erweitern (Hintergrundvideo...)
Kekse gehen immer...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Hallo,

... ich weiß im Moment nicht was Du meinst (muss auch gleich hier weg für heute).

Ich sehe gerade auf Deiner Seite kein Facebook-Plugin, sondern lediglich 2 Text-Links zu Deiner Facebook-Seite:


Facebook-Link.JPG
Benutzeravatar
netzkeks
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 46
Registriert: Do 21. Jan 2021, 19:43
Wohnort: NRW

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von netzkeks »

Drück mal bitte die F5 Taste, dann werden die Daten geladen.
Kekse gehen immer...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

nee Du - bei mir wird da gar nichts geladen. Die "F5" Taste bzw. eigentlich die Tastenkombination "Strg + F5" lädt den Cache vom Browser neu.

Meinst Du diese meine Seite?

https://www.mobirise-tutorials.com/Busi ... -Feed.html

Der Facebook-Feed von Mobirise funktioniert auch wieder, den Block brauchst Du doch einfach nur aufziehen.
Benutzeravatar
netzkeks
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 46
Registriert: Do 21. Jan 2021, 19:43
Wohnort: NRW

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von netzkeks »

Ja, ich meine die Seite mit deinem Tutorial.

Bei dem Modul kann man kein Hintergrundbild einfügen.
Kekse gehen immer...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Du hast auch den Link zu Facebook versehentlich 2 x eingebaut - dann funktioniert das Skript nicht mehr. Der eine Block muss raus.

Das sieht man am Quelltext und das kannst Du auch schon ganz klar oben an meinem Screenshot erkennen.
Benutzeravatar
netzkeks
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 46
Registriert: Do 21. Jan 2021, 19:43
Wohnort: NRW

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von netzkeks »

Ok, ich lade die Seite gerade nochmal hoch.

Fertig.

Es bleibt aber dabei.
Kekse gehen immer...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Ja, das kann ich so nicht sehen. Ich würde mal als erstes den "WhatsApp" Button entfernen und dann nochmals gucken. Da "beißen" sich irgendwelche Skripte.

Es macht in so einem Fall auch zunächst mal Sinn, das Facebook-Plugin auf einer anderen - ganz frischen Seite ohne jeden anderen Schnickschnack einzubauen. Sonst findet man den Grund nicht.

... ich muss jetzt für heute weg ...
Benutzeravatar
netzkeks
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 46
Registriert: Do 21. Jan 2021, 19:43
Wohnort: NRW

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von netzkeks »

Ok, ich probiere es mal in einer leeren Testseite.

Dann wünsche ich dir einen schönen Abend ...

https://dhenke.de/testordner/

hier funktioniert es gar nicht...
Obwohl ich den Code von der Tutorial Seite genommen habe.

Code: Alles auswählen

 <input type="range" inline="" title="Transparenz" name="overlayOpacity" min="0" max="1" step="0.1" value="0.7" condition="overlay &amp;&amp; bg.type !== 'color'">
    <!-- End block parameters -->
    </mbr-parameters>
    
<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.2';
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    
    <div class="mbr-overlay" mbr-if="overlay &amp;&amp; bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="mbr-white col-md-10">
                <h1 class="mbr-section-title align-center pb-3 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle">
                    Neues von Hohenwepel auf facebook</h1>
                <p class="mbr-text align-center display-5 pb-3 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
                   Full-Screen Intro mit Farbverlauf im Hintergrund. Klicken Sie auf den blauen Zahnrad-Button in der rechte.
                    
                </p>

                
<div style="max-width: 100%" class="fb-page" data-href="https://www.facebook.com/hohenwepel/" data-tabs="timeline, events" data-width="500px" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/hohenwepel/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/hohenwepel/">Neues aus Hohenwepel</a></blockquote></div>
                
                
                <div class="mbr-section-btn align-center" mbr-buttons="" mbr-theme-style="display-4" mbr-if="showButtons" data-toolbar="-mbrBtnMove">
Kekse gehen immer...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ich weiß jetzt auch nicht warum das bei Dir nicht geht. Da passiert ja im Hintergrund mit den Facebook-Scripts jede Menge Zeugs.

Du musst also Schritt für Schritt vorgehen, damit Du den Grund vielleicht finden kannst.

1) Schalte zunächst unbedingt am "Pinsel" (unten rechts) die "Animation on Scroll" aus! Das verursacht sehr oft schlimme Probleme. Teste dann wieder (immer online - offline funktioniert dieses Facebook-Plugin nicht).


Animation on Scroll.JPG


2) Ich habe dafür einen einfachen Textblock aus der Rubrik "Article" verwendet.

Dein Code sieht schon ziemlich anders aus. Lasse also mal alles vorerst weg - auch den Hintergrund. Es kann z.B. gut sein, dass das Overlay von Deinem Hintergrund die Ausführung von Facebook nicht richtig darstellen lässt.

3) Ersetze zum Testen den gesamten Block-Inhalt mit meinem Code unten, denn der geht auch mit Deiner Facebook-Seite, was ich gerade hier erfolgreich ausprobiert habe.

Lösche also aus Deinem Block den gesamten Inhalt - von oben bis unten - und kopiere anstelle dessen meinen Code mit Deiner Facebook-Adresse (steht schon im Code drinnen) dort hinein - dann teste wieder online.

Code: Alles auswählen

<section class="mbr-section article content1">
    
    <mbr-parameters>
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="1">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="6">
        <input type="color" title="Hintergrundfarbe" name="bgColor" value="#ffffff">
    <!-- End block parameters -->
    </mbr-parameters> 
    
    <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.2';
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    
    <div class="container">
        <div class="media-container-row">
            <div class="mbr-text col-12 col-md-8 mbr-fonts-style text-center" mbr-theme-style="display-2" data-app-selector=".mbr-text" data-multiline mbr-article><br>
                                
                <div style="max-width: 100%" class="fb-page" data-href="https://www.facebook.com/hohenwepel/" data-tabs="timeline" data-width="500px" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/hohenwepel/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/hohenwepel/">Neues aus Hohenwepel</a></blockquote></div>
                
            </div>
        </div>
    </div>
</section>
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

... im Übrigen kannst Du doch eigentlich viel einfacher den Facebook-Block aus den Mobirise-Erweiterungen nehmen, auch wenn der keinen Hintergrund anbietet.

Hier habe ich das mal ausprobiert:

https://www.mobirise-tutorials.com/Test ... ok-page-4b

Ich habe also lediglich in den Bereich "CSS Editor" (markiert im Screenshot unten) ein Bild als Hintergrund eingetragen - das muss, da es Mobirise nicht "kennt", mit einer absoluten URL eingetragen werden und daher vorher mit einem FTP-Programm wie "FileZilla" auf den Server kopiert werden.

Code: Alles auswählen

background-image: url("https://www.mobirise-tutorials.com/Testseiten/Testseite-Blank/images/background-facebook.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;

Facebook-Feed mit Hintergrundbild.JPG

Hintergrundbild CSS.JPG
Benutzeravatar
netzkeks
Mitglied (Level 5)
Mitglied (Level 5)
Beiträge: 46
Registriert: Do 21. Jan 2021, 19:43
Wohnort: NRW

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von netzkeks »

Moin Tommy,
super danke :tu: , jetzt funtioniert es und ist auch viel einfacher.

Was mir noch aufgefallen ist, wenn man die Seite auf dem Desktop in der Breite ganz zusammenschiebt bzw.
sie sich auch dem Handy anschaut, ist das Modul (Facebook-Kasten) auf der rechten Seite abgeschnitten.

Habe mehrere Breiten ausprobiert von 500px bis 400px.
Kann man da evtl. irgendwo ein "100%" eingeben, dass das Kasten auch responsive wird.

Schöne Grüße
Daniel
Kekse gehen immer...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Facebook-Feed mit Hintergrundbild

Ungelesener Beitrag von Tommy Herrmann »

Moin Daniel,

also - ich habe jetzt bestimmt 1 Stunde herum gefummelt - bekomme es aber nicht wirklich hin :crying:

Mit 100% geht nur bedingt. Irgendwie scheint da auch mal wieder "Facebook" unangekündigt etwas geändert zu haben :eek:

Da ist etwas mit den CSS-Variablen nicht ganz richtig. Es gibt ja im Script 2 Breiten, eine für den Facebook-Inhalt und eine für das Iframe. Mobirise verwendet aber für beides die gleiche Variable, was in jedem Fall falsch ist.

CSS:

Code: Alles auswählen

.fb-page, span, iframe {
  width: (@width * 1px);
  height: (@height * 1px);
}
Eingabefelder Breite/Höhe und Facebook-Anzeige im Iframe:

Code: Alles auswählen

<input type="range" name="width" title="Width" step="10" min="180" max="500" value="500">
<input type="range" name="height" title="Height" step="50" min="70" max="1000" value="600">

<div class="row justify-content-center mt-4">
       <iframe src="https://www.facebook.com/plugins/page.php?href={{url}}&amp;tabs=timeline,events,messages&amp;width={{width}}&amp;height={{height}}&amp;small_header={{smallheader}}&amp;adapt_container_width=true&amp;hide_cover={{!cover}}&amp;hide_cta={{ctabtn}}&amp;appId=2773163886047820" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
Da müsste mal der Support ran. Ich habe das in das Hersteller-Forum geschrieben - man weiß nie, ob der Support das auch liest, denn die sind erst Montag wieder da.

https://forums.mobirise.com/discussion/ ... d-issue/p1

Vielleicht solltest oder willst Du das noch zusätzlich direkt an den Support schreiben:

support@mobirise.com

... sorry - ich komme da gerade nicht weiter mit.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 14 Gäste