Frames Protocol

by

The Frames Protocol, also known Farcaster Frames, is a simple web-based technology used for making applications.

Although the Frames Protocol could be used outside of Farcaster, at the time of writing, Farcaster clients are the only major (client-side) platform to support it.

Farcaster

Before we get into the Frames Protocol let's quickly go over Farcaster — since the Frames Protocol originated with Farcaster.

Farcaster is a decentralized social-media network — and is similar in many ways to other decentralized social-media networks, such as the Fediverse (which includes Mastodon, Pleroma, Pixelfed, PeerTube, Misskey, Lemmy, Kbin, GreatApe, Akkoma, etc), and Bluesky.

And in particular, Farcaster is a micro-blogging social-media network platform.

The most famous micro-blogging social-media network platform is Twitter.. But the Fediverse's Mastodon, Akkoma, Misskey, Pleroma and others are also micro-blogging social-media network platforms. And so too is Bluesky.

All of these (including Farcaster) are similar to Twitter..

HTML

One of the main language of the Web is HTML.

HTML looks like this: 


The following is <b>bold</b> and <a href="http://example.com/">this</a> is a link.

Although typically, HTML comes as a whole page (rather than a fragment), and thus usually looks more like this: 


<!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>

The Frames Protocol actually only uses a tiny part of HTML.

HTML <meta> Element

When creating a Frames Protocol application, you can effectively ignore almost all of HTML except for one HTML element — the HTML <meta> element.

The Frames Protocol only uses the HTML <meta> element. And it (the Frames Protocol) uses the HTML <meta> element in a very particular way.

The HTML <meta> element has been around since the 1990s.

If you look at the old HTML 2.0 specification (i.e., IETC RFC-1866 in section 5.2.5.), which was created back in the 1990s, you can see how the HTML <meta> element was defined back then.

OpenGraph

The Frames Protocol usage of the HTML <meta> element takes inspiration from the OpenGraph protocol.

Here is an example of the OpenGraph protocol: 


<!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>

Since there is a lot of HTML code there, let's just focus on the OpenGraph part of it: 


	<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" />

It is rather simple. It is just name-value pairs.