368 lines
14 KiB
HTML
368 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Frames Protocol</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<main>
|
|
<article>
|
|
<h1>Frames Protocol</h1>
|
|
<address class="h-card">
|
|
by
|
|
<a rel="author" class="u-url" href="http://changelog.ca/"><span class="p-given-name">Charles</span> <span class="p-additional-name">Iliya</span> <span class="p-family-name">Krempeaux</span></a>
|
|
</address>
|
|
<p>
|
|
The <strong>Frames Protocol</strong>, also known <strong>Farcaster Frames</strong>, is a simple web-based technology used for making applications.
|
|
</p>
|
|
<p>
|
|
It uses <abbr title="HyperText Markup Language">HTML</abbr> without really using <abbr title="HyperText Markup Language">HTML</abbr>, so that <strong>Frames Protocol</strong> applications work with clients that don't support the <strong>Frames Protocol</strong>.
|
|
The fall-back being <a href="https://ogp.me/">OpenGraph</a>.
|
|
</p>
|
|
<p>
|
|
Really, a <strong>Frames Protocol</strong> application is mostly made up of <strong>images</strong> and <strong>buttons</strong> on the client-side (that are specified using <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element) with a back-end that gets HTTP <code>POST</code>ed to, which can return a new "page" with an <strong>image</strong> and <strong>buttons</strong>, and so on and so on.
|
|
</p>
|
|
<p>
|
|
This choice of just being mostly <strong>images</strong> and <strong>buttons</strong> actually makes the <strong>Frames Protocol</strong> simpler to create a viewer from scatch.
|
|
No need to implement all Web technologies.
|
|
No need to worry about security and privacy holes that Web technologies introduce.
|
|
</p>
|
|
<p>
|
|
Although the <strong>Frames Protocol</strong> <em>could</em> be used outside of <strong>Farcaster</strong>, at the time of writing, <strong>Farcaster</strong> clients (such as <strong>Warpcast</strong>) are the only major (client-side) platform to support it.
|
|
</p>
|
|
<p>
|
|
(The server-side of the <strong>Frames Protocol</strong>, which is called a <strong>Frame Server</strong>, is an just HTTP resource — which some might loosely call an HTTP (or HTTP) URL.)
|
|
</p>
|
|
|
|
<section>
|
|
<h2>Farcaster</h2>
|
|
<p>
|
|
Before we get into the <strong>Frames Protocol</strong> let's quickly go over <strong>Farcaster</strong> — since the <strong>Frames Protocol</strong> originated with <strong>Farcaster</strong>.
|
|
</p>
|
|
<p>
|
|
<strong>Farcaster</strong> is a decentralized social-media network — and is similar in many ways to other decentralized social-media networks, such as
|
|
the <strong>Fediverse</strong> (which includes Mastodon, Pleroma, Pixelfed, PeerTube, Misskey, Lemmy, Kbin, GreatApe, Akkoma, etc),
|
|
and
|
|
<strong>Bluesky</strong>.
|
|
</p>
|
|
<p>
|
|
And in particular, <strong>Farcaster</strong> is a <strong>micro-blogging</strong> social-media network platform.
|
|
</p>
|
|
<p>
|
|
The most famous <strong>micro-blogging</strong> social-media network platform is <strong>Twitter.</strong>.
|
|
But the <strong>Fediverse</strong>'s <strong>Mastodon</strong>, <strong>Akkoma</strong>, <strong>Misskey</strong>, <strong>Pleroma</strong> and others are also <strong>micro-blogging</strong> social-media network platforms.
|
|
And so too is <strong>Bluesky</strong>.
|
|
</p>
|
|
<p>
|
|
All of these (including <strong>Farcaster</strong>) are similar to <strong>Twitter.</strong>.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>HTML</h2>
|
|
<p>
|
|
One of the main languages of the <abbr title="World Wide Web">Web</abbr> is <abbr title="HyperText Markup Language">HTML</abbr>.
|
|
</p>
|
|
<p>
|
|
<abbr title="HyperText Markup Language">HTML</abbr> looks like this:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
The following is <b>bold</b> and <a href="http://example.com/">this</a> is a link.
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
Although typically, <abbr title="HyperText Markup Language">HTML</abbr> comes as a whole page (rather than a fragment), and thus usually looks more like this:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" /<
|
|
<title>An Example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
The following is <b>bold</b> and <a href="http://example.com/">this</a> is a link.
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
The <strong>Frames Protocol</strong> actually only uses a tiny part of HTML.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>HTML <code><meta></code> Element</h2>
|
|
<p>
|
|
The <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element has been around since the 1990s.
|
|
</p>
|
|
<p>
|
|
If you look at the old <abbr title="HyperText Markup Language">HTML</abbr> 2.0 specification (i.e., <a href="https://datatracker.ietf.org/doc/html/rfc1866">IETC RFC-1866</a> in <a href="https://datatracker.ietf.org/doc/html/rfc1866#section-5.2.5">section 5.2.5.</a>), which was created back in the 1990s, you can see how the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element was defined back then.
|
|
</p>
|
|
<p>
|
|
When creating a <strong>Frames Protocol</strong> application, you can effectively ignore almost all of <abbr title="HyperText Markup Language">HTML</abbr> except for one <abbr title="HyperText Markup Language">HTML</abbr> element — the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element.
|
|
</p>
|
|
<p>
|
|
The <strong>Frames Protocol</strong> only uses the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element.
|
|
And it (the <strong>Frames Protocol</strong>) uses the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element in a very particular way.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>OpenGraph</h2>
|
|
<p>
|
|
The <strong>Frames Protocol</strong> usage of the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element takes inspiration from the <a href="https://ogp.me/">OpenGraph</a> protocol.
|
|
</p>
|
|
<p>
|
|
Here is an example of a web-page using the <a href="https://ogp.me/">OpenGraph</a> protocol:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" /<
|
|
|
|
|
|
<meta property="og:title" content="Hello world!" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:url" content="http://www.example.com/article/hello-world.xhtml" />
|
|
|
|
|
|
<title>An Example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
The following is <b>bold</b> and <a href="http://example.com/">this</a> is a link.
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
Since there is a lot of <abbr title="HyperText Markup Language">HTML</abbr> code there, let's just focus on the <a href="https://ogp.me/">OpenGraph</a> part of it:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="og:title" content="Hello world!" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:url" content="http://www.example.com/article/hello-world.xhtml" />
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
It is rather simple.
|
|
It is just name-value pairs.
|
|
</p>
|
|
<p>
|
|
The "<code>og</code>" part (in "<code>og:title</code>", "<code>og:type</code>", "<code>og:image</code>", and "<code>og:url</code>") is short for "OpenGraph".
|
|
And thus all these <a href="https://ogp.me/">OpenGraph</a> names are namespaced.
|
|
</p>
|
|
<p>
|
|
<strong>So, what does that actually do‽</strong>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Frames <code><meta></code></h2>
|
|
<p>
|
|
The <strong>Frames Protocol</strong> defines its own list of name-value pairs also using the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element, similar to <a href="https://ogp.me/">OpenGraph</a>.
|
|
</p>
|
|
<p>
|
|
When creating a <strong>Frames Protocol</strong> application, you <strong>MUST</strong> include these:
|
|
</p>
|
|
<ul>
|
|
<li><code>fc:frame</code></li>
|
|
<li><code>fc:frame:image</code></li>
|
|
<li><code>og:image</code></li>
|
|
</ul>
|
|
<p>
|
|
(Note that the last required name is from <a href="https://ogp.me/">OpenGraph</a>!
|
|
Where the first two have been created by the <strong>Frames Protocol</strong>.)
|
|
</p>
|
|
<p>
|
|
Here is an example of these in <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> elements:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame" content="vNext" />
|
|
<meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
Or the same in a more full <abbr title="HyperText Markup Language">HTML</abbr> document:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" /<
|
|
|
|
|
|
<meta property="fc:frame" content="vNext" />
|
|
<meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
|
|
|
|
<title>Example Frame Server</title>
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
This is an example Frame Server.
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
<strong>So, what does that actually do‽</strong>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Buttons</h2>
|
|
<p>
|
|
We already went over three of the names the <strong>Frames Protocol</strong> uses with the <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element:
|
|
</p>
|
|
<ul>
|
|
<li><code>fc:frame</code></li>
|
|
<li><code>fc:frame:image</code></li>
|
|
<li><code>og:image</code></li>
|
|
</ul>
|
|
<p>
|
|
But there are other <strong>optional</strong> names, too.
|
|
We are going to look at 4 more of them:
|
|
</p>
|
|
<ul>
|
|
<li><code>fc:frame:button:1</code></li>
|
|
<li><code>fc:frame:button:2</code></li>
|
|
<li><code>fc:frame:button:3</code></li>
|
|
<li><code>fc:frame:button:4</code></li>
|
|
</ul>
|
|
<p>
|
|
These add buttons to a <strong>Frames Protocol</strong> application.
|
|
</p>
|
|
<section>
|
|
<h3>One Button</h3>
|
|
<p>
|
|
For example, this has <strong>one button</strong>:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame" content="vNext" />
|
|
<meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
Note that this looks exactly the same as the previous example, except one more <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> element has been added to it:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
</code></pre>
|
|
</figure>
|
|
</section>
|
|
<section>
|
|
<h3>Two Buttons</h3>
|
|
<p>
|
|
Here is another example that has <strong>two buttons</strong>:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame" content="vNext" />
|
|
<meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
<meta property="fc:frame:button:2" content="the second button" />
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
Again, the focus is on the <code>fc:frame:button:*</code> <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> elements:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
<meta property="fc:frame:button:2" content="the second button" />
|
|
</code></pre>
|
|
</figure>
|
|
</section>
|
|
<section>
|
|
<h3>Three Buttons</h3>
|
|
<p>
|
|
This example has <strong>three buttons</strong>:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame" content="vNext" />
|
|
<meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
<meta property="fc:frame:button:2" content="the second button" />
|
|
<meta property="fc:frame:button:3" content="the third button" />
|
|
</code></pre>
|
|
</figure>
|
|
<p>
|
|
Focusing on the <code>fc:frame:button:*</code> <abbr title="HyperText Markup Language">HTML</abbr> <code><meta></code> elements:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
<meta property="fc:frame:button:2" content="the second button" />
|
|
<meta property="fc:frame:button:3" content="the third button" />
|
|
</code></pre>
|
|
</figure>
|
|
</section>
|
|
<section>
|
|
<h3>Four Buttons</h3>
|
|
<p>
|
|
And finally, this example has <strong>four buttons</strong>:
|
|
</p>
|
|
<figure>
|
|
<pre><code>
|
|
<meta property="fc:frame" content="vNext" />
|
|
<meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
|
|
<meta property="fc:frame:button:1" content="the first button" />
|
|
<meta property="fc:frame:button:2" content="the second button" />
|
|
<meta property="fc:frame:button:3" content="the third button" />
|
|
<meta property="fc:frame:button:4" content="the forth button" />
|
|
</code></pre>
|
|
</figure>
|
|
</section>
|
|
<p>
|
|
At the time of writing the <strong>Frames Protocol</strong> does <em>not</em> support more than 4 buttons.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Buttons Presses</h2>
|
|
<p>
|
|
So what happens when the user presses a button‽
|
|
</p>
|
|
</section>
|
|
</article>
|
|
</main>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|