Build Your Own Business Website header image

Using a Plugin to Add the Facebook Like Button

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

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.

This member asks how to add the Facebook “Like” and “Send” buttons to her site. We discuss the 3 plugins that I recommend for doing so. We discuss the Facebook Like and Send plugin. Next we look at the installation and configuration of the WordPress Facebook Like plugin. Finally we install and configure the Facebook Likes You Plugin.

Video Transcript

Rick: She’s my star pupil, Jackie has… Jackie’s the proverbial 74-year old grandmother who taught herself how to do this stuff so good morning, Jackie.

Jackie: Good morning, good morning.

Rick: Are you with us?

Jackie: I’m with you.

Rick: Perfect.

Jackie: I don’t know if star is a good word. I mean, I actually…

Rick: Well, I think of you as a star. So the… you know, there are… I did a little research after looking at your question. Well actually, why don’t you ask the question?

Jackie: Okay so I want to add that wonderful Facebook Like to different posts and different things that I put on my site and at the end of it, I’ve seen it on other people’s where you get the like and it goes then to your friends to let them know that your page is wonderful.

Rick: So something like this?

Jackie: Let’s see…

Rick: Right? So you’ve got this, this is the bottom of the plugin directory. There’s this Facebook Like button and then pictures of my friends who have liked it.

Jackie: Exactly. Now the pictures of the my friends who liked it come because you’ve done open graph and I did the first step which just gives you the Like button and it doesn’t even give you a Send button. But then I read that if you use open graph, you get all these other wonderful things. And so, it’s the open graph that I’m kind of stuck with. What do I do, how do I do it and since you’re so good at really explaining things and I thought maybe you’d help me with this. How to do… your suggestion on should I use this WordPress plugin for open graph but to create this Like?

Rick: Okay so… well, and so I do think that you’d be best off using a plugin for this and I have 3 plugins that I’ve looked at. You can see here we are at the Facebook Like search for plugins in the plugin directory and I have looked at all of the Like plugins that have… that have been recently updated and say they are good for 3.1.2. And I have 3 of them that I think are probably make sense. The 1st one is this WordPress Facebook Like plugin and we’ll go through the process of installing this one and looking at the different configurations. The question really is you know, what kind… what level of control do you want over the placement and the behavior of the Like button? The one that gives you… that is the simplest and easiest to use and gives you the least amount of options and control is the Facebook Like and Send, this one right here. All you do is install it and select one button under your WordPress settings and it does everything else. And there’s no way for you to change it. So if you don’t like the way it does everything else then you just have to use a different plugin. But if you’re happy with it, just making all the decisions for you and you essentially do nothing but install it then this Facebook Like and Send button is a good choice.

The one I recommend over that gives you some control and that is this WordPress Facebook Like plugin and we’re going to install that one on this site here. So we go down to Plugins and Add New and what did we say? WordPress Facebook Like, search for those plugins and this is it right here. You can see it’s actually telling me I’ve already installed it because I actually have already installed it. And that produces a little dialogue down at the bottom and this is your settings for it. So you can select whether you’d want it at the… you can have no specific selection which means it goes at the bottom of the post. It can go at the top, it can go at top left, top right, bottom left, bottom right. You can make those choices. You can pick a layout style whether it’s a standard, a button count or the box count. You can decide whether or not to show faces. You can pick the verb to display – whether it’s Like or it’s Recommend. You can pick the font choice. You can pick the color scheme. You can assign the width to that element. You can give it its height and you can decide whether or not you want the Send button set.

And so, in this configuration here, this is what it looks like on my site. Let’s see, let’s just go to Rainier Sweet Cherries. Here it is at the bottom. I’ve already liked it so it’s not going to let me like it again. You can select send and then you know, enter the address from somebody to send it to. And I and one other person have liked this. Notice it does not tell you youknow, how many likes or anything like that with this setting but it does show the picture below. Now if you go over to the… go back up to the settings of it you know, we could… instead of the standard, we could try the you know, the box count for example and save it and then look at it. And see, so it has this instead, right? So there are different ways I mean, that you can choose to lay the thing out. One thing to note though is it only shows up on posts. So it’s not going to show up… it doesn’t show up on the homepage, it’s not going to show up on a regular page, it only shows up on posts.

