webmention

Webmention Test

Diese Seite war eigentlich nur ein Test aber jetzt habe ich es doch mit etwas Text versehen und hoffentlich verständlicher gemacht.
Ich schreibe gerade einen neuen Artikel im Novatrend Blog über Webmentions (Was ist eine Webmention und wie nutze ich sie in WordPress? – wird am 7.2.2022 veröffentlicht)✅. Wenn ihr den lest, versteht ihr das alles viel besser. Und wenn ihr Lust habt, könnt ihr beim Cloudfest Hackathon vom 19-21.3.2022 mit Matthias Pfefferle, dem Autor des Webmention Plugins gemeinsam an der Weiterentwicklung des Plugins arbeiten (Ich bin auch dabei und freu mich schon drauf :)).

Um das Prinzip der Webmentions auszuprobieren, erwähne ich auf meinem Blog (also hier und jetzt) einen Post aus dem Novatrend Blog, nämlich diesen hier:
https://blog.novatrend.ch/2022/01/10/hello-dolly-oder-wie-schreibe-ich-ein-wordpress-plugin/

Wenn ich den Post hier auf meinem Blog speichere, erhält die andere Seite eine Nachricht (über das Webmention Plugin).

Auf der anderen Seite (im Novatrend Blog) entsteht durch die “Erwähnung” ein WordPress Kommentar.

Kommentarfreigabe im Novatrend Blog

Es ist aber semantisch nicht wirklich ein Kommentar, sondern eben nur eine Erwähnung (Webmention) auf einem anderen Blog und deshalb wird einfach unter der Überschrift Erwähnungen entweder ein Link oder ein Avatar angezeigt (Je nach Einstellungen im Webmention Plugin).

Erwähnung als Link
Erwähnung als verlinkte Avatar

Ha, funktioniert :)


Posted

in

,

by

Comments

