diff --git a/index.xhtml b/index.xhtml index d804175..094d739 100644 --- a/index.xhtml +++ b/index.xhtml @@ -19,10 +19,10 @@ 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. + Although the Frames Protocol could be used outside of Farcaster, at the time of writing, Farcaster clients (such as Warpcast) are the only major (client-side) platform to support it.
- (The server-side of the Frames Protocol, which is called a Frame Server, is an HTTP resource — which some might loosely call an HTTP (or HTTP) URL.) + (The server-side of the Frames Protocol, which is called a Frame Server, is an just HTTP resource — which some might loosely call an HTTP (or HTTP) URL.)
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">
@@ -79,36 +82,38 @@ The following is <b>bold</b> and <a href="http://example.com/">
</body>
</html>
+ The Frames Protocol actually only uses a tiny part of 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 HTML <meta>
element has been around since the 1990s.
- The Frames Protocol only uses the HTML <meta> element.
- And it (the Frames Protocol) uses the HTML <meta> element in a very particular way.
+ 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.
- The HTML <meta> element has been around since the 1990s.
+ When creating a Frames Protocol application, you can effectively ignore almost all of HTML except for one HTML element — the HTML <meta>
element.
- 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.
+ 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 Frames Protocol usage of the HTML <meta> element takes inspiration from the OpenGraph protocol.
+ The Frames Protocol usage of the HTML <meta>
element takes inspiration from the OpenGraph protocol.
- Here is an example of the OpenGraph protocol: + Here is an example of a web-page using the OpenGraph protocol:
+
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
@@ -133,21 +138,87 @@ The following is <b>bold</b> and <a href="http://example.com/">
</body>
</html>
- - Since there is a lot of HTML code there, let's just focus on the OpenGraph part of it: -
++ 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. -
++ It is rather simple. + It is just name-value pairs. +
+
+ The "og
" part (in "og:title
", "og:type
", "og:image
", and "og:url
") is short for "OpenGraph".
+ And thus all these OpenGraph names are namespaced.
+
<meta>
+ The Frames Protocol defines its own list of name-value pairs also using the HTML <meta>
element, similar to OpenGraph.
+
+ When creating a Frames Protocol application, you MUST include these: +
+fc:frame
fc:frame:image
og:image
+ (Note that the last required name is from OpenGraph! + Where the first two have been created by the Frames Protocol.) +
+
+ Here is an example of these in HTML <meta>
elements:
+
+ <meta property="fc:frame" content="vNext" />
+ <meta property="fc:frame:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
+ <meta property="og:image" content="/images/4aigvXF62jMY8iRzFN8x.jpeg" />
+
+ + Or the same in a more fjll HTML document: +
+
+<!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>
+
+ + So what does that actually do‽ +
+