Innehållsförteckning

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 fortfarande behöver hjälp med integrationen kan du kontakta NewsMachine Support på support@newsmachine.com.

1. Bädda in ditt pressrum på en vanlig webbplats

Steg 1: Hitta URL:en till ditt Pressrum

Innan du lägger till Pressrummet på din webbplats behöver du URL:en till ditt Pressrum.

Använd den URL som är registrerad för din organisation i NewsMachine.

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

Om du har en egen subdomän (CNAME) registrerad hos NewsMachine kan du använda den URL:en i stället.

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

Steg 2: Lägg till inbäddningskoden

Det enklaste sättet att bädda in ditt Pressrum är att lägga till en iframe på din webbplats.

Kopiera koden nedan och ersätt DIN-PRESSRUMS-URL med URL:en till ditt Pressrum:

<iframe
  src="https://DIN-PRESSRUMS-URL/"
  width="100%"
  height="1400"
  style="border: 0;"
  title="Press Room">
</iframe>
Exempel:
<iframe
  src="https://newsmachine.pmembedded.newsmachine.com/"
  width="100%"
  height="1400"
  style="border: 0;"
  title="Press Room">
</iframe>

Iframe-elementet visar ditt Pressrum direkt på din webbplats.

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: Anpassa storleken

Du kan justera värdet för height så att det passar webbplatsens layout.

Exempel: height=”1200″ eller: height=”1600″

Inställningen width=”100%” gör att Pressrummet fyller den tillgängliga bredden i sin behållare.

Valfritt: Automatisk höjd på iframe

Om ditt Pressrum är konfigurerat för att skicka sin höjd till den överordnade webbplatsen kan du använda följande version för att automatiskt anpassa höjden på iframen.

<iframe
  id="pressFrame"
  src="https://DIN-PRESSRUMS-URL/"
  width="100%"
  height="1400"
  style="border: 0; display: block;"
  title="Press Room">
</iframe>

<script>
  (function () {
    const iframe = document.getElementById('pressFrame');

    if (!iframe) {
      return;
    }

    const allowedOrigin = new URL(iframe.src, window.location.href).origin;

    window.addEventListener('message', function (event) {
      // Acceptera endast meddelanden från det inbäddade Pressrummet.
      if (
        event.source !== iframe.contentWindow ||
        event.origin !== allowedOrigin
      ) {
        return;
      }

      try {
        const data =
          typeof event.data === 'string'
            ? JSON.parse(event.data)
            : event.data;

        if (data && Number.isFinite(Number(data.height))) {
          iframe.style.height = `${Number(data.height) + 1}px`;
        }
      } catch (error) {
        console.error('Unable to process Press Room resize message.', error);
      }
    });
  })();
</script>

Viktigt: URL:en i src-attributet måste vara den faktiska URL:en till ditt Pressrum. Du behöver inte ändra allowedOriginmanuellt – den bestäms automatiskt utifrån iframe-URL:en.

Steg 4: Anpassa Pressrummet

Du kan anpassa utseendet på ditt Pressrum från ditt NewsMachine-konto.

Logga in på ditt NewsMachine-konto och gå till:

Press releases → Press Room → CSS editor

Gör önskade ändringar och klicka på Save.

Steg 5: Testa integrationen

Besök sidan där ditt Pressrum finns och kontrollera att:

Pressrummet laddas korrekt.
Pressrummet visas med rätt bredd.
Höjden är tillräcklig för att visa innehållet.
Länkar och knappar i Pressrummet fungerar korrekt.
Pressrummet fungerar på både dator och mobil.

Om du använder versionen med automatisk höjd bör du även kontrollera att iframen ändrar storlek korrekt när du navigerar mellan olika sidor i Pressrummet.

2. Bädda in ditt Pressrum på en WordPress-webbplats

Det finns flera sätt att lägga till ditt Pressrum på en WordPress-webbplats, beroende på vilken redigerare eller sidbyggare du använder.

2.1 WordPress Block Editor (Gutenberg)

Om du använder WordPress Block Editor är den enklaste metoden att använda ett Custom HTML-block. WordPress tillhandahåller detta block specifikt för att lägga till anpassad HTML, exempelvis iframe-kod.

Steg 1: Öppna sidan

Öppna den WordPress-sida eller det inlägg där du vill visa ditt Pressrum.

Steg 2: Lägg till ett Custom HTML-block

Klicka på knappen + för att lägga till ett nytt block.

Sök efter Custom HTML och välj det.

Steg 3: Klistra in iframe-koden

Klistra in följande kod i Custom HTML-blocket:

<iframe
  src="https://DIN-PRESSRUMS-URL/"
  width="100%"
  height="1400"
  style="border: 0; display: block;"
  title="Press Room">
