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:

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:

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:

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:

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:

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:

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.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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