Build Your Own Business Website header image

How to Add Facebook Open Graph Tags in Thesis – Part 2 – Adding the Specific Tags

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we talk about and add the specific tags that Facebook will get when you share the post. These are the Title, Image, URL, Description and Site Name.

Video Transcript

Now, we get down to the types of properties. The first one is the title, that’s the title of this webpage and so we’re just going to get the title which is the title of our post.

Specific Tags for Facebook Posts

And then it says “type”. Now there are a number of types of content. For the moment we’ll be content with content equals article. If we have time I’m going to show you other content types and how to adjust this further content types. So for the moment, let’s say content equals article, and then image or content equals this image variable, and then URL and this is the WordPress tag for getting the permalink to this post.

Description

Now, all four of these are required. Open graph tags, and so we need to have all four of those in. The rest of these tags are not required however, I think they’re fairly helpful. The next one is the description. If you were doing this manually for every HTML page you would type whatever description here you wanted. In this case what we’re going to do is, we’re going to let this description be automatically generated as the excerpt for the post or the page or the custom post type. And in the absence of a specific excerpt being defined, what will happen is, it’ll take the first fifty words of the blog post as the excerpt.

Site Name

So we’re going to go to the excerpt. Then we’re going to get the site name and the site name is get bloginfo name, get bloginfo is a tag that gets you all kinds of information about your site. You don’t want the term blog in here get in the way. WordPress also sort of still first and foremost imagines itself as a blogging platform and so you might think of this as a site info rather than bloginfo but that’s what this is. Get bloginfo name that will return the name of your website and in my case the name of my website is BYOBWebsite.

This is also a not required element but it is useful so what we’re going to do is, essentially you need to put the ID of your admin username here. If your site has a bunch of admins, you could put a bunch of them in here. I’m going to show you how to get your username. Your username is likely to be different or maybe different. Right now, we’ve come to facebook.byobwebsite, what that has done is that it has taken me to the BYOB Website page on facebook.

That’s not what I want, what I want is my personal ID and in this case my personal ID is byobrick. Now, you may have a long ID with a question mark and stuff like that and that’s fine. I’m not quite sure why mine is not that way, why mine is only byobrick. Maybe it’s just because there are so much activity here, maybe it’s because it’s associated with the BYOB Website page. I don’t really know but nevertheless, this is the ID that it’s asking for so I’m going to copy that and come back over here and replace this with byobrick.

Now again, your facebook ID may be different than this and it may look completely different than this. Don’t worry about it if it does, it’s just that whatever it is, when you go to your profile it’s the part that follows facebook.com. Whatever that is, once you’ve clicked on your profile that’s the rest of the stuff.

Priority of Add Actions

So, now we have that and that’s all that we really need for this except to add it to the appropriate place on the site and what we want to do is, we want to add it to the head of our page so we use the wp_ head hook. Here’s the name of our function that’s just up here and then this is the priority. When you’re very accustomed to seeing add action statements that don’t have any priority associated with them, I guess I have lots of them with priorities. Add action thesis hook before content box byob breadcrumbs is an add action hook of that doesn’t have any priority associated with it.

On the other hand, here’s one that does have a priority associated with it and the priority is one. The lower the number, the higher the priority. When no priority is specified, the priority is automatically set at ten. When no priority is specified then essentially each action is added in the order that WordPress encounters it.

When the order of the action doesn’t matter, you don’t need to specify a priority. However, we’re going to specify a priority because we just want to make sure that this happens essentially at last. This doesn’t need to happen before javascript or css or anything else like that. This could be the last thing that happens in the head and so we give it a priority of ninety nine (99) and that’s likely to be the highest priority we have on the site, and therefore in factuality, the lowest priority that we have.

Sometimes when I really want to make sure it’s the lowest priority, I say 999. Anyway, you don’t actually have to specify our priority here, you can let it happen when it happens but because we don’t really want to interrupt javascript and css loading with this, we can be clear about the priority. So anyway, this is our little function. We’re going to go ahead and save the document and then will upload the document.

0 Comments… add one
0 comments… add one

Leave a Comment