</iframe>

Ersätt DIN-PRESSRUMS-URL med den faktiska URL:en till ditt Pressrum.

Exempel:

<iframe
  src="https://newsmachine.pmembedded.newsmachine.com/"
  width="100%"
  height="1400"
  style="border: 0; display: block;"
  title="Press Room">
</iframe>

Steg 4: Förhandsgranska och publicera

Använd blockets förhandsgranskning för att kontrollera resultatet och förhandsgranska sedan sidan på webbplatsens publika sida innan du publicerar den.

Du kan ändra värdet för height om du behöver mer eller mindre utrymme för Pressrummet.

Automatisk höjd i WordPress

Om du vill att iframen ska ändra storlek automatiskt kan du använda den avancerade koden som finns i avsnittet Valfritt: Automatisk höjd på iframe ovan.

Klistra in hela koden i Custom HTML-blocket.

2.2 WordPress Classic Editor

Om du använder Classic Editor:

Steg 1: Öppna sidan eller inlägget

Öppna den sida eller det inlägg där du vill lägga till Pressrummet.

Steg 2: Växla till Text/HTML-läge

Växla från redigeringsläget Visual till Text.

Steg 3: Lägg till iframen

Klistra in följande kod där du vill att Pressrummet ska visas:

<iframe
  src="https://DIN-PRESSRUMS-URL/"
  width="100%"
  height="1400"
  style="border: 0; display: block;"
  title="Press Room">
</iframe>

Ersätt DIN-PRESSRUMS-URL med den faktiska URL:en till ditt Pressrum.

Steg 4: Spara och förhandsgranska

Spara eller uppdatera sidan och förhandsgranska den på din webbplats.

2.3 Använda ett WordPress-plugin

Om din WordPress-installation inte tillåter dig att lägga till iframe-HTML direkt kan du använda ett välrenommerat iframe- eller embed-plugin som är kompatibelt med din version av WordPress.

Följ pluginets instruktioner för att lägga till en iframe och använd URL:en till ditt Pressrum som iframe-källa.

Av säkerhetsskäl kan WordPress och vissa plugins eller hostingmiljöer begränsa viss HTML eller JavaScript. Om du inte kan spara iframe-koden kontaktar du din WordPress-administratör eller hostingleverantör.

2.4. Infoga en iframe med Elementor

Om du använder Elementor rekommenderas att du använder HTML-widgeten. Elementors HTML-widget stöder HTML, CSS, JavaScript och shortcodes.

Metod 1: Använda HTML-widgeten

Steg 1: Öppna sidan i Elementor

Öppna sidan där du vill lägga till Pressrummet och klicka på Edit with Elementor.

Steg 2: Lägg till HTML-widgeten

Sök efter HTML i Elementors widgetpanel.

Dra HTML-widgeten till den plats där du vill att Pressrummet ska visas.

Steg 3: Klistra in iframe-koden

Klistra in följande kod i HTML-widgeten:

<iframe
  src="https://DIN-PRESSRUMS-URL/"
  width="100%"
  height="1400"
  style="border: 0; display: block;"
  title="Press Room">
</iframe>

Ersätt DIN-PRESSRUMS-URL med den faktiska URL:en till ditt Pressrum.

Steg 4: Förhandsgranska sidan

Spara sidan och förhandsgranska den på din webbplats.

Kontrollera Pressrummet i olika skärmstorlekar för att säkerställa att det visas korrekt.

Automatisk höjd

Om ditt Pressrum stöder automatisk ändring av iframe-storleken kan du klistra in hela koden för automatisk höjd från avsnittet Valfritt: Automatisk höjd på iframe i Elementor HTML-widgeten.

Metod 2: Shortcode-widget

Om du använder ett WordPress-plugin eller en annan integration som tillhandahåller en shortcode för iframe-inbäddningar kan du lägga till denna shortcode med Elementors Shortcode-widget.

Klistra inte in vanlig iframe-HTML i Shortcode-widgeten om inte shortcoden eller pluginet specifikt stöder HTML-iframe-kod.

För vanlig iframe-HTML ska du i stället använda HTML-widgeten.

2.5 Divi

Om du använder Divi Builder kan du lägga till Pressrummet med Code Module. Divis Code Module stöder HTML, CSS, JavaScript och shortcodes.

Metod 1: Code Module

Steg 1: Öppna sidan i Divi

Öppna sidan där du vill lägga till Pressrummet och starta Divi Builder.

Steg 2: Lägg till en Code Module

Lägg till en Code Module i den sektion där du vill att Pressrummet ska visas.

Steg 3: Klistra in iframe-koden

Klistra in följande kod:

