Farcaster is a decentralized protocol that enables users to build and connect social apps on the web3. It gives users full control over their data and audience, and allows them to interact with different apps using a single identity.
One of the features of Farcaster is the ability to create and embed frames, which are interactive widgets that can display any web content inside a Farcaster client. Frames can be used to showcase and promote smart contracts, social apps, NFTs, or any other web3 content. Frames can also be customized and styled to fit the theme and design of the Farcaster client.
In this blog, we will explore:
- What Farcaster frames are,
- How they work,
- Some examples of frames on Farcaster, and
- How to create your own frames.
What are Farcaster frames?#
Farcaster frames are interactive widgets that can display any web content inside a Farcaster client, such as Farcaster Browser or Farcaster Chat.
They can be created using the Farcaster API, which allows developers to specify the type, source, and metadata of the frame.
Farcaster frames can be of different types, such as video, audio, image, text, code, or custom. The source of the frame can be an IPFS hash, a URL, or a smart contract address. The metadata of the frame can include a title, a description, an image, and a color.
Frames can be embedded in any Farcaster post, also known as a cast, by using a special syntax.
Farcaster frames can interact with the users, depending on the type and source of the frame. For example, users can play, pause, or mute a video frame, or deploy, interact, or verify a smart contract frame.
One interesting thing about farcaster frames is that they have enabled applications to directly tap into the already existing distribution of farcaster which consists of the best people from the web3 industry.
This feels like facebook apps which created a whole new ecosystem for games like farmville to amass millions of users instantly. Similarly, farcaster frames will help crypto consumer apps to achieve the level of distribution a crypto app dreams of.
How do Farcaster frames work?#
They work by using a combination of on-chain and off-chain systems, ensuring a balance between decentralization and performance. Frames are simple urls deployed on a server, which are deployed by their respective owner. They include certain special metadata as per farcaster's specification, these meta tags are decoded and showed on the client's UI, clients include warpcast, jam etc
What are some examples of Farcaster frames?#
Farcaster frames can be used for various purposes, such as showcasing and promoting web3 content, creating and sharing experiences, or optimizing social interactions.
Here are some examples of Farcaster frames that have been created by the Farcaster community:
1) NFT Mint:
A frame that allows users to mint and sell their own NFTs using a simple smart contract.
The frame was created using thirdweb, a tool that helps users to create, deploy, and manage smart contracts on any EVM network.
2) Video App:
A frame that allows users to upload and play videos using IPFS, Pinata, and FarcasterJS.
The frame was created using FarcasterJS, a library that helps developers to interact with the Farcaster protocol and create frames.
3) Casino:
A frame that allows users to play a simple dice game using a smart contract.
The frame was created using Remix, an online IDE for developing smart contracts.
How to create your own Farcaster frames?#
Creating your own Farcaster frames is easy and fun, as long as you have some basic knowledge of web development and smart contracts.
To create your own Farcaster frames, you need to follow these steps:
Step 1:#
Sign up for a Farcaster account and get an invite code. This will allow you to join the Farcaster network and access the Farcaster API.
Step 2:#
You can follow this guide to create farcaster frames. Farcaster frames are simple urls with custom meta tags that are interpreted by farcaster which helps them do stuff like showing buttons, clicking on them etc
Step 3:#
For testing, you can deploy your urls to ngrok and then test on this simulator built by farcaster.
For production, you can deploy urls on vercel or any other server and access the urls through simulator
Step 4:#
Share and embed your frame by using the URL of your frame, which you can use to display your frame anywhere on the web, or by using the special syntax of your frame, which you can use to embed your frame in any Farcaster post.
You can also add your frame to the Farcaster Explore page, where other users can discover and interact with your frame.
Conclusion#
Farcaster frames are a powerful way to showcase and promote your web3 content on the Farcaster network. They allow you to create interactive and engaging widgets that can display any web content inside a Farcaster client.
You can use frames to share and embed your smart contracts, social apps, NFTs, or any other web3 content with your audience.
Happy framing!