Add Facebook Like and Twitter Buttons to the Thesis Header
http://thesistoolbox.com
Now I think what we'll do is we will add the Facebook Like and the Twitter buttons to this. Now in order to do that, what we need to do is get that Facebook Like and the Twitter tweet code. Let's start off by doing that with Facebook so let's search for Facebook Like button code and that brings up this developer's page. And you can either put a URL in here or you can leave it blank. If you leave it blank, it automatically uses the URL of the page in particular. So that means you generally want this to be blank. I'm going to turn off the send. My layout, you have the choice of standard button count which puts how many people have liked it beside it or box count which stacks it or standard which is essentially like this. I'm going to go ahead and select button count. Now in terms of the width, you can specify the width of this. Really, I only want this much to show up so I think I'm probably going to say about 75 pixels wide. I'm not going to show the faces. Faces would be the faces of people who liked it. I'm not going to show their faces. I can pick a verb to display, I'm going to leave it at Like. I'm going to leave it this light color scheme and leave the font alone and I'm just going to get the code.
Now you have 3 different versions of the code that you can use. I think with Thesis, it's nice to use the HTML 5 code. It's much lighter weight than any of the other choices. So if we stick with HTML 5, we have 2 different things we have to deal with. The first one is the javascript code and this javascript code, we're going to put on every page and we'll use the Thesis settings for that. And then this code is the code we're going to put in our widget.
So let's start off actually by putting this code in the widget. Go back over to the widgets, here we are. Here's our text widget. Now we just paste that code in the text widget and hit save. And then in order for this to show up, we need to add the javascript. What we're going to do is add that javascript using Thesis Site Options and go over to Stats, Software and Scripts. And we're going to place that javascript code right here which will place it at the bottom of the page. So there's our javascript code, copy that, place it at the bottom of the page and hit save.
Okay now if we come over and refresh this, we've got our Like button sitting right here. Three people have already liked this. That's interesting. And it has pushed our menu down again so we're going to move that menu up a bit. But before we do that, let's just add the Twitter button to this too.
Okay so that was the Facebook. Now what we want to do is add the Twitter button code so I'm just going to search for Twitter button code and again, back to this Resources. Now in this case, what we'll do is we'll pick the horizontal count just like this. There are a whole bunch of other settings that you can do here which I think are you know, potentially worth considering but we're going to do this as simple as possible for the moment. And the simplest thing possible is to either pick note count or the horizontal count and just grab this, copy it, and come back over to our widget and paste it. Now this is one of those cases where... which way did my widget go? Okay, over to widget. This doesn't have a separate javascript code. This simply has the... well, it has javascript embedded in the HTML here which is not absolutely perfect but it's what it is. You put those 2 things side by side here in this. Now what happens is they will both show up side by side.
Okay so now we need to give ourselves a little bit of padding, margin, stuff like that. I think I'm going to take this... I think I'm going to give myself some bottom margin for the search bar first. So search bar settings, bottom margin, I think I'm going to... let's give that 20 pixels of bottom margin. It's going to give the menu some heartburn but... okay that pushed that down there. And then you can see that unfortunately, the Facebook button and the tweet button don't really line up. So we've got to do a little bit of monkeying around with this in order to make it so they do line up plus we want to pull this back up to where it belongs.