Getting Started with Farcaster Frames
Aired Date
October 30, 2024
Hosts
Series
Farcaster 101
Episode
Module 3
Watch on YouTube
https://youtu.be/bzclD_VeIpkfarcaster 101 is an educational series brought to you by gm farcaster in partnership with snickerdoodle building off of their state of farcaster report which you can access at snickerdoodle.com this 12 part series introduces all aspects of the farcaster ecosystem and helps you get started building your social graph and brand on farcaster
gm farcaster and welcome to module 3 of farcaster 101 we're going to start diving into frames so module 3 is going to give you an introduction to frames and module 4 will help you learn how to create your own frames in a number of different ways so we if you have found us and this is the first video you're watching please step back to modules 12 and get a little bit more of a foundation before you move forward and also feel free to stop by our office hours which we'll be holding each wednesday as we introduce this series and if you've found us at a later date and our office hours are no longer active find us on farcaster and we'll be happy to answer any questions so let's dive in
with our introduction to frames so we're going to get started with frames so we're going to go over what are frames use cases and examples we're going to introduce you to transaction frames composer actions and mini apps these are all extensions of the basic frames that we are going to start with so what are farcaster frames well frames are a way to build interactive apps that run directly in a farcaster social feed they can be used to create rich in feed experiences for web applications so adrienne what does all of that mean because that's a bit of a mouthful so what exactly are we talking about here when we talk about frames
the best way to think about frames is as a another type of content type almost that you're gonna share and see and interact with in the forecaster feed so if you think about what other social networks are like it's pretty much you have your your feed of posts users come in they're creating user generated content if you're using x it's a text or it used to be a text based network more video now these days but linkedin but whatever it is you're seeing text and images and that's pretty much and and video and that's pretty much what people share what frames are is a way for people to post and and generate really interactive content so as a user when someone shares a frame you can interact almost like a mini web page if you will that's right within your social feed so it's like a really it makes forecaster a a really rich dynamic feed of content i'd say it's really i think one of the more exciting features within farcaster
perfect and behind all of this is the open graph protocol so frames are a standard for creating interactive and authenticated experiences on farcaster embeddable in any farcaster client a frame is a set of meta tags returned within the head of an html page if a page contains all required frame properties the frame apps will render the page as a frame the frame meta tags extend the open graph protocol and adrienne what is the open graph graph protocol like what is this that we're talking about where did it start what does it do
yeah so the open graph protocol was originated in facebook back in the day as a way for different social networks to get information about links that were being shared so if you're gonna share a url on your social feed by giving the by giving kind of the the the app a little bit more information in the url this is at the coding level that app would know maybe what image to show as a preview or so like when you see a youtube link for instance being shared on a social network and you see a preview of the of the video or the title or the description or if you're sharing a blog or a newsletter and you see an image all of that data comes from the open graph protocol that's considered open graph and if you go to the next slide this is an example on the screen here of how open graph data can be interpreted or displayed across different social networks so if if you wanna share a youtube video and here's on the left side is how x is is displaying a youtube video it's just the url it doesn't do anything with it and on the right hand side is how webcast is showing more of a rich preview it's pulling the title and a little image kind of thumbnail of the video this is not frames yet this is just like the basic open graph protocol data so that's just the the the background on where frames came from but now but this is still i'd say open graph is still just very static it's just displaying content what frames does is it extends the open graph and makes it so that you can add additional features and make it more interactive so imagine like imagine being able to like the youtube video imagine if being able to like the youtube video or comment on it from within within the feed without having to go to the app that's the the the vision i'd say for frames
and if you're looking for additional information about frames and what they can do you can go to docs.farcaster.xyz/developers/frames
and that will give you a really great starting point as well as some videos as to your next steps for building frames we're going to talk a little bit more about that in our next module as well let's take a look at a frame before we go any further this is a frame by snickerdoodle it was for the state of barcaster 2024 report you'll see within this cast which is as we talked about before sort of similar to a tweet or a post on other media this is where you can add the link that will then turn into a frame so essentially what snickerdoodle wrote was this text to your product testing or marketing campaign calibration can do much better on farcaster than spending 1,000 of dollars on axtg or discord simply because of the high quality crowd but it but the platform itself doesn't give much insights about its ecosystem yet so of course we had the pleasure to do it check out the state of farcaster to understand the platform better and leverage it to its fullest and then dropped the link to the frame they created on nanar they created a frame on nanar we are going to talk about that in our next video in our next module this led to a really sort of straightforward frame this is a pretty simple frame to create but it provides a lot of powerful information within this small little window that somebody doesn't have to leave and go to another website just to check it out you can add some links and we will show you that as well but this allows you to kind of flip through the different data that was presented within the report which was pretty interesting as well so you should definitely go check that out so the other links down here the other buttons and you can have up to 4 i believe in this type of frame is the opportunity to go to the website and download the report itself so it will bring you to the actual report and then the other button is the share button which will then create a new cast in which you can share it with your audience on warpcast so a couple different options here it's going to then dynamically create the cast for you you'll be able to add some additional information and then cast this out to your followers so that gives you a really good idea of a basic frame and what that looks like and how simple it can be to utilize and create we'll talk about creation shortly in our next module adrienne anything i left out that you think we should add into this this particular information
i think this i think you covered it all it's a good kind of just just overview of of the potential and just to kind of i guess give the give the idea of what a frame is it's just a it's a way to create interactive experiences directly within your feed because it's based on a a standard and we're gonna show different examples there's so many different things you can do with it so it's yeah let's move on to some other examples
yeah before we jump into a lot of other different types of frames let's just talk about some basic history of frames on farcaster this just launched at the end of january 2023 so that was put into into the protocol and it sort of 2024 professor oh my god 2024 i'm wrong 2024 not 2023 it feels like it was 2 years ago it is not even a year old yet at the time of this recording my apologies so january 2024 this launched and it was really kind of an exciting moment there was you could see that the devs knew the potential here and were excited about it so they immediately started seeing what they could do with frames and they started pretty basic and straightforward a lot of just sort of linking out to other sites but starting to kind of explore what could be done and this was one of the very first farcaster frames i think it was maybe the second one the first one was paragraph i think and maybe a couple others and then it was the girl scout cookies and this became a way to order girl scout cookies in a frame linking out to a site and also to be able to order them with crypto which was very exciting and then we get a little bit more complex as time goes on transaction frames came next and this allowed for an actual transaction with your wallet to occur within the frame or by staying at least in a very simple way within warpcast so this is an example of sam's candle club where you can actually subscribe to her hypersub hypersub would be a method of subscription similar to like a patreon or something like that with a different time bound subscription and in this case it's ordering handmade candles from sam and this can happen all within this frame so very simple process as well and then what else should we talk about with transaction frames this has been something that's fairly new development it came a few months after the introduction of frames what am i missing here adrienne that we might wanna call out
well this is i i guess i'll just say because farcaster is built on cryptorails and everybody has a way to attach a crypto account or your a a crypto wallet to your farcaster account it makes the ability to transact and kind of do a transaction in terms a lot easier because farcaster knows where your wallet is so
it's allowed for a lot of creativity in terms of different types of transaction frames that we see sometimes they're pulling data from the social graph directly and sort of displaying that for you whether that's maybe the number of casts or your storage availability things like that or it can be playing the opportunity to do a transaction with your wallet that's attached to your to your account so there's different different things that can be happening in the background but it's it definitely allows for a lot of creativity one of the other things that allows for is minting with a with a wallet minting different nfts and we'll show that a little bit more in our next iteration our next module so we also have something called composer actions so adrienne can you tell us what a composer action is and how is this a little bit different
a composer action is a is something you can you can take advantage of as you're composing or creating a cast in farcaster so there'll be a little menu option which we'll demo in the next module that as you're composing an act there's a list of composer actions and these are just lego blocks they're not necessarily built by the core farcaster or wordcast team these are developers in the ecosystem are creating
actions that anybody can use and it's a way to use frames without having to develop your own so one example is there's an app called events events dotxyz it's like a luma or an evite some sort of kind of event manager but you can with the composer action select to host an event and from a composer action fill in a few little pieces of information and then boom you have a when you go to create your cast it'll display as a as a frame another example from a of a composer action is by bounty caster where you can choose bounty caster in the list of act of of composer actions when you're creating a cast and it will let you create a bounty for in any number of categories but let's say you want to what's an example of a bounty famous bounty
let's see if maybe you want to reward somebody who might wear a crop top of your particular shirt that you created for eddie thembre and you wanted to put a bounty out there you could do that within your composer action this may or may not be a real thing that adrianne did so there you go i did do that a bounty there's that the bounties can be fun or the bounties can be a little more serious so say you're looking for a developer to assist on a project or a designer or you need a logo created or what have you you can post those with bounty caster and you can do that right within composer action so you open up your cast click on the composer action button and it will give you a list of different options and we're gonna show you that in our next module and walk through the interactive pieces of this alright and it does make it very easy so that you don't have to necessarily develop your own frame for these things and then taking it to the next level is mini apps mini apps are coming in different flavors this is a basic mini app with paragraph which allows you to actually read this newsletter slash blog post right within your feed and it opens up into a nice reading experience so that you can read and then subscribe and then also even collect the nft that might go with this particular post so we do use paragraph for our newsletters and we will be actually creating special newsletter for this series for the farcaster 101 series so you will see a companion piece to each of these videos that lays out all the resources that go along with it and make it very easy for you to access so look for that on the in the gmfc 101 channel did i get the channel right
what is it gm farcaster 101
101 gm farcaster 101 channel i knew i was gonna mess that part up we might just leave that in anyway for fun so also mini apps can be like i said simple along these lines and nice just creating a great different reading experience or they can be a little bit more complex where they open up a game so one one such game which we'll show you in the next module is flappy caster which i am horrible at let me be very clear about that and trivia which i am good at so both of these happen within a frame on the timeline but open up a whole different very rich app experience right within right within farcaster anything else about many apps that i may have left out adrienne
you didn't leave anything out but i'm just really excited for everyone to be able to see frames in action because yes as we're going through this like we said it frames have been around for less than a year it feels much longer and already when i go to other social networks and i scroll a feed and i realize the only thing i can do is consume you know like watch a video read someone's post and you lose people's attention like you can't so everything in forecaster with with the frames has become such a richer dynamic interactive experience and it's not because the team the core team or the warpcast team are building all these features it's because it created a way for other people to build and and kind of other developers to build these experiences so i'm just very excited to get to the next module to do the the demos of frames because they're super cool well before we
do that let's mention this one bit of information from df david furlong who has been amazing with creating frames he was one of the first frame developers and created a lot of open source frame tooling and he had recently posted that there are now 24 apps that display frames within them and it is another part of this sort of lego block thing that you can then add these into other clients' other apps and allow them to be used there as well so there's a lot of cross pollination which is fantastic and we're going to move on to our next module in creating frames and give you a lot more idea of what this looks like we'll do some interacting
within these frames the mini apps and the composer actions so you can see exactly how this all works and how you can create your own on farcaster we'll see you in just a moment bye bye