Guide: Bädda (infoga) in ditt pressrum på din webbplats

Att integrera ditt pressrum på din egen webbplats gör det möjligt för besökare att hålla sig uppdaterade med de senaste nyheterna samtidigt som de stannar kvar på din plattform. Följ denna steg-för-steg-guide för att sömlöst bädda in ditt pressrum.

Om du behöver hjälp med att integrera ditt pressrum är du välkommen att kontakta NewsMachines support på support@newsmachine.com

Bädda in ditt pressrum på en vanlig webbplats

Steg 1: Kopiera inbäddningskoden

Här är ett exempel på HTML-kod som behövs för att bädda in pressrummet på din webbplats. Kopiera och klistra in denna kod på önskad plats i webbplatsens HTML-fil och ersätt src-URL:en med din organisations namn registrerat hos Newsmachine.

Exempel: https://newsmachine.pmembedded.newsmachine.com/.

Om du har ett eget subdomän (CNAME) registrerat hos Newsmachine, kan du även använda det.

Till exempel: src="https://subdomän.dindomän.com/".

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
      #pressFrame {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      #pressFrame::-webkit-scrollbar {
        display: none;
      }
    </style>

</head>
 
<body>
    <iframe
      id="pressFrame"
      src="https://pressroom.newsmachine.com/"
      width="100%"
      height="1500"
      frameborder="0"
      allowfullscreen> 
    </iframe>
    
    <script>
      function resize_frame(e) {
        if (e.origin === "https://pressroom.newsmachine.com") {
          var data = JSON.parse(e.data);
          if (data["height"]) {
            $("#pressFrame").css("height", data["height"] + 1);
          }
        }
      }
      if (window.addEventListener) {
        window.addEventListener("message", resize_frame);
      } else if (window.attachEvent) {
        window.attachEvent("onmessage", resize_frame, false);
      }
    </script>
</body>

Steg 2: Anpassa inbäddningen

Bredd & Höjd: Justera <iframe>-attributen för optimal visning.
CSS-styling: Anpassa utseendet för att matcha din webbplats design. Logga in på ditt Newsmachine-konto, navigera till Pressutskick i huvudmenyn, klicka sedan på Pressrum i undermenyn och scrolla ner till CSS-redigeraren.
När du har gjort nödvändiga ändringar, klicka på Spara.

Steg 3: Testa integrationen

Besök din webbsida för att kontrollera att pressrummet laddas korrekt. Testa olika skärmstorlekar för att säkerställa responsivitet och korrekt anpassning.

Så här infogar (embed) du ditt Pressrum på din WordPress-webbplats

Det finns några olika sätt att bädda in ditt pressrum på din webbplats beroende på vilken editor (i WordPress) du använder. Här är hur du gör det med de vanligaste editorerna (redigerarna):

1. Infoga en iframe i Gutenberg Block Editor

Om du använder den nya WordPress Blockredigeraren (Gutenberg), följ dessa steg:

Öppna sidan eller inlägget där du vill infoga iframe.
Klicka på blockinfogaren (+) för att lägga till ett nytt block.
Sök efter Anpassad HTML och välj det.
I blocket för Anpassad HTML, klistra in din iframe-kod.

Här är ett exempel på koden:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

Du kan förhandsgranska genom att klicka på Förhandsgranska-knappen ovanför blocket.
Anpassa koden genom att justera bredd och höjd för att passa din design.

Exempel med extra anpassning:

Exempel: https://newsmachine.pmembedded.newsmachine.com/.

Om du har ett eget subdomän (CNAME) registrerat hos Newsmachine, kan du även använda det.

Till exempel: src="https://subdomän.dindomän.com/".

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #pressFrame { 
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #pressFrame::-webkit-scrollbar { display: none; }
    </style>
</head>
<body>
    <iframe id="pressFrame" src="https://pressroom.newsmachine.com/" width="100%" height="1500" frameborder="0" allowfullscreen></iframe>
    <script>
        function resize_frame(e) {
            if (e.origin === 'https://pressroom.newsmachine.com') {
                var data = JSON.parse(e.data);
                if (data['height']) {
                    $('#pressFrame').css('height', (data['height'] + 1));
                }
            }
        }
        if (window.addEventListener) {
            window.addEventListener('message', resize_frame);
        } else if (window.attachEvent) {
            window.attachEvent('onmessage', resize_frame, false);
        }
    </script>
</body>

2. Infoga en iframe i Classic Editor

Om du använder Classic Editor (eller en plugin som tillhandahåller den gamla redigeraren):

Gå till sid- eller inläggsredigeraren.
Växla från Visuellt läge till Textläge (HTML).

Klistra in din iframe-kod där du vill ha den.

Exempel:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

Växla tillbaka till Visuellt läge för att kontrollera placeringen.
Uppdatera eller publicera inlägget.

3. Använda en Shortcode-plugin

Om du är begränsad från att lägga till HTML eller använder vissa teman kan du använda en plugin för att infoga iframe.

Installera och aktivera en plugin som Shortcoder eller Iframe Embedder.
Efter aktivering kan du skapa shortcodes som omsluter iframe-koden eller använda widgets för att bädda in den utan att redigera HTML.

4. Infoga en iframe med Elementor

Om du använder Elementor kan du enkelt lägga till en iframe.

Metod 1: Använda HTML-widgeten

Öppna sidan eller inlägget i Elementor.
Klicka på Redigera med Elementor.
Sök efter HTML-widgeten i vänsterpanelen.
Dra och släpp HTML-widgeten till önskad sektion.

Klistra in din iframe-kod, t.ex.:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

Du ser direkt iframe-innehållet i Elementor.

Metod 2: Använda Elementor Shortcodes

Sök efter Shortcode-widgeten.
Dra widgeten till önskad sektion.
Lägg till iframe-koden i shortcode-fältet om din webbplats stöder det.

5. Infoga en iframe med Divi Editor

Metod 1: Använda kodmodulen

Divi har en Kodmodul där du kan infoga HTML, JavaScript och CSS.

Öppna sidan eller inlägget i Divi.
Klicka på Redigera med Divi Builder.
Välj Kodmodul från listan.

Klistra in din iframe-kod:

<iframe src="https://pressroom.newsmachine.com" width="100%" height="1400"></iframe>

Iframe-innehållet kommer att visas direkt i modulen.

Metod 2: Använda Textmodulen

Om du vill infoga en iframe i text kan du använda Textmodulen.

Klicka på + för att lägga till en Textmodul.
Växla till Textläge och klistra in iframe-koden.
Växla tillbaka till Visuellt läge för att förhandsgranska.

Anpassa inbäddningen

Bredd & Höjd: Justera <iframe>-attributen för optimal visning.
CSS-styling: Anpassa utseendet för att matcha din webbplats design. Logga in på ditt Newsmachine-konto, navigera till Pressutskick i huvudmenyn, klicka sedan på Pressrum i undermenyn och scrolla ner till CSS-redigeraren.
När du har gjort nödvändiga ändringar, klicka på Spara.

Testa integrationen

Besök din webbsida för att kontrollera att pressrummet laddas korrekt. Testa olika skärmstorlekar för att säkerställa responsivitet och korrekt anpassning.

Extra tips

1. Responsivt iframe i Divi

För att säkerställa att iframe är responsivt kan du lägga till anpassad CSS i Divi Avancerat > Anpassad CSS eller Divi Temaalternativ > Anpassad CSS.

2. Iframe-blockering

Vissa teman och plugins kan blockera iframe av säkerhetsskäl. Om du har problem kan du:

Justera säkerhetsinställningarna.
Använda en plugin som stöder iframe-inbäddning.

Etiketter: