amp disqus integration

AMP Tutorial: So integrieren Sie Disqus in Ihre AMP Website

Seit dem 21.09.2016 kann das beliebte Kommentarsystem Disqus nun auch auf Seiten implementiert werden, die das AMP Framework von Google nutzen. Die Installation erweist sich allerdings als schwierig. Die offizielle Anleitung ist unzureichend und führt nicht zum gewünschten Ergebnis. Wir zeigen Ihnen deshalb, wie Sie Disqus erfolgreich auf Ihren AMP Seiten integrieren, sodass auch dort kommentiert werden kann.

Bevor Sie beginnen

Bevor Sie mit der Installation beginnen, stellen Sie bitte folgendes sicher:

  • Die Seite, auf der das Disqus Script eingebunden werden soll, wurde bereits entsprechend der AMP Richtlinien aufbereitet und liefert valides AMP HTML aus.
  • Ihre Website ist bereits bei Disqus registriert.
  • Sie verfügen über den „shortname“, der bei Disqus für Ihre Seite hinterlegt ist. Falls nicht finden Sie diesen auf der Disqus Website unter Admin > Settings > General.
  • Sie haben die Möglichkeit, bei Ihrem Web-Hoster Sub-Domains anzulegen und für diese Sub-Domain ein SSL-Zertifikat zu hinterlegen (z.B. ein Wildcard-Zertifikat für Domain + Sub-Domains)

Schritt 1: AMP iframe-Modul einbinden

Öffnen Sie Ihr AMP-Template und tragen Sie folgende Zeile in den <head> Bereich ein:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Dies sorgt dafür, dass ab sofort der JavaScript Code für das iframe Modul geladen wird, wenn Ihre Seite aufgerufen wird. Damit ist es nun möglich, auch auf AMP Seiten iframes einzubinden. Sollte diese Zeile schon in Ihrem Template vorhanden sein, können Sie diesen Schritt überspringen.

Schritt 2: iframe Code einfügen

Suchen Sie die Stelle in Ihrem Template, an der Disqus ausgegeben werden soll. Diese Stelle ist üblicherweise unter dem Content-Bereich. Fügen Sie dort dann folgenden Code ein:

<amp-iframe width=600 height=140
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="">
    <div overflow tabindex=0 role=button aria-label="readmore">Mehr Lesen...</div>
</amp-iframe>

Im Attribut src=““ muss später noch eine andere url eingetragen werden. Fürs Erste belassen Sie es aber dabei. Wundern Sie sich nicht über das zusätzliche div-Element. Dieses muss dort eingefügt werden, damit die Höhe des iframes nachträglich in Echtzeit verändert werden kann.

Schritt 3: Datei mit Disqus Universal Code anlegen

Legen Sie in einem beliebigen Verzeichnis auf Ihrem Webserver eine neue HTML Datei Datei an. Der Name der Datei kann frei gewählt werden. Fügen Sie dort folgenden Code ein:

