Build Your Own Business Website header image

How to Add Facebook Open Graph Tags in Thesis – Part 3 – Testing and Verifying

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 test and verify that the Facebook open graph tags work properly. We do this by looking at the page source.

Video Transcript

Before we do that, I want to show you what this looks like. Let’s come over here to BYOB Website and what we’re going to do is we’ll view the page source because what’s going to happen is, this is going to show up right down here just at the bottom of the head tag.

Viewing the Page Source

So, it’s probably going to show up right in here some place. Actually, maybe the homepage is not the right page, maybe let’s just go to our video lessons page. Oh no, let’s go to our Live Answers page and we’ll just pick a live answer and it should show up in one of those live answers.

I want you to essentially see the before and the after. How to Transfer WordPress Site from the Development Server to a Live Server. Let’s view page source and I’ll scroll down here to the very bottom of the head. I’m guessing that once we upload this and refresh it what we’re going to see is it loaded right after this style sheet reference. Let’s go ahead and try that. So, let’s see. WP Content, Themes, Thesis 182, Custom and Custom Functions PHP. Upload that, overwrite the old file, and come back over to this.

Emptying your Cache

Now, first thing I have to do is empty all my caches because right now all my pages are cached. So I need to empty all my caches because otherwise it wouldn’t show up yet because I would see a cached page. If you don’t have W3 Total Cache installed, this is not one of the things you have to do but because I’m currently trying to use W3 Total Cache again, we do have to do it. We have to wait a few minutes for this to happen. Okay, so we flush the cache, now we’ll refresh our page.

Open Graph Tags

Now when we view our source, those tags will be there. There they are. So, here is the meta property, og:title content “How to Transfer WordPress Website from a Development Server to a Live Server.” Here is the type – its article and here is the image link. I don’t have an image for this so it’s grabbing its own, it’s using the standard image. Then it’s giving the URL to that specific page, then it gives the description. This is the sixth part of “How to Transfer WordPress Website from a Development Server to a Live Server” and the site name is Build Your Own Business Website. I’m the admin, and we’re finished with that.

In fact, we could well that’s good enough. We’ve added that to that page and in fact, if we come and look at, let’s see. Let’s look at our main Live Answers page for a second. This is the standard page with a custom loop inside of it. This standard page should also have that setting. There it is, og:title. You can see that it’s got all of these information in it and then if we go look at this post, one of the things you will see is that this has the actual post image. This actually is going to show up in the page or in the information. So view the page source, come down here. Here it is again, here’s our meta property. Notice that the image URL is different now. The image URL is actually this main clinic makeover site pic gif, which is the image URL that was on the post itself. So what we’ve seen is with a custom post type, a page and a regular post, this information is now been added directly to the head and so when somebody likes or links to one of these pages now, it’s going to have this information to add to their link.

0 Comments… add one
0 comments… add one

Leave a Comment