Build Your Own Business Website header image

How to Add Facebook Open Graph Tags in Thesis

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.

Part 1- Understand the Problem

In this session, we show how to add Facebook open graph tags to a post or page in Thesis. This allows Facebook to get the post information including images when the post is shared in Facebook. These tags are meta information that is added to a page or post.

Code used in this lesson

* This function adds Facebook Open Graph tags to the head

function byob_add_facebook_open_graph_tags() {
 if (is_singular()) {
 global $post;
 $image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
 if (!$image)
 $image = '';

 $dirty_excerpt = get_the_excerpt();
 $clean_excerpt = wp_strip_all_tags($dirty_excerpt, true);

 <!--?php }<br ?-->}
add_action('wp_head', 'byob_add_facebook_open_graph_tags',99);

Video Transcript

The next thing I want to do here for the time that we have remaining is to talk about how to add the Facebook open graph tags to a post or page. The reason for doing this is so that when somebody likes one of your posts, the actual post image for that post shows up or when somebody shares one of your posts on their site.

Facebook Open Graph Tags

This was a question that somebody ask recently on the forum and this is also a problem that I recently had to solve for one of my clients. So, we’re going to go through this process of making that work out right now.

DIY themes actually has an article on this, although they don’t explain what’s going on here. I’m going to explain how to use this code. So, the first part of this is understanding what a facebook open graph tag is. A facebook open graph tag is essentially a piece of meta information that is added to any kind of HTML page and that meta information is there so that facebook applications can interact with it.

Facebook applications, like the “like” and “share” button are really just about any kind of a facebook application that’s going to interact with your page, it could also be a facebook comment or whatever. It interacts with or looks for meta information about the post or page and what we’re going to do is to give it the meta information that facebook wants for that kind of interaction.

Actually we’re going to do this on BYOB Website. I’ve not done this yet on BYOB Website so we’re going to be doing this live on my own site so that you can see it actually functioning which means we’re going to open up my BYOB custom functions file. Now if we look at their code, the code that they recommend here is “if is single” right, it starts off with “if is single” and essentially
that conditional means this is going to get placed on every single post. If DIY themes has a failing, their failing is that they only think of WordPress and themselves as working in a blog environment. What they do here is provided you with code for your blog to add open graph meta tags to blog posts.

Open Graph Tags with Image

The emphasis that we have on BYOB Website is on small business websites, not necessarily on blogs and so “if is single” isn’t actually an adequate question to ask because this is on all single posts and on all pages. So that’s the first thing that we’re going to do here.

What this code does is it grabs the image, either the thesis post image or it grabs the default image. So, one of the first things we need to do is add a default image to use. What I’m going to do here is come over to my dashboard and add new media. We’re going to select the file, this file will become my default image if my post or page doesn’t already have any image on it. Then it’s going to use this default image.

haven’t actually picked one yet, so let’s see what does this one look like? Yeah, I could use that, I think I will use that actually. This is going to be my default image, this will be the image that we use if another image doesn’t exist. So, I’m going to grab this URL for that image and save the changes and I’m going to open up notepad here for a second and paste that URL there because I need to come back and get it.

Meta Information Added to a Page or Post

The next thing we’re going to do is actually add the code, there are two pieces of code here. One piece of code uses your blog tag line as the description. The piece of code we’re going to use is going to actually take an excerpt as the description.

So we’re going to come down here and copy their code and I’m just going to describe all eVids (6:41) different pieces. First custom_functions.php file , let’s see, Google+ one, Google social sharing buttons. I think this is perfect. I’m going to put it right here and I paste that and I’m going to get my little comment block. So this function adds open graph tags to the head, adds facebook open graph tags to the head. Of course I put it on the wrong spot.

One of the first things I want to do is preface this, even though it seems like a unique name it’s not actually very unique because facebook open graph tags is a fairly generic term. This is generic to this subject and you could actually end up with a conflict in the name here so I’m going to add BYOB add facebook open graph tags and now I have what I know will always be a unique function name. I’m going to copy that function name and I’m going to paste it down here in our add action. I’ve got the right one.

Now we ask this question “if is single” and actually we don’t really want “if is single”, what we want is the expression “if is singular”. “If is singular” will get single posts, pages, custom post types and all of those things. Since I have all of those kind of things on my site and since I want these open graph tags added to all of them, I’m going to use “if is singular” rather than “if is single”.

The next thing we’re doing is in the case of a singular, so it’s not going to happen on an archive or 404 error or search page, it’s only going to happen on singular type pages. It’s going to grab the global value of post, it’s going to use the set up post data function for post. It’s going to create a variable for image and it’s going to get post meta, post ID which is this current post and then the thesis post image.

Get Post Meta

Then this little phrase single equals true. For those of you who have never seen get post meta before, get post meta takes three arguments. The first argument is the ID of the post that you want to get the meta from. The second one is the name of the custom post meta field and the third one is whether or not you want the information returned in a string format. Because this is essentially an address to an image, we want that to be true, we want it to be a string format so we say, “single equals true”. If it was false, it would return it to us as an array which might be useful in some context but would break in this context.

If there is no image that has been defined as the thesis post image then this case is going to be the case. This will be true, that is if there is no image. This little exclamation point means there is no image or if image is equal to false or image is equal to no, if image is blank.

If there is no image, then let’s put this value in for image. Now, the value we’re going to put in there is the address for our default image. We’re just going to copy this and paste it so now we have our default image. If this doesn’t result in an image address then this would be the image address. Because I do have plenty of pages that don’t have post images associated with them and I have some posted on post images associated with them, this will return the same image fairly regularly.

0 Comments… add one
0 comments… add one