in Technology

How To: Mehr Kommentare im Blog mit WebMentions

Wer nur die Anleitung zur Implementierung von Webmentions in WordPress haben möchte, einfach nach unten scrollen.

Das Problem

Eine Sache nervt mich seit langer Zeit am Bloggen: die Zersplitterung von Diskussionen und die fehlende Möglichkeit diese wieder auf dem Blog zu aggregieren.

Mit dem Aufstieg von sozialen Medien haben sich die Diskussionen von (a) den Kommentaren auf dem Blog hier weg zu (b) den sozialen Netzwerken bewegt. Facebook, Twitter und LinkedIn sind zur meiner größten Traffic-Quelle geworden. Ob ein Blogpost auf Resonanz stößt, sehe ich nicht mehr an Kommentaren und Seitenaufrufen hier im Blog, sondern durch Feedback auf anderen Plattformen. Die harte Währung sind für mich Kommentare, Likes, Shares und Retweets auf Facebook & LinkedIn und Twitter. Nicht mehr Kommentare hier auf dem Blog.

Das Problem ist nur folgendes: für eine Person, die später auf die Seite kommt, gibt es keine Möglichkeit sich einen Überblick über den Stand der Diskussionen zu verschaffen. Das ist schade. Denn manchmal kommen durch Kommentare auf Facebook neue, interessante Facetten in eine Diskussion rein. Oder über Likes auf Twitter kann man Personen finden, die sich ebenfalls mit dem Thema des Beitrags beschäftigen.

Die Lösung

Was ich möchte ist eine zweistufige Zaubermaschine:

  1. Ein Beitrag soll über soziale Medien an Plattformen (Facebook, Twitter, etc.) geteilt werden.
  2. Reaktionen und Kommentare zu dem spezifischen Beitrag auf den anderen Plattformen sollen eingesammelt werden und auf meinem Blog (a) als Kommentare unter Angabe der Quelle und (b) als Reaktionen unter dem Blogpost angezeigt werden.

Der skizzierte Ansatz nennt sich POSSE: Publish (on your) Own Site, Syndicate Elsewhere.

Schritt 1 ist relativ einfach zu lösen und soll nicht im Fokus stehen. Ich nutze das mitgelieferte Paket von Jetpack, um Blogpost parallel zur Veröffentlichung auf dem Blog auf Facebook, Twitter und LinkedIn zu posten. Xing ziehe ich meist noch manuell nach. Dort gibt es noch keine fertige Anbindung an Jetpack (@Xing: baut das gerne mal.)

Schritt 2 ist eher tricky. Hacks wie Nutzung von Facebook Comments als Kommentar-System haben wieder eigene Nachteile (Stichwort: Indexierung von Kommentaren). Eine elegante Lösung ist mir letzte Woche über den Weg gelaufen. Es nennt sich WebMentions.

WebMentions sind Bestandteil der Indie Web Bewegung und eine Möglichkeit benachrichtigt zu werden, wenn originäre Beiträge auf anderen Seiten/Plattformen erscheinen – quasi Pingbacks on steroids.

Webmention is a simple way to notify any URL when you link to it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites link to it. Webmention is a modern update to Pingback, using only HTTP and x-www-form-urlencoded content rather than XMLRPC requests. Webmention supersedes Pingback.

Webmentions zusammen mit Semantic Linkbacks (zum hübsch Machen) und Bridgy sorgen dafür, dass Diskussionen von überall im Netz wieder zurück auf die ursprüngliche Seite gespielt werden.

Webmentions Screenshot

Implementierung

Um Webmentions für einen WordPress-Blog konkret zu implementieren, müsst ihr folgende Schritte durchlaufen:

Schritt 1: Die drei Plugins IndieWeb, WebMention und Semantic Linkbacks. Wie jedes WordPress-Plugin zu installieren unter Plugins -> Installieren -> in „Plugin suchen“ die Namen eingeben -> bei dem Plugin auf den Button „Installieren“ klicken. Nach der Installation das Plugin aktivieren. Einstellungen am Plugin können/müssen nicht vorgenommen werden.

Schritt 2: Sicherstellen, dass ein Haken unter Einstellungen -> Diskussionen -> „Erlaube Link-Benachrichtigungen von anderen Blogs (Pingbacks und Trackbacks) bei neuen Beträgen“ gesetzt ist.

Schritt 3: Anmeldung beim Webservice Bridy. Dieser kümmert sich darum (a) Posts mit Links zum ursprünglichen Blogpost auf sozialen Netzwerken zu finden, (b) die Kommentare & Likes von dort zu nehmen und (b) an einem Blogpost als Kommentare einzufügen. Das Ganze passiert automatisch über die API.

Bridgy verbinden

Zuerst Bidgy mit dem Blog verbinden. Dazu auf das WordPress-Icon klicken und sich bei wordpress.com anmelden. Danach Bidgy mit den gewünschten sozialen Netzwerken verbinden – in meinem Fall Facebook & Twitter. Auch hier authentifizieren. Ein Wort zur Sicherheit: Bei allen Anmeldungen erfolgt die Anmeldung via oAuth (o.ä), so dass die Passwörter nicht bei Bridgy gespeichert werden. Weitere Detailfragen können den FAQs von Bidgy entnommen werden.

