 Let's get started As said I mentioned it, I'm a partner engineer on this platform that we are building here for the community and this is all started from community as well So that's why we're talking about from community and about being instantly It's because it's gonna happen about instant articles and you're gonna guys gonna learn how to Start using if you're not Using yet or even learn what an instant article is So we're gonna talk a little bit more about the HTML word and how it works and why it's kind of low to low pages using regular links I'm gonna show these How instant articles work better. There is no magic. There is just like a few Small Informations that we need to to make sure that we're gonna be faster and I'm gonna show you guys how to integrate with instant articles and also how community and how you can join and how you can help and Make sure that this is gonna be open forever and by the end as Sarah mentioned it. There will be a Q&A session So This is how it is starts, right when you start typing Your link on your regular web browser or even clicking a link from any other website And for example these also happens when you have a story that was shared in Facebook And you want to click there to to see how it's gonna be open so The magic begins The first time that you just reach a link from another Website or web browser There will be happening these DNS lookup and I'm gonna show here This is gonna be a kind of simple way Invision Everything that happens under the hood when you click somebody else's link So the first thing that happens is the DNS lookup and this might take forever forever because for example you are for Assessing a link that is your domain.com and for example the link that you're clicking can be your domain 2.com and When you do this you need to figure out your browser needs to figure out where these Your domain 2.com is and this starts with this DNS lookup Once it figure out figures out where your Domain is it starts the fetch of your HTML document and this is Can take like a small part part of the time because normally the HTML is just a text document a few cubites And then it's gonna be the parse so your browser needs to understand what is going on there and needs to start fetching the content like The JavaScript slings that you have there the CSS the images For example the image that it might have on the red on the header And also it's gonna occur a new An event there that I call draw is the draw event when you're just First load your HTML document After you've finished fetching all your documents like your resources CSS it's gonna happen another event for drawing and then you might see for example a few pages flicking because if your HTML document is structured in a way that the CSS changes right after loading your page is gonna flick a little bit and Now once you have all the Javascript loaded there is gonna happen the ready document and This ready is still loading the images like you still might have the images loading and probably Right after the ready document you'll be good to go if you are using ads with programmatic JavaScript for example and Of course if you have a lot of images a lot of resources your browser is gonna reach kind of limits for parallel loading which you will slow you down a little bit on the browser and After loading all your images and all your resources you're gonna be good to go so Of course, I was speaking and explaining all these steps and this is kind of simplified way how Web works It's still a lot of steps right so get the content right after you click on a link and to get to know what it's there and start reading so How could you how could you or we actually? Make sure that you're gonna Load these faster How can we improve so First of all, what if you just like render the content from the same very Domain that you had before for example, you are at Facebook if you load the content from the Facebook There will be no necessity of DNS look up. So the first step will be gone So What if you prefetch the content from your page? So for example, there there is no Not anymore DNS look up and if you prefetch the content itself There will be no fetch at all Of course parsing there's still happen because you have the prefetched content there and you have to render the page So the parse is still gonna happen But what if you take away all this JavaScript Elements and CSS because you have everything pre-configured before And also let's prefetch the images. So What happens here is that? we simplified really much all these rendering thing of the content and there is no magic at all we are just like improving and Serving the content in a way that it's gonna be much faster And these can sometimes happens like ten times faster or even more depending on your network condition and That's What I'm presenting here. It's how instant article works. We wrap it up all these single features that I just mentioned in these New project and That's how it is you just see that the the story on your newsfeed. It's just one tap away It's prefetched as you can see here. It's right Opening it's ready and it's pretty faster than any other link that you might share on Facebook because these was prefetched and Anyone can have the content prefetched as these It's just a matter and I'm gonna explain here on the next few slides how to do it And as you can see here on this small video All the components that we are rendering are native components. So for example when you are rendering a regular web page You have the struggle to to see how these gonna work on all these small devices and all the different flavors of Android and different like different resolution of screens and Support of devices Instant articles does this for you. So you don't have to worry about every single Device that is gonna be assessing your content under the hood like instant article is just like It's it's just like a regular web hml document, but it with small Differences, and I'm gonna show you these on Few steps here Just like we have the header we have you can have the image just like on the video that you saw Here comes the content right after the header and You can put down the content images any other company lights that light shows maps Links to any other thing that you might have and for example We have a few bunch of components that is there And if you have a component that is not there yet, or it's not implemented on our side You can kind of use Webview that is gonna be rendered just like an iFrame inside the instant article So if you still don't support that company that you want to use kind of rich company We can have these as well to integrate with instant articles You can follow these steps. It's on this web link that is there It's gonna take like a few steps and you have to transform your markup into these Previls the markup that I just show you guys And you have to set up a few more things But with the WordPress community We saw the opportunity to build up the instant article plugin and also here at the audience we have a few other plugins writer Writers that also built some some plugins for WordPress That renders and integrates with instant articles. So all those configurations and Most of the configurations that you have to do if you want to implement by yourself If you're already using a WordPress is gonna be one click away of installing and just a matter of configuring the plugin So this is how the the plugin works under the hood For example, you you have the article content that you are writing if or any other publisher is writing Using WordPress and these will generate the regular web and also the mobile web version and In the mobile web version is exactly where instant article word starts So you're gonna have pretty much a bunch of content like a bunch of articles being published through this path and What we've built here. It is a kind of So to have instant article, it's gonna be transforming every single Mobile web view of your article into that instant article markup And what we did to to achieve these is we wrote this Plugging and this plug-in also uses a separate box here That is the SDK that transforms your markup your regular web markup into the instant article markup So you don't have actually to know all the small glitches and all the small components that we have there into the is Instant article word is just like using the plug-in and we're gonna do all this job for you So I'm gonna talk a little bit more about these Plug-ins and a few pro tips right now Like you have the your web article that you might want to migrate now that you know how instant article is and works You can re-seculate other articles that you might have already published it So if you scroll down your article here You can have these sections For related articles as you can see in the middle of the screen there once you tap That's how you add this on the middle of your article and once you tap and it is also an instant article It's gonna happen just like that. So this is kind of cascading navigation through the instant article world so it's gonna be pretty fast as well as your first click and Once you type back, you're gonna just move back to your Previous article that you were reading and of course you can set up like the title that it's gonna be there on this Like this Related article so it's pretty much like easy to configure as you want to Is if you scroll down a little bit more you're gonna see on the footer session of your article More related articles that you might want to to your your audience to click and to keep navigating through your content and If you don't want to configure this Facebook gives these for free because all the articles that you might have already configured into instant article and publish it there Your content will be there for For people that want to click and keep seeing your content The here comes the pro tip number two, of course your publishers if you're a publisher and you You want to have money on and take money on these because you want to keep your site going So we we have the the tools for add placement And there are two that we do One is the automatic placement and the other is the manual placement. So what the first one from another is just like how we're gonna calculate and position the the the add itself within your instant article The first one it's gonna be calculated automatically and the other you can put whatever you want Like you can put right after that the part the paragraph that you are mentioning about How cars are fast and good for example and right below it you might show an ad talking about selling a car for example So to configure this on the WordPress plugin that we've built is just a matter of saying which kind of Ads you're gonna place like you can use the audience network that we have on Facebook. There is The possibility to use an iFrame with a URL or any other custom code that you might have so we can pretty much support any kind of ads within instant articles and and also about tracking like You might want to analyze how your audience is Accessing your instant articles and we have two options as well here One is the Facebook insights. So it's just a matter of adding the FAD that you might already have and it's gonna be just like that to to have access to your Insights or If you want to use any other 30-party tracking code is just like on the bottom of this slide here It will work just like an iFrame and You can put any kind of code that you might want to wonder Another pro tip here as you are using instant articles instant articles is a version for the mobile view of your article, so Once anybody shares this on their timeline or even through a messenger right now We can fetch and see if there is available Instant article version for that article that are sharing and once there is it's gonna be rendered as instant article And for example, if you're accessing through desktop applications, for example Facebook on your regular browser on your laptop, for example You're gonna access the regular version of your article. So instant article Makes it's so available for the mobile And you should have like the Winforce actually to have the Web version of your content is exactly the same on your instant articles So you can't have different versions and different content for the very same Canonical URL and These two the the burger will help you to see how it's gonna look like on the timeline Like we go there and we scrape the this link that you're sharing and you can see how it's gonna look like for anybody just like here on the right and With this tool we see how it's gonna look like and we can even like Check for hours and For so we scrape if you just updated the content there and here comes the part of our takeaways about building the plug-in We transformed this integration that was a kind of Harder for people that were no technical at all to To make sure that these is easier to onboard into the program So if we're writing a plug-in make sure that this is gonna be Easier for people to configure and use it It was powerful like the platform and the WordPress plugins and all the support that platform Built here. It's really powerful. You can use hooks. You can do 30 plug-ins integration, for example, you have one public plug-in and you can Build up in on top of our plug-in for example just by using the hooks and this fits all because Automatic has like VIP that provides like really huge contents and really huge Partners that use WordPress and also like anyone here on this very Role here that just wants to start a blog from now. It's pretty possible. So fits all size of publishers and Of sure Of course the community is really strong and participative we have something around like 300 people that already shared and is reaching out us for the To have access to documentation and their difficulties and like providing solutions that they might Found out using our plug-in. So it's been really Richful and learning full like really learning. We're really learning about this community thing I'll leave here a few resources and we're jumping to the questions sections If you have a few questions, you can go to the mic here. We have a mic in the the center of the this room and And I'm here to To answer Also, I'll leave for Anyone that wants to go after us with this blue shirt. So it's gonna be fine to spot me and We can't just go I'll be around on the on the hall as well Hear me now. Oh, yes, much better. I'll start over Can you speak a little bit about the automatic ad placement and what the breakdown is on? If you guys have done any internal studies or anything about mobile ad performance versus instant article ad performance versus like How you have seen publishers react to To Basically handing off their content to facebook to handle cool The the automatic ad placement works like we do have a few strict Rules to to to show the the the ads itself. So for example, you can't actually show an ad before I might be wrong with the numbers by I'll can check later But we have a strict rule to show right after 50 words So the the automatic placement will do these for you So you don't need to worry about counting the words. So now I can show that the the ads and every 150 words I need to To have a spare difference between the the other ads that you might want so This is just like what makes difference that the auto ad placement to to the other one Regarding the numbers I Might not share this number because this is not yet open to everybody But of course like we can see a bunch of More engagement with instant articles than for example regular web Pages because of the bounce rate that you might have just because of all the those features that I mentioned on the on the beginning like Like instant articles have a much lower rate of bounce rates, for example, so We're doing much better Just because of that So this has some of the same characteristics of amp and I'm wondering does this conflict with amp? Does it create a performance degradation if you're using both instant articles and amp to? You know get streamlined articles out to different locations Great question We are not competing with amp at all because we are different like environments So for example, you access amp links through the for example, if you search for something on Google and the search results if they are amp enabled will be Just like enabled there and we are talking here about the environment within Facebook We're not actually Living into the same room like any any and shared content in Facebook And we are different We're using different technologies as well like we're like native rendering content It's kind of different words, but trying to solve the same problem Outpost that way. I was hoping you could speak a little bit more about the plugin and From a back-end perspective what it's actually doing So for instance, how does it know to serve the instant article version of the markup instead of the regular html? how it handles some of the page builders that we're seeing out in the lobby where they're very heavily marked up with Style as well as content cool The plugin itself just Makes sure that you're gonna transform your content your regular web content into that markup version that I showed you guys early before So this is kind of really a small layer on the plugin Once you have this ready and publish your article into web We're gonna do it. We are doing like a post into graph API that we have that makes these available Into the Facebook side. So you we are now that prefetching all your content and making sure that for the very first time that anybody shares your link We're gonna have all the information that we need to build that as instant article and as a key To to make sure to know if you're gonna render or not the instant article version is the canonical URL This is the rare the key to know that for example if you shared something on your timeline on Facebook And I'm I'm your friend of yours of yours, and I see that story and I click it the canonical URL will tell them to my My my device that hey, this is already On instant article, so let's render these instead of showing you the the browser view To open that link. So that's how pretty much this works in in kind of a simply simplified way Thank you Hey, how does this work with SEO or on the Facebook algorithm? You know, you know, does that there advantages for the Instant versus just the regular way It is just like the regular one like we do scrape the content Just like any other link that you might share on Facebook Just like to to get the image and get the title get the description to to show that preview start on your timeline so any any content that is Already on web will work exactly the same as an instant article. There is no difference. We don't like have weights different for the Regular web to the instant article one So are the instant articles displayed only from within the Facebook app or they also displayed if I'm Browsing Facebook.com from iOS Safari or Chrome Android Good question. No, we just render the the content of Instant article in two apps right now There is Facebook blue app and the messenger blue the app That we have from from Facebook and the regular browser that even if you're on the Like on your mobile phone. It's gonna open as a web Version so we can't actually prefetch because that is not our environment, right? So that's not like that's not a feature that you think is coming any time in the future We don't see these coming yet. Like we don't have any wrong and not Looking for these kind of solution yet. Okay, I guess we're done