<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize') {
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
            }, '*');
        }
    }
}
</script>
<script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    var disqus_config = function () {
        this.page.url = window.location;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = window.location.hash.slice(1); // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = '//[disqus_shortname].disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

Dies ist der offizielle universal code von Disqus, der auch für die AMP Version zur Verfügung gestellt wird. Den Großteil des Inhaltes können Sie unverändert lassen. Lediglich die markierte Zeile 38 ist für Sie von Interesse. Dort muss Ihr Disqus Shortname (ohne die eckigen Klammern) eingetragen werden, der anfangs erwähnt wurde.

Schritt 4: Subdomain anlegen

Haben Sie die Datei abgespeichert, müssen Sie nun bei Ihrem Hoster eine Subdomain anlegen, die zu dem Verzeichnis führt, in welchem die Datei gespeichert wurde. Für diese Sub-Domain muss ausserdem ein SSL-Zertifikat hinterlegt sein. Ist das erledigt, tragen Sie den Pfad zu der erstellten Datei mitsamt der Sub-Domain in das src=““ Attribut des iframe-Blocks aus Schritt 2 ein:

<amp-iframe width=600 height=140
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://subdomain.ihrewebsite.de/amp.html#hash">
    <div overflow tabindex=0 role=button aria-label="readmore">Mehr Lesen...</div>
</amp-iframe>

Schritt 5: Hash an den Pfad anhängen

Nun müssen Sie sich noch um den hash kümmern, der am Ende des Pfades angehängt werden muss. Dies ist nichts anderes als eine eindeutige id, die zu einem bestimmten Disqus Thread zugewiesen wird. Bei News-Artikeln ist das in der Regel eine News-ID. Sie können aber auch einen anderen eindeutigen Wert dynamisch generieren und dort anfügen. Als Beispiel nehmen wir hier eine news-id, die per PHP-Script dynamisch generiert und per Smarty im Template ausgegeben wird. Das Ergebnis könnte dann so aussehen:

<amp-iframe width=600 height=140
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://subdomain.ihrewebsite.de/amp.html#{$news_id}">
    <div overflow tabindex=0 role=button aria-label="readmore">Mehr Lesen...</div>
</amp-iframe>

Wichtig ist, dass dies die selbe id oder der selbe Hash ist, den Sie auch auf nicht-AMP Seiten für die jeweilige Zuordnung zum Disqus Thread verwenden.

Schritt 6: Eine kleine CSS Anpassung

Als wir Disqus auf unseren AMP Seiten in unserem News-Portal inside-handy.de implementiert haben, hatten wir das Problem, dass nicht alle Kommentare angezeigt wurden, wenn eine Seite geöffnet wurde. Durch eine kleine Anpassung im Block <style amp-custom> kann dies aber korrigiert werden:

.post-body {
    height: auto;
}

Schritt 7: Domain bei Disqus hinterlegen

Damit das Ganze auch funktioniert, muss Ihre Domain jetzt noch als Trusted Domain bei Disqus hinterlegt werden. Dazu melden Sie sich auf der Disqus Website an und tragen Ihre Domain dann unter Admin > Settings > Advanced in das entsprechende Feld ein.

Geschafft

Wenn alles funktioniert hat, sollte das beliebte Kommentarsystem nun auch auf Ihrer optimierten Seite laufen. Da es derzeit auch noch keine Alternative gibt, ist dies auch aktuell der einzige Weg um Kommentare auf Seiten mit Googles mobilem Framework zu erlauben.

Benötigen Sie Hilfe bei der Integration von Disqus auf Ihrer Website ? Wir helfen Ihnen gerne weiter.

[av_button label=’Jetzt Kontakt mit uns aufnehmen‘ link=’page,20′ link_target=“ size=’medium‘ position=’center‘ icon_select=’yes‘ icon=’ue8b9′ font=’entypo-fontello‘ color=’theme-color‘ custom_bg=’#444444′ custom_font=’#ffffff‘ av_uid=’av-2oh3nd‘]


Kommentare

4 Antworten zu „AMP Tutorial: So integrieren Sie Disqus in Ihre AMP Website“

  1. Hallo,
    sind die hier beschriebenen Schritte 2020 immer noch nötig oder gibt es mittlerweile eine alternative, „einfachere“ Lösung?

    LG Patrick

    1. Avatar von Arvid Bredow
      Arvid Bredow

      Hallo Patrick,

      ja die beschriebenen Schritte sind aktuell immer noch gültig. Die offizielle Anleitung dazu zählt diese Schritte immer noch auf und wurde das letzte Mal vor einem Monat aktualisiert. Diese findest du hier.

      Liebe Grüße,
      Arvid

  2. Hallo,
    die Kommentare werden bei mir nur auf der Subdomain Adrese (https://comments.ungeklicktarchiv.de/thread.html) angezeigt jedoch nicht auf https://ungeklicktarchiv.de/comments.html

    Ich habe die Subdomain Adresse richtig verlinkt, jedoch weiß ich nicht wo ich den hash finde. Könnte es daran liegen?

    Liebe Grüße
    Franz

  3. Hey, stimmt es das AMP aktuell also in 2023 keine Vorteile mehr in Sachen Ranking und geschwindikeit bei Google bringt?
    VG Alex