Bridgy crawling

Nach der Anmeldung seht ihr oben Links zu den verbundenen Netzwerken. Nehmen wir das Beispiel Facebook. Regelmäßig wird Bridgy (a) erst den Blog und (b) dann Facebook abfragen/crawlen, um Beiträge auf Blog und Facebook zu matchen und Kommentare abzuholen. Zum Start kann der Vorgang auch manuell durch einen Klick auf „Poll now“ oder „Crawl now“ gestartet werden.

In WordPress steht ihr, wie nach und nach Kommentare und Likes von Facebook im WordPress-Backend auftauchen.

Schritt 4: Nun kommt der (teilweise) tricky Part. Kommentare und WebMentions müssen im WordPress Theme angezeigt werden werden. Kommentare auf Facebook und Replies auf Twitter werden als „normale“ Kommentare angezeigt. Änderungen am Templates sollten nicht notwendig sein. Webmentions müssen allerdings im Code eingebunden werden.

Glücklicherweise unterstützt mein verwendetes Theme „Independent Publisher“ Webmentions von Haus aus. (Thx @raamDev) Daher waren keine Anpassungen notwendig. In den meisten Themes werden aber Anpassungen im Code angenommen werden müssen.

Webmentions code

Wie so etwas aussehen kann, kann sich das am besten im Beispiel-Code von Independent Publisher auf github anschauen. (sucht einfach nach „webmentions“).

Ich hoffe diese Anleitung hilft Webmentions auf euren WordPress Blog zu bekommen. Ab jetzt ist mir egal, wo kommentiert wird.

Kommentar schreiben

Kommentar

12 Kommentare

  1. Ziemlich cooler Ansatz und gute Anleitung! 🙂 Leider bekomme ich allerdings beim Verbinden von WordPress mit Bridy nachdem ich „Approve“ auswähle immer eine Fehlerseite mit „Jemand könnte dich austricksen und Zugang zu deiner Webseite erlangen. Oder es könnte sein, dass du einfach einen Fehler im Plugin gefunden hast :). Egal was, schließe bitte dieses Fenster.“ Weißt Du zufällig was das Problem sein könnte?

    via facebook.com

    • Ja, das stimmt. Ist zur Zeit noch durch Brid.gy noch ein wenig sperrig.

      Könnte mir aber vorstellen, dass der WebMention-Ansatz irgendwann nach WordPress wandert – im Rahmen einer steigenden Unterstützung für Mikroformate. Für den Sync wird man wahrscheinlich eine Drittanwendung brauchen. Aber vielleicht wandert das in Jetpack.

  2. WordPress ist selbst gehostet. Habe die Jetpack-Verbindung noch mal getrennt und wiederhergestellt. Jetzt klappt’s mit der Verbindung. Allerdings müsste man nun das Template anpassen, damit er alle Mentions korrekt anzeigt. Das sieht leider etwas aufwändiger aus… :-/

    via facebook.com

  3. hallo dennis,
    tolle Anleitung. Was mir noch fehlt ganz am Ende beim Code ist der Hinweis an welcher Stelle in welcher Datei er eingefügt werden muss.
    kannst du das noch nachreichen? Viele Grüße
    Alex

Webmentions

  • fxhakan hat diesen Artikel auf fxhakan.info erwähnt.

  • Michael Döhler hat diesen Artikel auf twitter.com geteilt.

  • Dina Lewicki hat diesen Artikel auf twitter.com geliked.

  • Lutz hat diesen Artikel auf twitter.com geliked.

  • Alexander Graf hat diesen Artikel auf facebook.com geliked.

  • Torsten Bøgh Köster hat diesen Artikel auf twitter.com geliked.

  • Andreas Haack hat diesen Artikel auf facebook.com geliked.

  • Alexander Graf hat diesen Artikel auf twitter.com geteilt.

  • Leseempfehlungen

    • Intense Debate vs. Disqus Intense Debat (ID) und Disqus sind Kommentarsysteme für Blogs, z.B. Wordpress. Die Services werden via Plugin einfach eingebunden. Im Folgenden übernehmen ID und Disqus die Verwaltung der […]
    • Blog in neuem Gewand Erst einmal zu den Fakten: (a) In den letzten zwei Jahren habe ich es im Blog auf ganze 3 Beiträge gebracht - das Blog war praktisch tot, (b) ich habe keine Lust mehr mehr um die […]
    • Kommentarsystem Intense Debate im Einsatz Seit einigen Wochen habe ich das Kommentarsystem Intense Debate im Einsatz. Der Service übernimmt die komplette Verwaltung der Kommentare auf dem Blog und wird via Plugin auf der Seite […]
    • blog.kallerhoff.org in neuem Design Auch dieses Blog hat zu Weihnachten ein Geschenk bekommen: ein neues Design. Ab sofort erstrahlt mein Blog https://blog.kallerhoff.org in einem neuen, modernen Design. Im Rahmen des […]
    • Anderer Inhalt mit diesem Tag