Build Your Own Business Website header image

How to Add Facebook and Twitter Buttons to Custom Header in Thesis

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.

In this session one of our members asks about adding social media tools such as a Facebook Like Button and a Twitter Button to his website’s header. He wants to make sure that they are noticeable but not distracting. We show how to add Facebook Code and Twitter Link in the Header. Then we add the JavaScript on the Stats Software/Scripts to add it below every page to make pages to load without waiting for a Facebook update.

Video Transcript

Rick: Good morning, Christian. Are you with us?

Christian: Hello Rick. Hi, good to speak to you again.

Rick: So tell me about what it is you want to do.

Christian: Okay Rick, so I have a website which you can see at And I’ve been very slow to embrace social media as a marketing tool and I want to rectify that. So I’ve decided I would like to start off with a Facebook Like button and a Twitter tweet button. And for anybody that’s listening that isn’t exactly sure what those buttons do, anytime anybody clicks on one of those buttons, it basically advertises my website to that person’s contacts, whether their friends or followers as they’re known on Twitter.

Now, I understand how to add those buttons into a page and as you can see from my website, it’s a fairly sort of conventional 2-column format, I think, Rick. And I know how to add those buttons in the page but I don’t want them to be a distraction. So I was thinking of placing them in the header, just under my UK and US flag icons. I thought they’d be noticeable there without being sort of too obtrusive, too in your face, if you like. I wonder if you could show me how to put those buttons up there.

Rick: And you’ve got some custom code that you use to create this stuff, right? Because… when I look at your source, you’ve got a section here called my custom banner and you’ve got something over here, I think, called top nav or let’s see… let’s just look at it and see what it says here. Top icon and so that means that we have to do is do what you want to do inside the context of that. Do you have that code open in front of you?

Christian: Not open in front of me at the moment.

But can you, real quick?

Christian: Yeah, I hope so. Let me just… I would have to… let me just see if I can do that.

Rick: See, because what we’re going to do is we’re going to add that code to this div class top icon, directly below the buttons. So that’s where the code will get added.

Christian: Okay so I need to fire up Netbeans…

Rick: Yup. So as soon as you got that fired up, let me know and I’ll switch over to you showing your screen and then we’ll look at your code together and then I can tell you where this all goes.

Christian: Thank you.

Rick: While we’re at it, I’m going to open up the… let’s see, the Facebook Like button code.

Christian: Sorry, Netbeans is taking a while to load but it is installing. It’s loading now.

Rick: So this is where you got your code, right? From this Facebook developer’s page, the Like button?

Christian: That’s right. That’s the stuff I sent you in a text document earlier.

Rick: Right. so if I open up that… my email for a second here…

Christian: So just out of interest, Rick, sometimes during these live Q&A’s you use Firefox and a little utility in there to actually look at somebody’s code and make alterations on the fly. That’s with custom CSS. Is that not possible with php?

Rick: It’s not possible.

Christian: I mean, the custom functions.

Rick: Yeah, it’s not possible with php.

Christian: Okay.

Rick: Php is invisible.

Christian: Okay now I just need to find my file. I’m so sorry for holding everybody up on this.

Rick: Oh that’s fine. And this is the code that you sent me.

Christian: Rick, I must be doing something really silly. Do you know, it’s a couple of months since I’ve looked at my php code and I’m having trouble locating it in Netbeans.

Rick: It’s custom functions php, that’s the name of the file and you should be able to find it under wp content, themes, thesis…

Christian: Would you like to try and find it on my machine? Would that be easier? Would that help save time because I just feel…

Rick: Just go ahead and try that. Let’s see, I’m going to make you the presenter and then we’ll just look over your shoulder here. You have to accept the presenter role so we can see your screen.

Christian: Okay so you can see my screen then, Rick?

Rick: Not yet. There was a little dialogue that popped up for you, maybe it’s hidden.

Christian: I beg your pardon. Show my screen, okay.

Rick: Yeah okay, there we go. So… well, the first thing I would do would be to go up under file and see if there’s a recent files… open recent files, yeah that’s not going to work. So go to open file, just the next one up.

Christian: Okay. And I think…

Rick: Yeah, probably under My Documents and then…

Christian: It’s My Documents, work… let me see… looks like… euros, WordPress, sorry. Wp content, I think, and would it be themes then? thesis_181, custom, here we are, custom functions. Is this the one here? Yes, that’s the right one. I’m sorry.

Rick: That’s okay.

Christian: I don’t know why it hasn’t automatically loaded. There we go.

Rick: Okay so now, why don’t you expand that to fill your screen and then make the tasks thing smaller. So if you just… the arrow in the lower right hand corner of the tasks window, if you click on that, it will drop down.

Christian: I’m sorry, where’s…

Rick: Task window is the bottom of the Netbeans so you see this big blank thing that says No Tasks at the bottom of Netbeans?

Christian: Yes, that’s right.

Rick: Okay so at the top of that, there is a bar with an arrow in the right hand corner.

Christian: Okay, got it.

Rick: Just there you go. So now… and then on the right hand side, just drag the bar over to make that projects file and services smaller so we can see more of your screen. There you go.

Christian: Do you mean this one here?

Rick: Yeah, just drag into the right or left, I mean.

Christian: Left, okay. Is that okay?

Rick: Yup. Okay so now, let’s see, you’re looking at… well, and this is it right here, function icon above header. What I would do is… okay so I’m going to switch back to being a presenter here for a second so I can show you what code I’m talking about. Or can you open up that code on your computer as well? By opening up that code, I’m referring to the code that you emailed to me.

