This is Part 2 of Add Twitter, Facebook Like and Google +1 Icons to a Post in Thesis series. In this session, we demonstrate how to add the social media buttons so that they will only show on the home page in Thesis. We begin by showing you where to get these Social media buttons and then how to add them in the customfunctions.php file.
In part 3 of this series, we show how to create a Meta Box that will allow these buttons to show on a regular page.
Right, okay. So if is single, it doesn’t place it on the blog page. If is single, just places it on the single post. It doesn’t place it on a regular page, right? And it doesn’t place it on the blog page. So what we want to do in order to place it on the blog page is we have to add another conditional statement to this. And so if it’s single and then we add the or operator which is the double bar and then we say if is home… or not if is but just is home. Okay so if it’s a single or if it’s home, it’s going to show up.
I want to put this back up here now. I’m concerned that it’s going to run into a problem with the… oh, let’s just see how it runs into the image here in a second. So now, we’re going to add the Google + button. Adding the Google + button is pretty much the same thing as adding every other button so we just have to search for Google + button… +1 button, pardon me… then come down here to the +1 button code. And I’m going to choose a medium size, it’s going to be in line. Let’s see, I think we’re going to keep this down to 300 pixels as well.
Yeah so let’s move that up here so we don’t get this little group. Actually you know, I guess as I look at it, that little grouping’s not bad. But I think we’d be better off… I don’t know actually. Maybe that’s okay just like that but let’s just try it up here under the heading too.
So we’ll change our hook here. We’ve got Thesis hook before post. Right now, we’re going to have after headline, Thesis hook after headline. And then upload this thing. Now, let’s see what it looks like in that location. Isn’t that interesting? It’s definitely wrapping that down around that and let’s go to see why that is the case because you can see it’s not doing that here. So why would this wrap that around? Inspect element, lots of little bits of code here to make this happen. Maybe it’s because there’s not quite enough room. Maybe that’s the deal so if we made this thing 200 and… let’s make it 200 pixels and see what happens. So instead of 300 pixels… that’s probably what the problem is. It’s probably just too big. Okay, let’s refresh it. Yeah, there we go.
So there was not quite enough room in order to make that work. I don’t know. You know, you just about think that was a better idea though, keeping that under. I think that probably looked better but I don’t know. Maybe that’s okay. Yeah, let’s just take this up to 400. Let’s take them both up to 450 which is what their native size is, which is going to drop this down automatically because I pretty much liked the way that looked before. There we go. I think that’s actually a nice little grouping of stuff there. So I think we’re just going to go ahead and stick with this just like that.