Everything you need to know about Farcaster Frames

hey so today's video is on forecaster frames for those that don't know forecaster is a decentralized social media platform so think something like Twitter but the data is fully open basically there's an open database now why is this interesting right now if you want to get data from Twitter Twitter owns the API you have to pay them hundreds of dollars a month or thousands of dollars a month you can't extend it you can't build your own client it's fully held by Twitter itself the only other client that really exists today I think is pro. twitter.com for example so the main client is wc.com but lots of other people create clients too for example here is a client called launcher. XYZ you can see warcast looks very much like Twitter but if I go to launch cter you can see it's more of a product hunt type experience and it's for people launching on the platform and you could imagine a version which looks like Instagram or a version that sort of has its own functionality anyone can create their own client it takes something like Twitter which is a form of communication and S similar to email there are a thousand email clients out there now around this sort of Twitter and social media concept you have that with forecast as well it's an idea I've been really excited about already a year and a half I've been quite active on the forecaster platform as of two weeks ago I think it started to go viral it's now gross 100,000 users in the last month or so but I've been like following this story for a while cuz it's the sort of thing that interests me quite a lot and the reason I've been excited about it even before the hype started is because of what it in aables right now if we want to see improvements made to Twitter is fully based on the Twitter team if you look at the last 17 years of Twitter history it hasn't really progress much more recently with Eline it's starting to move a bit faster but for the most part it's the same platform no one could improve it no one could really adjust it if you created your own client you got shut down at a certain point a platform like foraster the database is open so it's similar to open source warcast itself isn't open source there might be other clients which are open source but the data behind it like the database of what showing all these different tweets and costs that's all open so imagine the possibilities of what you can build here and for me it's similar to the Wikipedia versus encara moment Encarta was fully owned by Microsoft there was only so much they could do as like an individual team but Wikipedia anyone can contribute and Wikipedia blew Encarta out the water there was no way Encarta could compete with millions of people providing content for Wikipedia any expert could join and put their own data in it's not oneto one with social media platforms what Twitter has in its favor it's got a gigantic Mo and user base and to get hundreds of millions of people onto forecaster I don't see that happening anytime soon but the concept as a whole which is like better for society an open database where people can build their own clients and own experiences or a close Silo owned by single company I would say the former is the better platform that doesn't mean it's going to win in the the long run or that will ever be able to take over Twitter Network effects are extremely powerful but at the very least that's what interests me and so me as a developer I can go and create the experience I want now after that long intro there's something new that a forecaster has added that makes it extensibility and building into the platform even easier and it's something called frames frames are similar to OG images for example if you add this metadata to your page an image a description it will show up in Google or in Facebook when sharing it OG image specifically open graph image here you can see the image that displays and it displays in lots of different platforms so we can add images that's cor you can add titles descriptions different ways you want the car to appear but what if you want to go a bit further than that what if you want to add a button into your preview that says sign up what if you want to add some more functionality so that's what frames are it's like mini if frames and they feel deceptively simple at first but there's a lot of power that comes with them so let's take a look at an example of a frame here this tweet or this cast has a frame in it and you can see it has these buttons and so if I want to click subscribe I can just immediately subscribe over here I don't have to leave the platform and I can just enter my info here and this input is actually an advanced frame most frames are just going to be an image with a few buttons but even with that you can do quite a lot let's take a look at another example here somebody actually built a full game into a frame just clicking these buttons takes a little bit of time to load every time there's a new image loaded but here you can see in the image it's got Farm guide here mint more button this is an external length and so on now here somebody even went and created a game of chess in a frame now this is quite difficult let's go D2 to D4 okay so I'm playing the computer here and it actually worked so these are just proof of Concepts right now it's not actually right for gaming but it's a very cool concept that what people are able to create I'm going to show you how they work behind the scenes they're very simple very similar to what we saw on open graph instead of OG URL you have OG button or OG input and things like that and you have a post URL for when a button is clicked and I also put out frame today I might show you a bit of the code behind it but here you can join an affiliate program directly from within forecaster without having to leave the platform and this is possible because you are signed into warp cost here and when you click this button join affiliate program I'll be able to get your ID from warcast I know you just clicked it and now you've joined the affiliate program you've got your own unique referral code which I can provide to you over here your stats and so on beyond that frames also now support minting or in other words purchasing an item online so this opens up a whole new world of possibilities imagine just being able to come here I can see a can of Coke I can click mint this even is going to cost me some amount of money this is obviously a digital can of Coke so I can't really do much with it but potentially they could also just ship me this can of Coke and I think all of this will become possible within the next half a year or so the forecaster team is moving pretty quickly on this we're seeing new functionality come out day by day it's all very possible and what's cool about it is this functionality it's so simple it's built into all the different forecast of clients it's not just wc.com here it's everyone so I can share this link and it will appear appear in different formats on lots of different platforms basically the same way as OG images appear on Google Facebook Twitter LinkedIn and so on if you want to see some more frames which are interesting go to topf frames. XYZ here you can see Girl Scout cookies an e-commerce store and there's a whole bunch of other things forecast here is a crypto community so a lot of web 3 people are there but it's not specific to web 3 anyone can join how is a frame actually built let's dive into the specification of what it looks like you just need to add a few tags one of them similar to OG image you're going to add a frame image and then you can also add buttons you can add a post URL which means when a button is clicked it's going to send a post request to this URL you can also have different actions for example it could be a redirect it could be a mint a link the link is just clicking a button it takes you to an external website you can have input text which we saw before so I could add my email to subscribe to or something and that's more or less what frames is so you just add like a few HTML meta tags to your page and now you have a frame when a post request is made you'll get data like this this is the data you'll get FID is basically the users forecaster ID you'll get a bunch of other information the timestamp the button that was clicked if there was the input over here you can see it's hello world and also the Tweet or the cost that it's referring to who cost it the hash of the cost and so on oh the most basic use case is actually po by the way for didn't build polls themselves they launched the ability to have polls but as frames so Twitter the team went and built polls but forecaster you just have an image with four buttons and depending on which button you choose the frame updates and that that's the poll so I'll show you some of my own code just to make this even more clear if you're familiar with nextjs generate metadata is a way to add metadata to a page and you can see I have the standard stuff like title description open grath and Twitter but then I've also added some of my own tags and it's very simple simple the frame we saw before for shint is just these five lines of code to add the data to the frame and then what's important is the post URL and so when the button is clicked it calls this post URL and you can see this is Route it's calling and again here it's pretty simple I get the address of the user I make some API calls that a platform supports and I return a new frame and this new frame can have a new image and new buttons so if we take a look at that in graphical format here you can see this is the initial screen it has two buttons on it when I click the button through it sends a post request and now this sends me back to a new frame okay that wasn't right play again new button and if I click bar it takes me to this screen and here you can see an external link and that's how frames work and you could have an infinite number of frames connected so there we've covered the basics about frames I'll just show you a few other tools which are helpful versel OG so this is how you can dynamically generate an OG image and these are a COR part of frames so every time you see a frame you see an image here and here you can see form guide and MTM and so on so this is probably static but you can imagine if I choose different options now these buttons have to be rendered dynamically so you can use OG image next OG sorry to go and do that so here you can see an image response you can see I'm using react code and some CSS and here I'm just returning hello and this is the size of the image this uses to Tor you don't need to use versel to create these images so here you can see the exact same idea generating an SVG just using react code so that's really all there is to frames you have three parts to it you have the OG tags in the HTML page you have the post request to handle when a button is clicked and you have the image which is generated dynamically and you could even have a frame just based on the OG tags you don't have to take those extra steps but a lot of other frames will use all three of those steps another tool which is really helpful if you want to create these frames yourself is the frame validator so you can paste in a frame over here and you can see what it looks like for example I just pasted in another URL and you can see what the frame looks like in the debugger here another way that I was using to debug is frames JS and when you download their starter kit you can run that debugger but you can run it locally it looks something like this it actually looks a bit prettier now they've iterated it on a bit since it's been launched and you can even write your frames as if they were react now I'm actually not the biggest fan of this this might look a bit better but I think already using the OG tags it's already so simple that this just adds complexity to it some of the other parts of it might be helpful to you for example get frame message can get extra data that might be helpful so foraster will send you the FID of the user but if you want to get the user address attached the FID so you need to make calls to the forecaster protocol and if you do get forame message so in the background it will call n which is AP which will give you the result having mentioned Nar Nar is another good tool to check out here you can see it's the easiest way to build on top of forecaster it's not part of the forecaster team it's an external product here you can see they have a frame Studio that makes it even easier to build stuff around it I haven't played with their frame Studio but one thing I did use was getting the address from an FID that behind the scenes was using n that's the end of the video If you enjoyed it subscribe every week I try and do a video about open source today wasn't EX exctly open source I did show you a little bit of code but there was an open database behind the scenes so I think that somewhat counts anyway enjoy and let me know what you think do you think this idea is interesting do you think frames will pick up in other platforms as well or do you think it's something that will only will only see in forecaster

Channel: Learn from Open Source with Elie

Views: 1,665

Keywords:

Id: 0Rs-XvlITXM

Length: 11min 47sec (707 seconds)

Published: Tue Feb 13 2024