Christian: Oh right, okay. Yeah, sure. Here we go. Right yes, I’ve got the code in front of me.

Rick: Okay so what you’re going to paste in this part of the file is the HTML. So starting with div class FB like all the way through the final div… well no, you’ve got a piece of text in between those 2 pieces. You’ve got that “and here is the code for tweet”.

Christian: Oh sorry. Yeah, right. Okay so you will just do the Facebook HTML code.

Rick: Facebook first and then Twitter, yeah. So copy it.

Christian: Copy that and then Netbeans.

Rick: And then really, directly below the… actually, I would do it inside the div top icon below the link tag so you see the closing div tag there in function icon above header?

Christian: Yes.

Rick: Okay give yourself a space directly above that. It’s the closing div tag. No, that’s a comment.

Christian: That’s a comment, yes. I’m sorry.

Rick: It’s okay.

Christian: So below the comment, do you mean?

Rick: Well, do you see a function icon above header, directly below the…

Christian: Yes I do, yeah.

Rick: That’s your function. Inside that function, you have an opening div tag and it’s div class top icon.

Christian: I’m sorry, yes.

Rick: Okay and then you have a closing div tag at the bottom there.

Christian: Okay yeah, here.

Rick: That’s the closing div tag. Now, in front of that closing div tag, I want you to give yourself a space or line so just hit return. Okay, go up in that line and paste it right there. Okay, now hit return again. Okay now go back over and get your tweet code, your Twitter code. Copy that.

Christian: Copy and then I put that just here?

Rick: Yeah and paste it there.

Christian: Okay, got you. I’m going against programming protocol, aren’t I?

Rick: Why?

Christian: Apparently, you’re not meant to go beyond this pink line here so…

Rick: Well, no that’s… don’t worry about that at all.

Christian: Okay.

Rick: Don’t worry about that at all. And then go ahead and hit save so just right click on custom functions php and say save.

Christian: Do I just click the save icon here? Is that okay?

Rick: Yeah, absolutely. Okay now you need to open up Filezilla so that you can upload this to your site.

Christian: Okay.

Rick: And you also need to open up the backside… you need to open up the administrative side of your site too.

Christian: You mean in WordPress?

Rick: Yeah.

Christian: Okay. Oh gosh, you know what?

Rick: There’s a password.

Christian: The reason I think I can’t connect is because we’ve recently moved our website from one hosting provider to another. And I’m just wondering whether the root… what do you call it?

Rick: No, the ftp credentials will have changed.

Christian: Yes, the ftp credentials.

Rick: Right.

Christian: So I’m not sure we can progress beyond this until I know that information. I’m so sorry.

Rick: Okay but well, we can progress beyond it. WE just can’t get it finished. So let’s open up the admin site in WordPress because you’ve got the other code we have to add, too. We have to add the javascript code.

Christian: Okay so I’m now in WordPress.

Rick: Now, go to Thesis Site Options and what we’re doing now is we’re going to take a Facebook javascript code and we’re going to add it to the bottom of every page. And we’re going to do that using the stats software/scripts box there.

Christian: Okay.

Rick: Yeah, there you go. Open that up and then scroll down so we can see what’s in it. Okay so you’ve already got your Google stuff in there.

Christian: Yes, that’s right.

Rick: So now go back to your text file that has the rest of your code in it and from div id fb root, all the way down to the closing script tag right there, copy that. Now go back in the software stats and scripts and go to the top. Yeah, you want to go above the Google script and paste that there. Okay and then you just hit update.

Christian: I think it’s called something else, Rick.

Rick: Yes, big ass save button. That’s it. And so what you just did was you just added the javascript code to the bottom of every page because what we’re doing is we’re adding that Facebook thing at the top of every page. The reason why you’re adding it to the bottom of every page is so that the rest of your page can load even if it has to wait for Facebook. So as soon as your page loads, it might not say how many people have liked it. It’ll just show the like button but the rest of your page will load without waiting around for the javascript to return a result which is the most efficient way to do this.

Christian: Okay, I’m with you.

Rick: Okay and I’m going to demonstrate what this stuff looks like now even though we can’t see it on your site. And really, all you should have to do right now is you know, is figure out your ftp credentials, upload that to your site and those 2 buttons will display side by side, directly below your flag.

Christian: Flag, okay. And just… I’ve missed something. How do those buttons know to actually be positioned below the flag? Because we actually put them in a function that was to do with the top icon. That’s it, okay.

Rick: Right. And we put them after the flag.

Christian: That’s right, we did. I’m sorry. Now I remember, yeah.

Rick: Because you have a function that include the flag. Inside that function, we inserted these 2 elements.

Christian: We did, indeed. Yes, it’s all coming back.

Rick: Okay so it’s that simple

Christian: Great. That’s great. And what I’m going to try and do maybe while you’re working with some of the other callers is to just contact my colleague in the US and get that ftp sorted out. So if possible, at the end of the call, I can just show you what the finished thing looks like.

Rick: Sure, absolutely. I mean, we may need to… one of the things you will discover is that the Like button is about 3 pixels lower than the tweet button when you insert it so it doesn’t look nice and lined up. So there’s a little bit of CSS tweak that we’ll probably do too you know, in order to make them line up nicely. But we can do that as soon as you actually have it on your site because it’s hard to do that without actually seeing it.

Christian: Okay.

Rick: Okay?

Christian: Well, thank you very much.

Rick: Hey, you’re welcome, Christian. I’m delighted you asked this question.

Christian: Thank you.

Rick: You betcha.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one