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:
- Ein Beitrag soll über soziale Medien an Plattformen (Facebook, Twitter, etc.) geteilt werden.
- 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.
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.
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.
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.
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.
Alexander Graf ( )
Toller Beitrag. Mal schauen ob dieser Kommentar nun auch in deinem Blog erscheint….
Dennis Kallerhoff ( )
Check, guckst du hier: https://blog.kallerhoff.org/2016/05/30/wordpress-mehr-kommentare-blog-mit-webmentions/ – inkl. Link auf FB-Profile. Finde die Technik echt super. Vielleicht auch für Kassenzone interessant – v.a. für die ganzen Twitter-Kommentare und Retweets. Da kommt ja einiges zusammen.
Alexander Graf ( )
cool in der tat. Florian Hermsdorf schaut sich das mal an
Florian Hermsdorf ( )
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?
Julian ( )
Schöne Sache, leider sehr umständlich da andere Services genutzt werden müssen und und man sich anmelden muss
Dennis Kallerhoff ( )
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.
Dennis Kallerhoff ( )
Habt ihr den lokal gehosteten Blog via Jetpack mit WordPress.com verbunden? Oder eine alte Version von Jetpack? Link: https://wordpress.org/support/topic/jetpack-oauth-authorization-failing
Florian Hermsdorf ( )
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… :-/
Dennis Kallerhoff ( )
Florian Hermsdorf Cool. Klingt doch schon mal gut. Glaube auch, dass das mit Abstand der aufwändigste Teil ist. Leider gibt es auch noch nicht so viele WordPress-Templates, die eine Implementierung unterstützen. Dort könnte man sonst schauen. Kann dir höchstens mein Templates empfehlen. Hier der Source-Code: https://github.com/raamdev/independent-publisher/
alex ( )
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
Dennis Kallerhoff ( )
Hallo Alex, danke für das Lob. Das mit dem Code ist leider nicht pauschal möglich. Es kommt auf das WordPress-Template an. Als Beispiel kann ich Dir den Source Code meines Themes empfehlen: https://github.com/raamdev/independent-publisher/. Hoffe das hilft.
fxhakan ( )
Coole Sache! Habe ich gleich auf meiner Seite eingebaut.
Danke für Deine leichte durchführbare Anleitung!
Alexander Graf ( )
Alexander Graf hat diesen Artikel auf twitter.com geteilt.
Andreas Haack ( )
Andreas Haack hat diesen Artikel auf facebook.com geliked.
Torsten Bøgh Köster ( )
Torsten Bøgh Köster hat diesen Artikel auf twitter.com geliked.
Alexander Graf ( )
Alexander Graf hat diesen Artikel auf facebook.com geliked.
Lutz ( )
Lutz hat diesen Artikel auf twitter.com geliked.
Dina Lewicki ( )
Dina Lewicki hat diesen Artikel auf twitter.com geliked.
Michael Döhler ( )
Michael Döhler hat diesen Artikel auf twitter.com geteilt.
fxhakan ( )
fxhakan hat diesen Artikel auf fxhakan.info erwähnt.