What’s a Frame and How to build one on Farcaster?
Let us learn about how to get started as a beginner and get your frame on the decentralized social protocol, Farcaster
Frames are a very exciting aspect of the Farcaster protocol. Here’s what you need to know:
What are Frames?
- Frames turn traditional Farcaster casts (those short text updates) into mini-interactive applications.
- They allow developers to embed enhanced UI experiences, authenticated actions, and more complex functions directly within those short posts.
Examples of What Frames Can Do
- Polls and Quizzes: Instantly create interactive polls or even simple quizzes directly in your Farcaster posts.
- NFT Galleries: Let users display, and potentially even trade, NFTs that they own straight from a Farcaster cast.
- Live Data Feeds: Integrate feeds that stream updated information on topics like sports scores or cryptocurrency prices.
- Game Integration: Imagine simple text-based games playable right within your social feed.
How do Frames Work?
- Frames use metadata within the HTML of a webpage. If a Farcaster client finds a page linked within a cast that has this special Frame information, it can render it accordingly.
- This follows the idea of extending what is already there (HTML), which is similar to how Open Graph embeds work already.
Why are Frames Important?
Frames transform Farcaster’s functionality:
- Rich Interaction: Farcaster is no longer limited to basic text and links. Imagine a whole new set of social functions that can be achieved without hopping between websites.
- Composable Building Blocks: Each Frame is like a mini-app. Developers can chain them together, creating sophisticated interactive tools directly within the social flow.
- Ecosystem Growth: More engaging functions within Farcaster make it more appealing to both regular users and developers, promoting its adoption.
Let’s build a Frame
Building Frames for Farcaster can be as simple or complex as you like. Let’s start with a beginner-friendly example and walk through the steps.
Goal: A Basic Interactive Poll
This Frame will create a simple multiple-choice poll embedded right within your Farcaster cast.
Prerequisites:
- Text Editor: Any basic text editor (Notepad, TextEdit, etc.) will do for now. If you want syntax highlighting for coding, options like VS Code or Atom are free and popular.
- Basic HTML Understanding: You’ll need familiarity with concepts like
<div>,<button>, and simple inline CSS styling. If you're completely new to this, resources like Codecademy have quick & free HTML tutorials. - Hosting: A way to make your HTML file accessible via a publicly shareable link. For our simple example, services like Glitch (https://glitch.com) or Replit (https://replit.com) offer quick ways to publish code online.
Steps:
HTML Structure
- Open your text editor. Create this basic HTML:
HTML
<!DOCTYPE html> <html> <head> <title>My Farcaster Poll Frame</title> <meta property="fc-frame" content="v.next"> </head> <body> <h2>Favorite Ice Cream Flavor?</h2> <button>Chocolate</button> <button>Vanilla</button> <button>Strawberry</button> </body> </html>Hosting
Choose a service like Glitch or Replit. Create a new simple project and paste the above HTML code in their editor. This should give you a URL where you can view that HTML in a browser.
Add “Click Magic” (Basic JavaScript)
We’ll keep the script very simple for now. Edit your HTML in Glitch/Replit, adding this JavaScript under the existing code in the <body>:
<script> const buttons = document.querySelectorAll('button'); buttons.forEach(button => button.addEventListener('click', () => alert('You voted!'))) </script>This simple JavaScript finds all our buttons and makes them alert “You voted!” when clicked. Farcaster Frames offer much more sophisticated possibilities, but this will allow you to test things quickly.
Test in Farcaster
- Compose a new cast on a Farcaster client that supports Frames.
- Link to the URL where your HTML + JavaScript are hosted.
- Post the cast! You should see the poll integrated, and the buttons should show the alert.
Next Steps:
- Styling: Experiment with CSS within the HTML file to make your poll visually appealing.
- Data Collection: Learn how to send the click information to a database or analytics tool to display poll results (more intermediate coding needed).
- Framework Help: As your Frames get complex, look into JavaScript frameworks like React and Vue.js, which make designing interactive web structures easier.
Let me know when you’ve tested this out! We can work through more complex features or troubleshoot the process.
