开发人员的🦣机会 Mastodon 嵌入示例

2025-06-08

开发者的🦣机会

Mastodon 嵌入示例

(我写这篇文章主要是为了讨论如何嵌入 Mastodon 内容,如果您感兴趣的话可以跳到那部分)

乳齿象?

目前,人们对Mastodon很感兴趣,原因如下。我从 2017 年开始断断续续地使用 Mastodon,尽管最近才开始更加认真地使用它。它是一个有趣的社交网络,与 Twitter 有一些相似之处(至少在最初的印象上),但它是开源的,而且至关重要的是,它通过ActivityPubWebFinger等成熟的技术进行联合。

你可以在@andypiper@macaw.social找到我。我最近从@andypiper@mastodon.social转到了这里,你仍然可以在原来的个人资料里找到我之前的内容。我想使用一个较小的实例,一方面是为了减轻其中一个较大且最显眼的服务器的负载/投资联邦概念,远离中心化系统,另一方面也是为了尝试在实例之间移动的能力,最后,因为我现在所在的实例是一个我认识的社群。我按照这个指南在 Mastodon 实例之间迁移。

开发者的🦣机会

尽管 Mastodon 已经有 6 年的历史了,但围绕它的API活动相对有限- 这使得现在成为参与和了解它的激动人心的时刻!

最近我重回 Mastodon 工作后,做的第一件事就是查看社区构建的一些 API 库。由于 Mastodon API 尚未正式发布规范(尽管有人在努力 构建OpenAPI规范),而且几周前发布了新版本的服务器软件,其中包含一些重要的更新,因此这项工作略显复杂。

我通常会用 Python 来做我选择的 hack,目前为止我一直在用Mastodon.py,效果不错。我列了一个GitHub 列表,里面都是我感兴趣的项目。

我的朋友Terence Eden也一直在围绕 API 构建一些有趣的工具,并发表了一系列值得一看的博客文章。

我很想了解更多有关社区围绕 API 所做的事情!

嵌入 Mastodon 内容

Twitter 价值的一大体现在于其推文拥有巨大的传播范围——无论你是否拥有 Twitter 账户,Twitter 网络默认都是公开的,而且由于嵌入 Twitter 内容非常容易,你很可能在日常生活中看到推文(例如在电视、其他网站或广告牌上)。Twitter 有一个发布者门户可以获取嵌入的推文和时间线代码,许多 CMS 平台都能够使用简单的标记嵌入 Twitter 内容——包括 DEV!

附注:我与构建 Twitter 发布工具和嵌入功能的团队合作了近 8 年,他们是(现在也是)一支非常有才华和敬业的团队💙 向那群人致敬!

就 Mastodon 的情况而言……事情并非如此简单。这部分是由于网络的性质(联合式 vs. 中心化,具有可移植性,因此如果用户移动实例,用户 ID 之类的信息可能会发生变化,就像我最近做的那样);另外,我猜,部分原因是直到最近,它才不那么流行,人们对嵌入 Toots 和时间线的兴趣也较小。

在 Glitch 上启动了一个快速演示项目,尝试了一些我发现的嵌入 Mastodon 内容的方法 - 您可以查看 Glitch 上的代码,也可以在 GitHub 上 fork 它

GitHub 徽标 andypiper / mastodon-embeds-examples

在 HTML 中嵌入 Mastodon 时间线(以及帖子/嘟文)的不同方法示例

Mastodon 嵌入示例

mastodon-嵌入示例

尝试各种方式来嵌入 Fediverse 内容 - Mastodon 帖子和时间线(以及其他内容的组合、API、按钮等)、来自 Pixelfed 的图像,以及更多内容。

Toots 很容易嵌入(Mastodon 支持 oEmbed,并且在 Web UI 上有嵌入代码选项),时间线需要做更多的工作

更多信息

我在 DEV 上写过这篇文章

有用的链接

Glitch 上的 Remix

在 Mastodon 上关注我 -> @andypiper@macaw.social




帖子/Toot 的嵌入相当简单,因为 Mastodon 支持 oEmbed,您可以直接从默认的网页界面复制粘贴代码,将 Toot 嵌入到网页的 iFrame 中。但是,Mastodon 默认不支持嵌入任何类型的时间线,因此您需要使用其他人的代码,或者自己构建一个。

快速演示(点击查看 Glitch 上的示例):

示例项目中还有一些其他的东西可供玩弄或深入研究。

就网站集成方面而言,我看到了这里的一些机会:

  • 主题方面更加定制化
  • 寻找一种简单的(?)方法将帖子嵌入 Markdown / Liquid 例如DEV
  • 可嵌入的用户配置文件小部件
  • 额外的共享选项

如果你在这个领域做过什么,请告诉我,因为我很乐意看一看并玩一玩 🙂

我对网络内容不感兴趣 - 还有什么其他内容吗?

这里为开发人员提供了更多的贡献空间!

  • 改进核心代码
  • 构建客户端和应用程序
  • 有趣的东西!可视化和探索应用程序
  • 直播主播的集成(想想所有允许发布频道链接、更改用户名或标题等的 Twitch 和相关附加组件)
  • 由 Toots 提供支持的物联网小工具(我接下来会提供更多信息...)
  • 探索 API 的工具
  • 机器人...!

关于 Mastodon 的更多信息

我还有一些自己的事要分享……

鏂囩珷鏉ユ簮锛�https://dev.to/andypiper/a-opportunity-for-developers-1ee4
PREV
我是如何利用 NPM 下载的……以及为什么不应该相信它们
NEXT
像我五岁一样解释 MVC