loading . . . Mentions United: Native Mastodon Provider <p>When I started Mentions United to collect and display the interactions of syndication from the various Fediverse platforms on my static blog, I initially focused on my needs with regard to the range of functions… see also <a href="https://kiko.io/post/Mentions-United-3-2-1-go/"><strong>Mentions United… 3, 2, 1, Go</strong></a>.</p>
<p>At the top of the list were, of course, <strong>Webmentions</strong>, closely followed by <strong>Mastodon</strong> and the classic non-Fediverse platforms such as Flickr, where I syndicate my photos, among other things. I was able to cover this group of platforms completely with the Webmentions provider plugin, because thanks to <a href="https://brid.gy]">brid.gy</a> and <a href="https://webmention.io/" rel="noopener" target="_blank">webmention.io</a>, their interactions are also converted into Webmentions.</p>
<p><img alt="Provider Webmention" src="https://kiko.io/post/Mentions-United-Native-Mastodon-Provider/Provider-webmention.png"/></p>
<span id="more"></span>
<p>The first native plugin was <strong>Pixelfed</strong>, which could so far not be connected to brid.gy due to incompatibilities, and a little later one for <strong>Lemmy</strong>.</p>
<p>Now, not everyone wants to go through the detour via Webmentions to connect to Mastodon, so I have now added a native provider plugin for Mastodon to the project:</p>
<p><img alt="Provider Mastodon" src="https://kiko.io/post/Mentions-United-Native-Mastodon-Provider/Provider-mastodon.png"/></p>
<p>Using the plugin on your own page is just as “simple” as the others. After including the main script and the required plugins (for example, the renderer LIST) in the HTML …</p>
<pre><code class="highlight html"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/mentions-united.js"</span>></span><span class="tag"></<span class="name">script</span>></span>
<span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/mentions-united-provider_mastodon.js"</span>></span><span class="tag"></<span class="name">script</span>></span>
<span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/mentions-united-renderer_list.js"</span>></span><span class="tag"></<span class="name">script</span>></span></code></pre>
<p>… the main script is initialized and executed after the page has been loaded with the plugins:</p>
<pre><code class="highlight html"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span>
<span class="language-javascript"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'load'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span>
<span class="language-javascript"></span>
<span class="language-javascript"> <span class="keyword">const</span> mentionsUnited = <span class="keyword">new</span> <span class="title class_">MentionsUnited</span>({</span>
<span class="language-javascript"> <span class="attr">ownerName</span>: <span class="string">"__OWNER-NAME__"</span></span>
<span class="language-javascript"> },</span>
<span class="language-javascript"> [</span>
<span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">MentionsUnitedProvider</span>_Webmentions({</span>
<span class="language-javascript"> <span class="attr">syndicationUrl</span>: <span class="string">"__MASTODON-URL__"</span></span>
<span class="language-javascript"> }), </span>
<span class="language-javascript"> <span class="keyword">new</span> <span class="title class_">MentionsUnitedRenderer</span>_List({</span>
<span class="language-javascript"> <span class="attr">placeholderId</span>: <span class="string">"__PLACEHOLDER-ELEMENT-ID__"</span></span>
<span class="language-javascript"> })</span>
<span class="language-javascript"> ]);</span>
<span class="language-javascript"></span>
<span class="language-javascript"> mentionsUnited.<span class="title function_">load</span>()</span>
<span class="language-javascript"> .<span class="title function_">then</span>(<span class="function">() =></span> {</span>
<span class="language-javascript"> <span class="keyword">return</span> mentionsUnited.<span class="title function_">show</span>();</span>
<span class="language-javascript"> })</span>
<span class="language-javascript"> .<span class="title function_">then</span>(<span class="function">(<span class="params">count</span>) =></span> {</span>
<span class="language-javascript"> <span class="comment">// do something final... </span></span>
<span class="language-javascript"> });</span>
<span class="language-javascript"></span>
<span class="language-javascript">}</span>
<span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></code></pre>
<p>In the example, only the <code>__VARIABLES__</code> need to be replaced and the Mastodon interactions appear on the page. A little CSS for the HTML generated by the renderer, which replaces an existing placeholder element… and that’s it.</p>
<p>The new Mastodon provider plugin has a few optional options in addition to the <code>syndicationUrl</code>, which is the full URL to the Mastodon post, as documented in the <a href="https://github.com/kristofzerbe/Mentions-United?tab=readme-ov-file#mastodon" rel="noopener" target="_blank">section on the GitHub page</a>.</p>
<hr/>
<h2 id="Webmentions-versus-Mastodon-Provider"><a class="headerlink" href="https://kiko.io/post/Mentions-United-Native-Mastodon-Provider/#Webmentions-versus-Mastodon-Provider" title="Webmentions versus Mastodon Provider"></a>Webmentions versus Mastodon Provider</h2><p>With the use of the new Mastodon provider, it is theoretically possible to download and display the interactions of the platform twice if, like me, you have connected Mastodon via webmention.io. Therefore, the existing Webmentions provider plugin has a new option called <code>skipOrigins</code>, which can be used, for example, to filter out all <code>mastodon</code> interactions before processing.</p>
<p>I will continue to pull Mastodon interactions onto my site via Webmentions, because this has the advantage of not only pulling interactions that are directly attached to the syndication URL, but also mentions of the post URL in other Mastodon posts that brid.gy collects for me.</p>
<hr/>
<h2 id="Project-Status-January-2025"><a class="headerlink" href="https://kiko.io/post/Mentions-United-Native-Mastodon-Provider/#Project-Status-January-2025" title="Project Status January 2025"></a>Project Status January 2025</h2><p><img alt="Provider Overview" src="https://kiko.io/post/Mentions-United-Native-Mastodon-Provider/Provider-Overview.png"/></p>
<p>The project now includes a total of <strong>5 providers</strong> plugins that retrieve the data and <strong>5 renderer</strong> plugins that convert the data into HTML. Of course, I would like to see Mentions United eventually cover all possible Fediverse platforms, but to do that I need your help. I am neither present on all platforms nor do I have the time to implement them all. So if you would like to help connect another provider or have your own idea for a visualization in the form of a new renderer… you are welcome to join.</p> https://kiko.io/post/Mentions-United-Native-Mastodon-Provider/