Das ich ein absoluter Fan des Fediverse bin, ist kein Geheimnis. Ich habe ja schon öfters Beiträge übers Fediverse veröffentlicht.
Ich habe vor ziemlich genau 1 Jahr einen Beitrag geschrieben: "ActivityPub Plugin für WordPress jetzt mit genialer Funktion – sichtbare Reaktionen in Beiträge". Leider musste ich da zugeben, dass ich den Shortcode vergessen habe – ja, ziemlich peinlich von mir.
Heute aber kann ich euch diesen Shortcode zeigen.
Also wenn ihr schon das ActivityPub Plugin hier in WordPress verwendet, dann wisst ihr, dass damit eure Blogbeiträge ins Fediverse geteilt werden.
Jetzt gibt es einen Artikel (den ich lange nicht gefunden habe), der gut erklärt, wie man die Reaktionen aus dem Fediverse in WordPress einbindet. Das Problem ist aber, das wird schon für Gutenberg erklärt und nicht für die anderen Nicht-Block-Themes.
Wer Gutenberg verwendet findet hier die Anleitung: https://github.com/Automattic/wordpress-activitypub/blob/trunk/docs/how-to/classic-theme-blocks.md
Wenn ihr also nicht Gutenberg verwendet, dann müsst ihr einen einfachen Shortcode verwenden.
function ap_reactions_shortcode() {
if ( ! function_exists( 'do_blocks' ) ) {
return '';
}
return do_blocks( '<span hidden class="__iawmlf-post-loop-links" data-iawmlf-links="[{"id":2625,"href":"https:\/\/github.com\/Automattic\/wordpress-activitypub\/blob\/trunk\/docs\/how-to\/classic-theme-blocks.md","archived_href":"http:\/\/web-wp.archive.org\/web\/20260207073523\/https:\/\/github.com\/Automattic\/wordpress-activitypub\/blob\/trunk\/docs\/how-to\/classic-theme-blocks.md","redirect_href":"","checks":[{"date":"2026-06-17 08:25:38","http_code":206}],"broken":false,"last_checked":{"date":"2026-06-17 08:25:38","http_code":206},"process":"done"}]"></span><div class="is-style-facepile wp-block-activitypub-reactions" id="activitypub-reactions-block-1" data-wp-interactive="activitypub/reactions" data-wp-context="{"blockId":"activitypub-reactions-block-1","modal":{"isCompact":true,"isOpen":false,"items":[],"title":""},"postId":22471,"reactions":{"repost":{"label":"1 Repost","count":1,"items":[{"name":"emaechler","url":"https:\/\/masto.maechler.cloud\/@emaechler","avatar":"https:\/\/www.chefblogger.me\/wp-content\/plugins\/activitypub\/assets\/img\/mp.jpg"}]},"like":{"label":"1 Like","count":1,"items":[{"name":"emaechler","url":"https:\/\/masto.maechler.cloud\/@emaechler","avatar":"https:\/\/www.chefblogger.me\/wp-content\/plugins\/activitypub\/assets\/img\/mp.jpg"}]},"quote":{"label":"1 Zitat","count":1,"items":[{"name":"emaechler","url":"https:\/\/masto.maechler.cloud\/@emaechler","avatar":"https:\/\/www.chefblogger.me\/wp-content\/plugins\/activitypub\/assets\/img\/mp.jpg"}]}}}" data-wp-init="callbacks.initReactions">
<h6 class="wp-block-heading">Fediverse-Reaktionen</h6> <div class="activitypub-reactions">
<div class="reaction-group" data-reaction-type="repost">
<ul class="reaction-avatars">
<template data-wp-each="context.reactions.repost.items">
<li>
<a
data-wp-bind--href="context.item.url"
data-wp-bind--title="context.item.name"
target="_blank"
rel="noopener noreferrer"
>
<img
data-wp-bind--src="context.item.avatar"
data-wp-bind--alt="context.item.name"
data-wp-on--error="callbacks.setDefaultAvatar"
class="reaction-avatar"
height="32"
width="32"
src=""
alt=""
/>
</a>
</li>
</template>
<li data-wp-each-child="activitypub/reactions::context.reactions.repost.items">
<a href="https://masto.maechler.cloud/@emaechler" title="emaechler"
data-wp-bind--href="context.item.url"
data-wp-bind--title="context.item.name"
target="_blank"
rel="noopener noreferrer"
>
<img
data-wp-bind--src="context.item.avatar"
data-wp-bind--alt="context.item.name"
data-wp-on--error="callbacks.setDefaultAvatar"
class="reaction-avatar"
height="32"
width="32"
src="https://www.chefblogger.me/wp-content/plugins/activitypub/assets/img/mp.jpg"
alt="emaechler"
/>
</a>
</li>
</ul>
<button
class="reaction-label has-text-color has-background"
data-reaction-type="repost"
data-wp-on--click="actions.toggleModal"
type="button"
aria-label="Alle Reposts anzeigen"
>
1 Repost </button>
</div>
<div class="reaction-group" data-reaction-type="like">
<ul class="reaction-avatars">
<template data-wp-each="context.reactions.like.items">
<li>
<a
data-wp-bind--href="context.item.url"
data-wp-bind--title="context.item.name"
target="_blank"
rel="noopener noreferrer"
>
<img
data-wp-bind--src="context.item.avatar"
data-wp-bind--alt="context.item.name"
data-wp-on--error="callbacks.setDefaultAvatar"
class="reaction-avatar"
height="32"
width="32"
src=""
alt=""
/>
</a>
</li>
</template>
<li data-wp-each-child="activitypub/reactions::context.reactions.like.items">
<a href="https://masto.maechler.cloud/@emaechler" title="emaechler"
data-wp-bind--href="context.item.url"
data-wp-bind--title="context.item.name"
target="_blank"
rel="noopener noreferrer"
>
<img
data-wp-bind--src="context.item.avatar"
data-wp-bind--alt="context.item.name"
data-wp-on--error="callbacks.setDefaultAvatar"
class="reaction-avatar"
height="32"
width="32"
src="https://www.chefblogger.me/wp-content/plugins/activitypub/assets/img/mp.jpg"
alt="emaechler"
/>
</a>
</li>
</ul>
<button
class="reaction-label has-text-color has-background"
data-reaction-type="like"
data-wp-on--click="actions.toggleModal"
type="button"
aria-label="Alle Likes anzeigen"
>
1 Like </button>
</div>
<div class="reaction-group" data-reaction-type="quote">
<ul class="reaction-avatars">
<template data-wp-each="context.reactions.quote.items">
<li>
<a
data-wp-bind--href="context.item.url"
data-wp-bind--title="context.item.name"
target="_blank"
rel="noopener noreferrer"
>
<img
data-wp-bind--src="context.item.avatar"
data-wp-bind--alt="context.item.name"
data-wp-on--error="callbacks.setDefaultAvatar"
class="reaction-avatar"
height="32"
width="32"
src=""
alt=""
/>
</a>
</li>
</template>
<li data-wp-each-child="activitypub/reactions::context.reactions.quote.items">
<a href="https://masto.maechler.cloud/@emaechler" title="emaechler"
data-wp-bind--href="context.item.url"
data-wp-bind--title="context.item.name"
target="_blank"
rel="noopener noreferrer"
>
<img
data-wp-bind--src="context.item.avatar"
data-wp-bind--alt="context.item.name"
data-wp-on--error="callbacks.setDefaultAvatar"
class="reaction-avatar"
height="32"
width="32"
src="https://www.chefblogger.me/wp-content/plugins/activitypub/assets/img/mp.jpg"
alt="emaechler"
/>
</a>
</li>
</ul>
<button
class="reaction-label has-text-color has-background"
data-reaction-type="quote"
data-wp-on--click="actions.toggleModal"
type="button"
aria-label="Alle Zitate anzeigen"
>
1 Zitat </button>
</div>
</div>
<div
class="activitypub-modal__overlay compact"
data-wp-bind--hidden="!context.modal.isOpen"
data-wp-watch="callbacks.handleModalEffects"
role="dialog"
aria-modal="true"
hidden
>
<div class="activitypub-modal__frame">
<div class="activitypub-modal__content">
<div data-wp-bind--hidden="!context.modal.isCompact">
<ul class="reactions-list">
<template data-wp-each="context.modal.items">
<li class="reaction-item">
<a data-wp-bind--href="context.item.url" target="_blank" rel="noopener noreferrer">
<img
alt=""
data-wp-bind--alt="context.item.name"
data-wp-bind--src="context.item.avatar"
data-wp-on--error="callbacks.setDefaultAvatar"
src=""
/>
<span class="reaction-name" data-wp-text="context.item.name"></span>
</a>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
' );
}
add_shortcode( 'activitypub_reactions', 'ap_reactions_shortcode' );Nehmt einfach diesen Code und baut ihn euch in die functions.php-Datei ein und dann könnt ihr den Code direkt in eure Beiträge mit
Fediverse-Reaktionen
In Divi habe ich das über den Theme Builder gemacht und schon sieht man, wer einen Beitrag geliked oder geteilt hat.
Nun könnt ihr diesen Code hier immer nachlesen und ich Dummerchen werde ihn auch nie wieder vergessen.
0 Kommentare