Challenge 2: OpenGraph

[00:00:00]
>> We are going to begin our second exercise of the day, which is to take an app that already has some data in it. And we're going to add some Facebook Open Graph meta tags. Then we're gonna deploy this website to Heroku. Just doing another git push Heroku master.

[00:00:19]
And we're gonna use Facebook's tool to see the data that's available on our new site. So I'm gonna begin by showing you the data. I'm gonna show you how to switch Heroku to this new like little mini app that we're working on. And I'm gonna show you this Facebook tool that you can use to kind of see how your URL looks from the perspective of Facebook.

[00:00:46]
So we'll go in that order. First off, the data that you're using looks like this. And if you installed the JSON-
>> [INAUDIBLE]
>> Thank you, if you installed the JSON view Chrome extension, you may end up with nice formatting like I have here on the right. Otherwise, it might be a bunch of the same characters all on one line.

[00:01:07]
But here's what I want you to see that we've got a list of things. And these things have an object called attributes and then lots of stuff on those attributes. All of this data is free for you to use in your HTML. So if we look at what we have in our Open Graph folder here, we've got an index page and that's gonna represent the list of courses that we're showing here.

[00:01:32]
These are different courses I teach, and then a page that represents sort of the view of an individual course. So let me run this and I'll show you the HTML and then you can kind of see how everything lines up, run- e opengraph. And we'll look at localhost 3000.

[00:01:51]
And we'll see that it changes from the deploy instructions to this list you see here. And each one of these has a URL and when you click on this, you end up at a page here that has the description and the larger image and so on. And we can go back and and it's fine.

[00:02:08]
So if you're curious is how this works, there's a router js file that just involves fetching data from a URL and then rendering one of these two HBS files. You don't need to touch it just in case you're curious as to how it works. And the mid of this is in index.hbs and course.hbs.

[00:02:27]
Index.hbs is where we're building this course list. And you can see here like this is the h1 tag. Here's the UL and then these are the items for each course. And you can see we do course.attributes.slug for example. That we can find in the data, sorry, like right here.

[00:02:48]
So that's what we're using to build our links. So any of these things that are available in the attribute section or these JSON objects themselves, there are available to you in order to use. In particular I want you to pay attention to image info because you'll need to kind of pick the appropriate one for Facebook.

[00:03:07]
Just a hint, one of these images begins with the letters fb. I don't know maybe that's a hint of some sort. So here's what we wanna do. So here's the API endpoint and it's in this slide. You can click the link. You can see it in your browser.

[00:03:22]
I advise that JSON view Chrome extension. Hopefully you can kind of understand that this is HTML with extras, this hbs file here. And you don't have to touch the each, but just understand that this L-I thing, this is repeated over and over again for the list of courses.

[00:03:42]
So if you change something in here like if I did this, if I did like three tildes before it, we would see when we refresh the page there are three tildes in front of everything. So it's sort of just, it's almost like looping over it. It is looping over it.

[00:03:59]
So anything you change here would end up changing and then in course.hbs, we end up using just the variable course in these little expressions here. So that's where we get course colon and then the name of the course that's coming from this tag here. So just look at the data, look at that section called attributes, make reasonable assumptions about what you can use.

[00:04:25]
Like if we copy this and paste it elsewhere. We'll paste it twice, we'd end up with the course title twice. So it kinda works the way you would expect it to work. And if you wanna learn more about handlebars, check out the Intro to Ember 2.x series. The first couple sections of that course will give you a little bit more depth into how templates like this work.

[00:04:49]
You shouldn't need to go all that deep today. So, the last thing I wanna show you is the Facebook open graph debugger. So you have a link to this in the slide in the deck that had all of my favorite tools. It was the first slide in the SEOO, or in the social metadata section.

[00:05:10]
And this is what the tool looks like, right? It basically starts with a single field, and you paste a URL in that. So we can do that with, I'll pick one of my courses here. Or we can just do it like this, yeah. So do embercli Basics, grab this URL, paste.

[00:05:39]
So you can see here I have, I'm missing my OG type property which means I'm falling back to a website. So that's a warning, that's not an error. But you can see here's my canonical URL. Here's my link preview. You see I've got a description here, I've got a title.

[00:05:55]
And then here we can see the different meta tags that it's found. And it's sort of resolve to so here I left out OG type but it's falling back to website. So I see the value for website here. You can actually open this up and see all of the different metadata that was available on this type.

[00:06:14]
And you can even see, we're gonna start dealing with Twitter later on and I have some more stuff there. So you're gonna use this Open Graph tool and put your Heroku URLs in here. Both for the Index page and each course and we should see like the thumbnail come up really nicely, we should see a nice description.

[00:06:31]
You should help Facebook figure out how to make it so that when we share links from the site, you have a nice rich tile instead of just a URL. And then I will go through my solution to this in about 20 minutes and we'll see where we're at.

[00:06:51]
But all of the meta tags that you need to use are things we've already discussed. So just remember, look at the JSON, look at the Open Graph debugger. And if you have any questions about handlebars, or like what you're allowed to do in there, just shout out and I will come and make sure you have what you need.

[00:07:12]
See you in 20 minutes.