41 responses to “Webmention Test”

  1. Hello Dolly oder wie schreibe ich ein WordPress Plugin? Avatar

    Wenn du jemals WordPress installiert hast, so bist du sicherlich auch schon einmal über das Hello Dolly Plugin „gestolpert“. Seit dem Jahr 2012 und der WordPress Version 2.7.1 wird das Hello Dolly Plugin standardmässig in jedem neuen WordPress installiert. Es zeigt nach der Aktivierung im Zufallsprinzip rechts im Administrationsbereich Textzeilen aus dem Liedtext von „Hello, Dolly“ an.

    Das sieht dann so aus:

    Textzeile aus Hello Dolly im Dashboard

    Textzeile aus Hello Dolly im Dashboard

    Nun stellt sich natürlich die Frage … Warum?

    Einerseits sicherlich um die Freude der Core Entwickler an der Musik zu dokumentieren denn jede Major WordPress Version wird nach einem Jazz Musiker benannt.

    Andererseits ist Hello Dolly auch ein gutes Beispiel, wie einfach es ist ein WordPress Plugin zu schreiben.

    Hello Dolly Plugin

    Das Plugin besteht aus einer PHP-Datei mit den PHP-Anweisungen (hello.php), einer Text-Datei (readme.txt) mit Beschreibungen und, je nach installierter Sprache, den Übersetzungsdateien hello-dolly-de_DE.mo und hello-dolly-de_DE.mo.

    Das ist der Inhalt der Text-Datei (readme.txt):

    === Hello Dolly ===
    Contributors: matt, wordpressdotorg
    Stable tag: 1.7.2
    Tested up to: 5.8
    Requires at least: 4.6

    This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong.

    == Description ==

    This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.

    Thanks to Sanjib Ahmad for the artwork.

    Die beiden Dateien (hello.php und readme.txt) liegen in einem Verzeichnis /wp-content/plugins/hello-dolly um sie von den Dateien der anderen Plugins abzugrenzen. Alle Plugins befinden sich im Unterverzeichnis /wp-content/plugins.

    Hello Dolly Plugin im Datei-Manager

    Die beiden Sprachdateien befinden sich im Unterverzeichnis /wp-content/languages, sind aber für das Funktionieren des Plugins zunächst nicht notwendig. Sie werden erst interessant wenn die englischen Texte, die im Quellcode benutzt werden, in eine andere Sprache übersetzt werden sollen. Auch die readme.txt Datei dient nur der besseren Übersicht für Entwickler:innen und hat keinen Einfluss auf den eigentlichen Programmcode. Entscheidend für die Funktion ist die PHP-Datei hello.php. Sie ist 100 Zeilen lang. Alle Texte innerhalb des Quellcodes werden in englischer Sprache erstellt.

    Der nächste Screenshot stammt aus dem Dateimanager unseres Verwaltungstools cPanel und zeigt die PHP-Funktionen in hello.php.

    hello.php mit eingeklappten Codebereichen

    Der rot hinterlegte PHP-Befehl function definiert eine neue Funktion, in unserem Fall hello_dolly_get_lyric(), hello_dolly() und dolly_css(). Die Bezeichnungen deuten schon auf die Aufgabe der Funktionen hin:

    hello_dolly_get_lyric() – Hole eine Textzeile aus der Menge aller Textzeilenhello_dolly() – schreibe die gewählte Textzeile ins Dashboarddolly_css() – Ein wenig CSS zur Positionierung

    Die Funktion add_action ist im WordPress Core enthalten und wird in Plugins verwendet um „etwas“ zum existierenden WordPress hinzuzufügen. In unserem Fall nutzen wir die Parameter admin_notices um eine Nachricht in den Adminbereich (Dashboard) zu schicken und admin_head um das gewünschte CSS an die richtige Stelle zu bekommen. Es gibt zahlreiche add_action Parameter und es ist wichtig, bzw. wirklich sehr hilfreich, zu erforschen welche Parameter zur Verfügung stehen. Ausser der Funktion add_action gibt es hunderte weiterer Funktionen, die du „einfach so“ in deinem Plugin benutzen kannst. Ein WordPress Plugin nutzt im Idealfall sehr viele dieser WordPress Core Funktionen. Sie sind millionenfach erprobt und meistens immer sicherer als eigener Code.

    Du kannst die Anweisungen im Hello Dolly verändern, musst aber beachten, dass deine Änderungen bei einem evtl. Update überschrieben werden. Daher ist es eine gute Idee, das Plugin zu kopieren, umzubenennen und dann eigene Änderungen einzubauen.

    Als Beispiel sei hier das Hello Dalai Plugin genannt, das Zitate vom Dalai Lama anzeigt oder das Hello Force Plugin, dass Zitate aus Star Wars anzeigt.

    Fazit

    Das Hello Dolly Programm ist eine Art Hello World Programm für WordPress. Der Quellcode ist ausführlich kommentiert und es ist ein guter Start um die Funktionsweise von Plugins besser zu verstehen und eigene Programmierversuche zu starten.

    Link

    Auf WordPress.org findet sich das Plugin Developer Handbook. Es ist der perfekte Start!

    Welcome to the WordPress Plugin Developer Handbook; are you ready to jump right in to the world of WordPress plugins?https://developer.wordpress.org/plugins/

    tl;dr: Hello Dolly ist oft der Beginn einer interessanten Reise durch die WordPress Welt

  2. Was ist eine Webmention und wie nutze ich sie in WordPress? Avatar

    Gerade im World Wide Web ist die Verlinkung von Inhalten eines der stärksten Features. Auch heute noch ist bei Suchmaschinen die Menge an Links, die auf eine Website zeigen einer der wichtigsten Parameter, der darüber Auskunft gibt, wie beliebt diese Website ist.

    Wenn du einen Link auf eine andere Website setzt, erfährt die andere Seite, also da, wo der Link hinführt, leider im Normalfall nichts davon.

    Das W3C hat sich der Sache angenommen und im Jahr 2017 ein Protokoll, namens Webmention erstellt. Webmention ist eine Möglichkeit, jede URL automatisch zu benachrichtigen, wenn ein Link zu ihr auf einer Website gesetzt ist. Aus der Sicht der empfangenden Website ist es eine Möglichkeit, eine Benachrichtigung zu erhalten, wenn andere Websites auf sie verlinken.

    Klingt kompliziert, ist aber ganz einfach, sehr praktisch und wird in Social Media Systemen gern genutzt. In vielen Kurznachrichten- und Messenger-Systemen gibt es die Möglichkeit dem Namen einer Person das @-Zeichen voranzustellen und damit die Person zu „erwähnen“ (erwähnen = engl. to mention). Die erwähnte Person erhält dann einen Hinweis im entsprechenden System, dass deren Name erwähnt wurde und einen Link um sie die „Erwähnung“ anzusehen.

    So eine „Mention“ ist also eine Benachrichtigung, wenn ein bestimmtes Ereignis eintritt. Eine „Webmention“ bezieht sich dann genauer auf Ereignisse im World Wide Web, wie beispielsweise das Erwähnen einer URL (Link), eine Aktualisierung eines Inhalts oder auch ein „Like“.

    Das WordPress Webmention Plugin von Matthias Pfefferle bietet die Basis für diese Funktionalität.

    Um mit Webmentions arbeiten zu können, braucht es mindestens einen Sender und einen Empfänger. Beide müssen das Webmention-Protokoll verstehen.

    Du benötigst die Funktionalität also in deiner eigenen WordPress Installation und die empfangende Seite in ihrem System. Das kann ein beliebiges System sein, das mit dem Webmention Protokoll umgehen kann, muss also nicht unbedingt WordPress sein.

    Auf deiner Site musst du das Webmention und das Semantic-Linkbacks Plugin installieren und aktivieren.

    Webmention

    Webmention

    Semantic-Linkbacks

    Semantic-LinkbacksOb nach der Aktivierung alles funktioniert, kannst du ganz einfach erkennen. Schreibe einen Blog Post mit einem Link und schaue im Quelltext, ob der Link als Webmention erwähnt wird.

    <link rel=”webmention” href=”https://hagen.cocoate.com/wp-json/webmention/1.0/endpoint”>
    <link rel=”http://webmention.org/” href=”https://hagen.cocoate.com/wp-json/webmention/1.0/endpoint”>

    Test-Post ob das Plugin funktioniertUnd wie funktioniert das?

    Die gute Nachricht ist: es funktioniert automatisch 🙂

    Am Einfachsten geht es vielleicht mit einem Beispiel: Auf meinem privaten Blog habe ich in diesem Blog Post (https://hagen.cocoate.com/2022/01/21/webmention-test/) auf einen Post des Novatrend Blogs verlinkt (https://blog.novatrend.ch/2022/01/10/hello-dolly-oder-wie-schreibe-ich-ein-wordpress-plugin/).

    Wenn ich den Post auf meinem Blog speichere, erhält das Novatrend Blog eine Benachrichtigung (über das Webmention Plugin, das auch auf dem Novatrend Blog installiert ist). Durch die “Erwähnung” entsteht im empfangenden Novatrend Blog ein WordPress Kommentar.

    Kommentarfreigabe im Novatrend BlogDer Kommentar ist semantisch natürlich kein Kommentar, sondern eine Erwähnung (Webmention) auf einem anderen Blog und deshalb wird nach der Freigabe des Kommentars einfach unter der Überschrift Erwähnungen entweder ein Link oder ein Avatar angezeigt (je nach Einstellung im Webmention Plugin).

    Damit sind jetzt beide Seiten verlinkt und ein Besucher kann sich selbst ein Bild von den Erwähnungen machen. Das ist, verglichen mit einem Suchmaschinen-Ergebnis ein erheblicher Vorteil für den Besucher der Site.

    Erwähnung unter dem Blog Post als LinkErwähnung unter dem Blogpost als verlinkte AvatarHier kannst du es live sehen (https://blog.novatrend.ch/2022/01/10/hello-dolly-oder-wie-schreibe-ich-ein-wordpress-plugin/)

    Fazit

    Aus diesem einfachen Prinzip können sehr interessante Anwendungen durch Vernetzung entstehen. Ich denke da an Timelines, Nachrichten-Threads und ähnliches.

    War vorher die Verlinkung nur in eine Richtung, so ist sie mit dem Webmention Plugin in beide Richtungen. Die verlinkte Website/Person erfährt automatisch von allen Verlinkungen und kann problemlos mit der anderen Seite Kontaktaufnehmen.

    tl;dr: Das Webmention Protokoll beschreibt den Umgang mit Erwähnungen im World Wide Web

  3. ClaudiaBerlin Avatar

    Und was ist da jetzt der Unterschied zum immer schon vorhandenen Pingback / Trackback-System?

    1. hagengraf Avatar

      Webmention ist mittlerweile W3C Standard https://www.w3.org/TR/webmention/ und wird im Indieweb (https://indieweb.org/Webmention) und im Fediverse verwendet

  4. WordPress Bot Avatar

    This is a webmention test:
    1. In this tweet I link to an older article on my blog
    hagen.cocoate.com/2022/01/21/web…
    2. My blog (#WordPress) should be notified via #webmention about reactions to this tweet – so please like, retweet & reply to this tweet🙏
    #cfhack #CFHACK2022 #indieweb

  5. Matthias Pfefferle Avatar

    This is a webmention test:
    1. In this tweet I link to an older article on my blog
    hagen.cocoate.com/2022/01/21/web…
    2. My blog (#WordPress) should be notified via #webmention about reactions to this tweet – so please like, retweet & reply to this tweet🙏
    #cfhack #CFHACK2022 #indieweb

  6. Matthias Pfefferle Avatar

    This Article was mentioned on brid.gy

  7. JFSebastian146 Avatar

    This is a webmention test:
    1. In this tweet I link to an older article on my blog
    hagen.cocoate.com/2022/01/21/web…
    2. My blog (#WordPress) should be notified via #webmention about reactions to this tweet – so please like, retweet & reply to this tweet🙏
    #cfhack #CFHACK2022 #indieweb

  8. Eric Eggert Avatar

    This Article was mentioned on brid.gy

  9. Kevin Marks Avatar

    This Article was mentioned on brid.gy

  10. hagengraf Avatar

    it works 🙌🤩🥳🤗
    Retweets and likes arrived as comments in my blog. After approval they appear under the article 😎

    #CFHACK2022 #cfhack #indieweb
    /cc @pfefferle @JasonRouet @nxD4n @kevinmarks @yatil @JFSebastian146 @cloudfest

  11. Grand Moff Darth Salt Avatar

    This Article was mentioned on brid.gy

  12. Lucas Radke Avatar

    This Article was mentioned on brid.gy

  13. Daniel Nix Avatar

    This Article was mentioned on brid.gy

  14. Dominik Schwind Avatar

    This Article was mentioned on brid.gy

  15. Bokelj Avatar

    This Article was mentioned on brid.gy

  16. Jason Rouet 🍋 Avatar

    This Article was mentioned on brid.gy

  17. hagengraf Avatar

    Now #UX
    We want to change the existing settings page of #webmention #WordPress plugin (left).
    Carolina and @JasonRouet are working on that (right)

    #CFHACK2022 #cfhack

  18. Chris M. Avatar

    This Article was mentioned on brid.gy

  19. @Bahnhofsoma@fimidi.com Avatar

    This is a webmention test:
    1. In this tweet I link to an older article on my blog
    hagen.cocoate.com/2022/01/21/web…
    2. My blog (#WordPress) should be notified via #webmention about reactions to this tweet – so please like, retweet & reply to this tweet🙏
    #cfhack #CFHACK2022 #indieweb

  20. @Bahnhofsoma@fimidi.com Avatar

    This Article was mentioned on brid.gy

  21. Kai Kretschmann Avatar

    This Article was mentioned on brid.gy

  22. JFSebastian146 Avatar

    ever heard of reactjis ?
    On the magical #indieweb it is possible to collect f.e. emoji replies from #twitter in YOUR blog under your post
    #Twitter -> #WordPress (hagen.cocoate.com/2022/01/21/web…)

    #cfhack #cfhack2022 #webmention #reactjis #indieweb

  23. Matthias Pfefferle Avatar

    This Article was mentioned on brid.gy

  24. cocoate Avatar

    This is a webmention test:
    1. In this tweet I link to an older article on my blog
    hagen.cocoate.com/2022/01/21/web…
    2. My blog (#WordPress) should be notified via #webmention about reactions to this tweet – so please like, retweet & reply to this tweet🙏
    #cfhack #CFHACK2022 #indieweb

  25. virtualapero Avatar

    This Article was mentioned on brid.gy

  26. cocoate Avatar

    This Article was mentioned on brid.gy

  27. Jason Rouet 🍋 Avatar

    ever heard of reactjis ?
    On the magical #indieweb it is possible to collect f.e. emoji replies from #twitter in YOUR blog under your post
    #Twitter -> #WordPress (hagen.cocoate.com/2022/01/21/web…)

    #cfhack #cfhack2022 #webmention #reactjis #indieweb

  28. Jason Rouet 🍋 Avatar

    This Article was mentioned on brid.gy

  29. Ricardo Avatar

    ever heard of reactjis ?
    On the magical #indieweb it is possible to collect f.e. emoji replies from #twitter in YOUR blog under your post
    #Twitter -> #WordPress (hagen.cocoate.com/2022/01/21/web…)

    #cfhack #cfhack2022 #webmention #reactjis #indieweb

  30. Alain Schlesser Avatar

    This Article was mentioned on brid.gy

  31. Ein kostenloses Social Media Feedback Tool mit Bridgy, Webmention und WordPress Avatar

    Wer ein WordPress Blog betreibt und regelmäßig Artikel erstellt, ist durchaus an Feedback zum eigenen Artikel interessiert. Um Feedback zu erhalten, gibt es in einem WordPress-Blog die Möglichkeit Kommentare zu schreiben. Die Kommentare werden unter dem Artikel angezeigt und es können sich Diskussionen ergeben. Immer häufiger wird jedoch der Link zum Artikel in einer Social Media Plattform geteilt und die Diskussion findet dort statt. Für die Ersteller:in des Artikels wäre es hilfreich zu wissen, welche User:in den Artikel auf welchem Social Network geteilt oder geliked hat. Genau dieses Feedback liefert eine Kombination aus WordPress, dem Webmention Plugin und dem freien Service Bridgy.

    WordPress

    Du benötigst eine WordPress Installation mit mindestens einem Artikel (oder einer Seite).

    Webmention Plugin

    Du musst das Webmention Plugin installieren und aktivieren.

    Webmention

    Über das Webmention Plugin habe ich bereits einen Artikel geschrieben der die Idee dahinter beschreibt, Stichwort Indieweb. Falls du Webmentions noch nicht kennst, einfach lesen und wiederkommen 🙂 (22.07.2022 – Was ist eine Webmention und wie nutze ich sie in WordPress).

    Bridgy Service nutzen

    Der Bridgy Service sucht in sozialen Netzwerken regelmäßig nach Erwähnungen deiner Artikel und Links und sendet diese als Webmentions an deine Website, in unserem Fall WordPress, zurück. Bridgy übersetzt die Antworten auch in Mikroformate, so dass dein WordPress sie abrufen und auswerten kann.

    Bridgy auch kann auch Artikel, Kommentare, Likes und Retweets von deiner Website in sozialen Netzwerken veröffentlichen.

    Momentan unterstützt Bridgy die sozialen Netzwerke Twitter, Facebook, Instagram, Flickr, Github, Mastodon und Reddit.

    Bridgy ist quelloffen, in Python geschrieben und läuft auf der Google App Engine.

    Wenn du Bridgy nutzen willst, benötigst du für jedes der sozialen Netzwerke, die du abfragen willst, einen Account. Jeder dieser Accounts wird per OAuth mit Bridgy verbunden und ermöglicht die Feedback-Funktion.

    Eine ausführliche Beschreibung von Bridgy mit Fragen und Antworten findest du auf dieser Seite https://brid.gy/about.

    Im Fall des Novatrend Blogs ist unser Twitter Account @novatrend_ch mit Bridgy verbunden. In der Übersichtsseite von Bridgy werden alle Nachrichten, die Bridgy bemerkt, aufgelistet.

    Auf unserem Twitter-Account posten wir Links zum eigenen Blog und zu anderen Sites. Reaktionen auf Links zum Novatrend Blog werden im Screenshot mit dem Wort Sent markiert. Viele Reaktionen werden nicht gesendet, da die entsprechende Website Webmentions nicht unterstützt.

    Nochmal deutlicher: Wir posten beispielsweise einen Link auf Twitter zu einer Website, weil wir den Inhalt gut finden. Andere Twitter User:innen reagieren darauf. Wenn die Betreiberin der Website, die wir erwähnen, Webmentions nutzen würde, würde sie über die Erwähnung und die Reaktionen benachrichtigt werden. Nutzt sie Webmention nicht, wird sie natürlich nicht benachrichtigt. Wenn alle WordPress Websites Webmention nutzen würden, wäre das ein atemberaubendes Feature. Auch andere Websites wie Joomla und Drupal könnten Webmention nutzen, es müsste nur implementiert werden.

    Wie sieht das ganz konkret aus?

    Hier ein Beispiel eines „typischen“ Novatrend Tweets.

    Aus unserem Blog: Was ist eine Webmention und wie nutze ich sie in WordPress? – NOVATREND Blog https://t.co/fq1Dnt2YBP ^hg pic.twitter.com/CnskUKJtx5— NOVATREND (@novatrend_ch) April 4, 2022

    https://twitter.com/novatrend_ch/status/1510874906896084994

    Diesen Tweet haben zwei Twitter-User geliked. Ausserdem wurde der Link „retweeted/reposted“ und in anderen Websites erwähnt, beispielsweise hier (https://wpletter.de/archive/325/).

    Unter dem Artikel im Novatrend-Blog werden diese Reaktionen automatisch gesammelt und angezeigt. Wir erhalten dadurch Feedback zu unserem Artikel und können uns an Diskussionen, die in anderen Social Networks stattfinden, beteiligen.

    Das kannst du auch – wenn du das willst :).

    Feedback zum Artikel https://blog.novatrend.ch/2022/02/07/was-ist-eine-webmention-und-wie-nutze-ich-sie-in-wordpress/

    Und was ist ein Reactji?

    Beim Ausprobieren findet man ja immer wieder interessante Funktionen. Wenn man beispielsweise als Antwort auf einen Tweet ein Emoji postet, so erscheint das Emoji auf dem Avatarbild als Webmention vom Typ „Reactji“.

    Reactjis in diesem Post https://hagen.cocoate.com/2022/01/21/webmention-test/#comment-9347

    Fazit

    Anfangs erschien mir das Webmention-Konzept als eine nette Spielerei. Mittlerweile bin ich bekennender Fan geworden und versuche dieses Indieweb-Konzept konsequent umzusetzen.

    Links

    https://brid.gy/https://de.wordpress.org/plugins/webmention/https://indieweb.org/why

    tl;dr: Mit Webmentions kannst du Reaktionen in Social Networks und auf anderen Websites bemerken, sammeln und unter deinem Artikel anzeigen

Leave a Reply

Leave a Reply