-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (150 loc) · 5.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<!-- this HTML markup is really quick and dirty, to be improved -->
<head>
<meta charset="utf-8" />
<title>Testing Fediverse embeds</title>
<meta name="author" content="@[email protected]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="keywords"
content="mastodon, fediverse, pixelfed, oembed, embed timeline, toot"
/>
<meta
name="description"
content="Examples of embedding Fediverse content (timelines, toots, Pixelfed images)"
/>
<meta
property="og:title"
content="Examples of embedding Fediverse content (timelines and toots, Pixelfed posts)"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mastodon-embeds.glitch.me" />
<meta property="og:image" content="https://cdn.glitch.global/48c537a6-fc5b-406e-a715-0a10ff5bd8a5/logo-purple-sketch.svg?1710938243680" />
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<figure>
<img
src="./mastodon-logo.svg"
width="50"
align="right"
style="padding-left: 20px"
/>
</figure>
<div>
This is a simple project for testing embeds of content from
<em><a href="https://joinfediverse.wiki/">the Fediverse</a></em> (in this
case, currently Mastodon and Pixelfed) using different tools and
methods.<br /><br />
📝
<a href="https://dev.to/andypiper/a-opportunity-for-developers-1ee4"
>Read more on DEV</a
>.<br />
</div>
<div>
<br />
<strong>Mastodon Posts ("toots")</strong>
<div>
Posts are straightforward to embed (Mastodon's API supports
<a href="https://docs.joinmastodon.org/methods/oembed/">oEmbed</a>, and
it has an embed code option on the default web UI), timelines
<a href="https://github.com/mastodon/mastodon/issues/6094"
>need a bit more work</a
>.
</div>
<ul>
<li>
A single post using the default embed option from Mastodon -
<a href="./default-toot.html">example</a>
</li>
<li>
A single unformatted post (JSON data) pulled from the Mastodon API -
<a href="./single-toot-api.html">example</a>
</li>
</ul>
<strong>Mastodon Timelines</strong>
<div>
There is no built-in support for embedding a timeline directly from
Mastodon, so some work with the API is required. Good opportunity to
learn the API, and to build something new! 🛠️
</div>
<ul>
<li>Using Mastofeed - <a href="./mastofeed.html">example</a></li>
<li>
Using mastodon-embed-feed-timeline - <a href="./meft.html">example</a>
</li>
<li>Using Maplefeed - <a href="./maplefeed.html">example</a></li>
<li>Using Emfed - <a href="./emfed.html">example</a></li>
</ul>
<div>
One additional useful thing to know is that Mastodon timelines also have
RSS feeds as standard: <code>[instance]/users/[username].rss</code> -
for the sake of example, mine is
<em
><a href="https://macaw.social/users/andypiper.rss"
>https://macaw.social/users/andypiper.rss</a
></em
>
- this means that you can plug this in to any widget that styles an RSS
feed on a site, for example (although it might not look quite the same
as a "proper" timeline on a Mastodon page), or, you can build a
component to use the data from there and style it as you prefer. Handy
info! <br /> <br />
</div>
<strong>Image posts (Pixelfed)</strong>
<div>
The
<a href="https://docs.pixelfed.org/technical-documentation/api/"
>Pixelfed API</a
>
is similar to Mastodon v1; it does not offer an oEmbed endpoint (that I
have found).
<ul>
<li>
A single post using the default embed option from Pixelfed -
<a href="./default-pixelfed.html">example</a>
</li>
</ul>
Pixelfed has Atom feeds for user timelines (not RSS) - they are at
<code>[instance]/users/[username].atom</code>
</div>
<br />
<div>
I've included a
<a href="https://github.com/Uden-AI/fediverse-share"
>Fediverse sharing button</a
>
on some of the pages. <br /> <br />
</div>
<div>
Learn more and read the code that does this by boopsing on the fishies
below! ⤵️ or, look at
<a href="https://github.com/andypiper/mastodon-embeds-examples"
>the GitHub project</a
>
(the same code, but needs to be deployed to a web server).<br /> <br />
</div>
<div>
<a href="https://glitch.com/edit/#!/remix/mastodon-embeds"
><img
src="https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button-v2.svg"
alt="Remix on Glitch"
/></a>
</div>
<div>
<br />
If you want to say hello 👋🏻 I live in the #Fediverse at:
<ul>
<li>📝
<a href="https://macaw.social/@andypiper">@[email protected]</a></li>
<li>🖼️
<a href="https://pixelfed.social/@andypiper"
>@[email protected]</a
></li>
<li>📽️ <a href="https://makertube.net/a/andypiper">@[email protected]</a></li>
</ul>
</div>
</div>
</body>
</html>