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.
Inhaltsverzeichnis
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.
inside digital
Hallo,
sind die hier beschriebenen Schritte 2020 immer noch nötig oder gibt es mittlerweile eine alternative, „einfachere“ Lösung?
LG Patrick
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
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