Jackie: But we do it the one time and it’s there. You don’t need to… putting it on posts.

Rick: Right, that’s right. It goes there automatically. And you saw a little bit of delay, right? There was a little bit of delay between when I went to this post and when this thing showed up. And it did not however, affect at all the loading of the rest of the page which is one of the reasons why I like it. It doesn’t affect the loading of the rest of the page but it does take a you know, it has to run out to Facebook, find out whether you know, get the data, come back and display it. So it does take a moment.

Jackie: So Rick, that is the open graph part of this, am I correct? That covers that whole…

Rick: It does. Now you don’t need to worry about that anymore. That’s a level of technicality that you don’t need to think about.

Jackie: That’s neat. That’s what I want.

Rick: It also uses the XMF or XFMBL or XBML or whatever. Yeah, XFBML markup rather than the iFrame markup you know, so I made it… there’s other technical things to say about it too but…

Jackie: So it’s doing what I was trying to do what step 1 and step 2…

Rick: It is. That’s right.

Jackie: It’s doing it with this plugin. Perfect.

Rick: That’s right. Now, the other thing to consider though is the other plugin which is the Facebook Likes You plugin and if we install that one, you’re going to see that… I did that on this other site. Facebook Likes You… you can actually add it to pages and that’s the one thing that the first one doesn’t do. The first one does not give you the option of adding it to pages. So let’s see, must be under tools or settings… Facebook Likes You. So again, you have a choice of width and you know, what its layout is and you know, fonts and all those kinds of things… color schemes. Here you can switch to HTML 5 ready which actually is the iFrame so I don’t really recommend you to that. But you can you know, show the faces, you can show the send button. It’s using the FBML right now. If that…if you really need to tie up more closely to Facebook, you can put your application id in here which you must already have since you’ve gotten through step 1.

And again, you can show where you want it but also now, you can show it on pages and you can show it on the home and the search and archive pages. And then it also gives you the opportunity to change padding around the outside of this thing and it also allows you to exclude posts and pages, exclude categories and add an additional style so that you can add your own custom CSS to this thing. So if we hit save to this and go to a page, let’s see… oh, let’s go to the homepage. Okay, well there you go. You can see that here it is right now you know, it’s been added to the page. So if you want it to be added to pages then you need to use the Facebook Likes You. But you’re happy with it added only to posts then the Facebook… no, the WordPress Facebook Like is the one to use.

Jackie: But I kind of like this idea of going to the homepage…what are your thoughts about that? Using it on homepages or on pages as well as posts?

Rick: You know, I would probably only use it on posts myself. But I guess it just depends on what the difference is between a post and a page for you. You know, in your situation, with all your catalog pages you know, it could very well be a good idea to put a Like button on those. So somebody is going to say, “Oh my gosh, I just love these things” right? And click Like and it doesn’t have to be to this one specific you know, product. It can be to the group of products which is why I’ve showed you this next plugin so that you can see what the options are.

Jackie: You know, that’s a very good point because I send people most of often, to my category pages. So you know, that would give them the opportunity to share it. That’s great. Thank you. Thank you for giving me options.

Rick: You’re welcome.

Jackie: You always come through.

Rick: Well, it’s delightful to talk to you again, Jackie. I’m glad everything’s working out for you there.

Jackie: It is. The site… I mean, with your help, I’ve got probably much more productive site for sure than I had a year ago. I mean, orders come in every day. What else can I say?

Rick: Yeah, that’s what you want.

Jackie: I didn’t have any a year ago so that’s what you’re helping. The site’s wonderful. It’s working.

Rick: Okay. Well, we’ll talk to you later Jackie.

Jackie: Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment