Build Your Own Business Website header image

How to Add Facebook Open Graph Tags in Thesis – Part 4 – 1 Week Later Follow Up

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.

One of our members was having a trouble with Facebook not showing the image after adding the Facebook open graph tags. In this session, we discuss how Facebook works with images and give the code that we use on byobwebsite.com. The code is shown below.

This is the exact code we use on byobwebsite.com

/*******************************************************************************
* This function adds Facebook Open Graph tags to the head
********************************************************************************/

function byob_add_facebook_open_graph_tags() {
 if (is_singular()) {
 global $post;
 setup_postdata($post);
 $image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
 if (!$image)
 $image = 'https://www.byobwebsite.com/wp-content/uploads/2012/02/aweber-header.jpg';

 $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

Cherry: Good morning Rick. Thank you so much.

Rick: You’re welcome. So, obviously that facebook stuff has not been posted yet. And so we don’t have those videos to refer to. But I point you in a direction of some code, what happened when you tried to use it?

Cherry: Actually what I did is, I went to try a plugin… Social Media plugin?

Rick: Yeah, that’s not going to work though. The reason that stuff is not going to work is because it doesn’t have an access to the Thesis information. So that’s why the code thing exists because Thesis…oh look at that! Thesis 1.8.3 is now available! Here we go, popped up right here. You heard it here first. Ok so…

Cherry: So, no getting around it, I have to go and do…

Rick: So there’s no getting around it you have to do the code. I’m going to, I’ll walk you through this piece of code though. Let’s go to byobwebsite.com, you know, I just made a clone of this site this morning because of a backup failure. And I need to download my customization files back to this clone before I can show you this. So, let’s see, does Filezilla starting or not? Because I use my own site as an example.

Cherry: Ok

Rick: Because this is something that I needed to solve on my site too.

Cherry: You were having the same problem, ok.

Rick: Well, it’s a problem that happens very consistently on sites, because Facebook isn’t bright. Facebook just grabs the first image that it finds on a page, which is a generally not the image that you want. Even if what you have was clearly the right image on your page, it still goes and grabs the wrong one so…

Cherry: And one other things that happening is, it doesn’t take any image. So there is an image attached to the post but it doesn’t take any image.

Rick: Well, I will…

Cherry: I so carefully chosen the image and there’s nothing there. And it doesn’t look enticing for someone to say “I want to read that” if there isn’t any image.

Rick: Yeah, I agree. Ok, so let’s just move all this stuff, download it back to my computer. Ok, and then we can look at it here… Ok, so I’m going to take this code and I’m going to… I believe I forgot to put this code on the forum. Let’s just look real quickly and see… Live Question and Answer Code…

Cherry: I think you did when I asked the question originally you had put that right one on Thesis. There were two options, one for excerpts and one not. And I actually wanted to ask you which one I should use. But that wasn’t the question that I had asked you on your, I think Thesis questions.

Rick: Yeah, ok. So I’m going to take this code though and I’m going to paste it on the Forum Answers. This is the code that’s actually running on my site right now. And so, one of the things that I discovered inadvertently is that one – this code does not work in my forum, it breaks my forum. So, I’m excluding the code from the forum. The second thing that it does is that my calendar passes an excerpt that contains HTML in it. And so that also breaks the page. And so this code actually has a little bit of extra code in it, because what I’m doing is I’m cleaning all the HTML out of the excerpt so that the page doesn’t get broken. And actually, this is a perfectly the legitimate thing, for anybody to have in their expression of this code. Because it turns out that plugins create custom post types, sometimes create excerpts that have a HTML on them. So this solves that.

Cherry: So we should copy exactly except from the forum part? That line?

Rick: Yeah, you could take out && is_page(“forum”). Well, in fact I’m just going to go ahead and do that right now, I’m just going to delete that. So they say, if is_single right? They say, if it’s single because they think that WordPress is used for blogs but obviously WordPress is used for a lot more that blog. So we say if is_singular instead, which means it gets blog, it gets posts, it gets pages both.

And then in terms of the image, we’re going to serve up one of two images either the Thesis Post Image or a Default Image that we place in our media library. So if there’s not Thesis Post Image then it’s going to use the default image. And then what we do is that we get the excerpt, we clean all of the HTML tags out of the excerpt. And then these are the open graph thing I believe are important. So, you’ve got the title, which is the ‘title’. You’ve got the type of content, which in this case is generally the ‘article’. You’ve got your image which is one of these two images up here. You’ve your URL which is simply the permalink. You have your description which now is my, what I call, clean excerpt – that is the excerpt where we know for sure that all the HTML has been script out of it. And then the site name and then the admin name for my Facebook page or actually my Facebook profile. So my Facebook admin is BYOBRICK and so that’s the admin name. And that connects up any kind of a LIKE or SHARE that happens for this page and it connects it actually up to my admin in Facebook.

Cherry: You know, I noticed you don’t have a number the identification number, when I was cleaning mine, using that plugin, it asked for the Facebook  identification number.

Rick: Yeah, and I think because I have a page, a business page and because I have a fairly large fan base that they replaced that number with this name. You know once you get to a certain place, you get to customize that. And you know you may be at that place to customize it, but you need to poke around and I’m probably not the right person to help you with that part in particular, but customizing your Facebook name is definitely possible.

Cherry: You try that to the URL? Does it customize the URL?

Rick: Yeah, if you go to Facebook.com/byobrick you’ll go to my profile.

Cherry: And so I do have the… I have one of those words, a name without the number afterwards. It’s just a name that I choose.

Rick: Well, so you could use that instead..

Cherry: Ok.

Rick: So, as long as you’ve got a name like that, that you can use then you can use that instead of the number.

Cherry: Ok.

Rick: And, that pretty much it. So I’m going to copy this and place it for you on the Forum. But give that PHP code and let’s call this open graph for Thesis. I think there are couple of other places in which my recommended code is different than DIY Themes’ code but it’s all related, well its primarily related to using Thesis to more than just a blog. So, it’s less of a blog-centric answer.

Cherry: Ok, I see the difference.

Rick: It was serving either the wrong image or no image at all last week before we did this.

Cherry: Good. So we know it works. Good. Thank you! Thank you so much Rick, I really appreciate it!

Rick: You’re welcome Cherry. You have a good day.

Cherry: You too, bye bye.

0 Comments… add one
0 comments… add one

Leave a Comment