amp disqus integration

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.

Lesen Sie auch:

Disqus verändert heimlich Ihre Links Wenn Sie Disqus nutzen und häufig Links in Ihren Artikeln setzen, sollten Sie mit geeigneten Tools einmal genauer hinschauen was mit Ihren Verlinkungen angestellt wird, ohne dass man Sie um Erlaubnis dafür gebeten hat. An Ihre Links werden sehr wahrs...
Mobile Google-Suche bekommt Kauf-Button Laut einem Bericht des Wall Street Journals möchte Google demnächst einen Kauf-Button in seine mobile Suche integrieren, vorerst jedoch ausschließlich für US-amerikanische Nutzer. Dieser soll neben den Suchergebnissen eingeblendet werden und den Eink...
Google Zertifizierte Händler wird zu Google Kunden... Google führt zur Zeit das neue Produkt "Google Kundenrezensionen" ein. Dieses neue Bewertungssystem ersetzt schrittweise das bereits existierende Produkt "Google Zertifizierte Händler". Neben bestimmten Vorzügen wurden vor allem die strengen Richtlin...
AMP – Accelerated Mobile Pages für WordPress... Nachdem Google vor einiger Zeit das AMP Projekt angekündigt hat, wurde die Software nun für die Öffentlichkeit zur Verfügung gestellt. Durch die Nutzung dieses Frameworks sollen Seiteninhalte schneller und für mobile Geräte optimiert ausgeliefert we...
0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.