Externe Seite in Mobirise laden

[inno]

Hallo Tommy,
wie kann ich denn eine externe Seite z.B. Wetter.com in Mobirise laden?
Danke und Grüße

[Tommy Herrmann]

Moin,

na da muss dieser Anbieter ein Script für anbieten oder ein API. Hier habe ich ein Wetter-Widget von "Wetter-Online.de" eingebunden:

https://www.mobirise-tutorials.com/Test ... tml#Wetter

In diesem Fall wird da ein Iframe generiert, dass man dann ganz einfach in irgendeinen Block einbauen kann.

Müsstest Du mal gucken, was Dein externer Dienst da anbietet und gegebenenfalls dann das Script hier posten, dann kann man im Detail helfen.

Es muss also ein Dienst sein, der so ein Widget zum Einbau in die Webseite auch anbietet. Hier kannst Du zum Beispiel ein Widget von "WetterOnline.de" für Deine Stadt in dem gewünschten Format erstellen und dann den passend generierten Iframe-Code einbauen.

https://www.wetteronline.de/wetter-widget

[inno]

... da hast du mich falsche verstanden.
Ich möchte irgendeine Seite, egal welche, ob ebay, mobile, xyz oder deine in meine Mobirise Seite laden.
Wie mache ich das? Gruß

[Tommy Herrmann]

Das geht normalerweise nicht und wird auch von ganz vielen Webseiten-Betreibern untersagt. Es soll und darf ja nicht der Eindruck entstehen, dass die verwendete Seite die eigene Seite ist.

Wenn es geht dann eben auch über ein Iframe (Inline-Frame = eingebetteter Rahmen):

https://www.w3schools.com/tags/tag_iframe.ASP

Du kannst aber nicht bestimmte Bereiche der anderen Seite so einbinden, sondern immer nur die gesamte (fremde) Seite.

Einzelne Skripte kann man dagegen sehr schön auch über einen solchen Iframe einbinden. Hier mal ein Beispiel von dem Skript "Linkliste", das ich hier über einen Iframe eingebunden habe:

https://www.mobirise-tutorials.com/Linkliste.html

... auch "Google Maps" wird normalerweise so über ein Skript auf der Seite mittels Iframe angezeigt:

https://www.mobirise-tutorials.com/Google-Maps.php

... also ganze Seiten geht eher nicht, schon weil es schrecklich aussehen würde. Es gibt Seiten, die das zulassen, wie z.B. Wikipedia.

[inno]

Danke, es geht um eine Brandpage von einem Hersteller die eingebunden werden muss.
Wie diese zum Beispiel:

Code: Alles auswählen

<style>iframe#boraIframe{width:100%;}</style>
<iframe id="boraIframe" src="https://www.bora.com/de/de/microsite-bora-hp/" width="100%" scrolling="no" frameBorder="0"></iframe>
<script src="https://www.bora.com/typo3conf/ext/coulis/Resources/Public/Javascript/iframeResizer.min.js" type="text/javascript"></
script>
<script>iFrameResize()</script>

Gruss

[Tommy Herrmann]

... kleinen Moment

[Tommy Herrmann]

Ja also das Skript, das den Iframe in der Größe anpassen soll, funktioniert bei mir noch nicht. Daher habe ich jetzt mal nur den Iframe eingebaut und auf eine Höhe von 800px mit Scrollbalken gesetzt:

https://www.mobirise-tutorials.com/Test ... Mobirise5/

(wird nachher wieder gelöscht)

Also diesen Code in den Bereich "HTML Editor" vom "Code Editor":

Code: Alles auswählen

<iframe id="boraIframe" src="https://www.bora.com/de/de/microsite-bora-hp/" width="100%" scrolling="yes" frameborder="0"></iframe>

... und diese CSS in den Bereich "CSS Editor" (rechte Seite) - beides ist mit der Maus im Screenshot unten markiert.

Code: Alles auswählen

iframe#boraIframe {
  width: 100%;
  height: 800px;
}

[Tommy Herrmann]

... warte - geht doch mit dem Skript - hatte was falsch gemacht

[Tommy Herrmann]

Nochmals die Testseite (wird wieder gelöscht):

https://www.mobirise-tutorials.com/Test ... Mobirise5/

Also diesen Code in den Bereich "HTML Editor" vom "Code Editor":

Code: Alles auswählen

<iframe id="boraIframe" src="https://www.bora.com/de/de/microsite-bora-hp/" width="100%" scrolling="no" frameborder="0"></iframe>
                    
<script src="https://www.bora.com/typo3conf/ext/coulis/Resources/Public/Javascript/iframeResizer.min.js" type="text/javascript"></script>

<script>iFrameResize()</script>

... und diese CSS in den Bereich "CSS Editor" (rechte Seite) - beides ist mit der Maus im Screenshot unten markiert.

Code: Alles auswählen

iframe#boraIframe {
  width: 100%;
}

[inno]

Versuche ich gleich mal ...

[inno]

Kann ich für den Code irgendeinen Block auswählen?

[inno]

Funktioniert!
Ich danke dir für die schnelle Hilfe!

[inno]

Hallo Tommy,
jetzt habe ich noch ein Script.

Code: Alles auswählen

<div class="loadbeeTabContent"
        data-loadbee-apikey="767fzYdFfSCL9pZfzNbb487nGTURGFDE"
        data-loadbee-gtin="_IHRE_EAN/GTIN_NUMMER_"
        data-loadbee-locale="de_DE"
></div>
<script async src="https://cdn.loadbee.com/js/loadbee_integration.js"></script>

Wie mache ich das hier. Ist auch eine Brandpage!

[Tommy Herrmann]

Ja, eigentlich genauso.

Das kann ich so nicht testen, da ja diese API so unvollständig ist, denn das fehlt:

data-loadbee-gtin="_IHRE_EAN/GTIN_NUMMER_"

Code: Alles auswählen

<div class="loadbeeTabContent"
        data-loadbee-apikey="767fzYdFfSCL9pZfzNbb487nGTURGFDE"
        data-loadbee-gtin="_IHRE_EAN/GTIN_NUMMER_"
        data-loadbee-locale="de_DE">
</div>

Eigentlich gehört der Verweis zum JavaScript (fast) immer in die "Seiteneinstellungen" am Zahnrad in den Bereich:

"End of <body> code"

... siehe Screenshot:

Code: Alles auswählen

<script async src="https://cdn.loadbee.com/js/loadbee_integration.js"></script>

Du musst nur darauf achten, dass dann dieser <div> Container </div> nicht innerhalb eines <p> Tags steht. Also entweder darunter oder das <p> Tag damit ersetzen.

[inno]

Besten Dank für deine Hilfe - FUNKTIONIERT!