<iframe
  src="https://DIN-PRESSRUMS-URL/"
  width="100%"
  height="1400"
  style="border: 0; display: block;"
  title="Press Room">
</iframe>

Ersätt DIN-PRESSRUMS-URL med den faktiska URL:en till ditt Pressrum.

Steg 4: Spara och förhandsgranska

Spara modulen och förhandsgranska sidan.

Kontrollera Pressrummet på dator, surfplatta och mobil.

Automatisk höjd

Om ditt Pressrum stöder automatisk ändring av iframe-storleken kan du använda hela koden för automatisk höjd från avsnittet Valfritt: Automatisk höjd på iframe.

Klistra in koden i Divis Code Module.

Metod 2: Text Module

Du kan även använda en Divi Text Module om din konfiguration tillåter iframe-HTML.

Lägg till en Text Module, växla till HTML-/Text-redigeringsläget och klistra in iframe-koden.

Spara modulen och förhandsgranska sidan.

3. Anpassa ditt Pressrum

Du kan anpassa utseendet på ditt Pressrum från ditt NewsMachine-konto.

Logga in på ditt NewsMachine-konto och gå till:

Press releases → Press Room → CSS editor

Använd CSS-editorn för att anpassa utseendet på ditt Pressrum.

När du har gjort dina ändringar klickar du på Save.

CSS som används inne i Pressrummet styr utseendet på det inbäddade innehållet. Webbplatsens egen CSS kan också påverka iframe-behållaren, exempelvis dess bredd, marginaler och omgivande avstånd.

4. Testa integrationen

När du har lagt till Pressrummet på din webbplats bör du testa integrationen noggrant.

Kontrollera att Pressrummet:

laddas korrekt
visas med rätt bredd
har tillräcklig höjd
fungerar på dator, surfplatta och mobil
har fungerande länkar och knappar.

5. Felsökning

Iframen visas inte

Kontrollera att:

URL:en till Pressrummet är korrekt.
URL:en använder https://.
iframe-koden inte har tagits bort eller ändrats av WordPress, ett plugin eller webbplatsens redigerare.
Din webbplats eller hostingleverantör inte blockerar iframe-innehåll.

WordPress tar bort iframe-koden

Vissa användarroller i WordPress har inte behörighet att använda vissa HTML-element. WordPress kan därför rensa bort innehållet när sidan sparas.

Om detta händer ber du din WordPress-administratör att lägga till iframe-koden eller ge dig de nödvändiga behörigheterna.

Pressrummet är för kort

Öka iframe-höjden.

Exempel: height=”1600″

Om du använder versionen med automatisk höjd ska du kontrollera att du har kopierat hela koden och att Pressrummet är konfigurerat för att skicka sin höjd till den överordnade sidan.

Pressrummet har en rullningslist

Kontrollera först att iframen har tillräcklig höjd för att visa innehållet.

Om du använder versionen med automatisk höjd kontrollerar du att funktionen för automatisk storleksändring fungerar korrekt.

Undvik att dölja rullningslisten som en tillfällig lösning, eftersom besökare då kanske inte förstår att det finns ytterligare innehåll.

Pressrummet ändrar inte storlek automatiskt

Om du använder versionen med automatisk höjd:

Kontrollera att src-attributet innehåller rätt URL till Pressrummet.
Kontrollera att du har kopierat hela JavaScript-koden.
Kontrollera att din webbplatsplattform inte har tagit bort <script>-elementet.
Kontrollera webbläsarens utvecklarkonsol efter JavaScript-fel.
Om problemet kvarstår kontaktar du NewsMachine Support.

Iframen är blockerad

Vissa WordPress-teman, säkerhetsplugins, Content Security Policies (CSP) eller hostingkonfigurationer kan begränsa iframe-innehåll.

Om din iframe blockeras kontaktar du din webbplatsadministratör eller hostingleverantör och ber dem kontrollera om iframe-innehåll från din NewsMachine Press Room-domän är tillåtet.

6. Behöver du hjälp?

Om du behöver hjälp med att bädda in ditt Pressrum eller felsöka integrationen kan du kontakta NewsMachine Support på:

support@newsmachine.com

Etiketter:

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

Innehållsförteckning

1. Bädda in ditt pressrum på en vanlig webbplats

2. Bädda in ditt Pressrum på en WordPress-webbplats

2.1 WordPress Block Editor (Gutenberg)

2.2 WordPress Classic Editor

2.3 Använda ett WordPress-plugin

2.4. Infoga en iframe med Elementor

Metod 1: Använda HTML-widgeten

Metod 2: Shortcode-widget

2.5 Divi

3. Anpassa ditt Pressrum

4. Testa integrationen

5. Felsökning

6. Behöver du hjälp?