Part 1 – Write Initial Code
This is Part 1 of the Add Twitter, Facebook Like and Google +1 to a Post in Thesis series. These social media icons will display on specific posts or pages without using a Social Media Plugin. Some of these plugins can make your site load slowly.
So for example, it’s not showing up on the home page. It’s not showing up on the demo page but it is showing up on the About page. And want it to show up on all blog posts. And so this is what we’re going to be working on here.
And so this is an extension of what we talked about…it was, I think last week. Maybe it was the week before. One of the… I guess, it was last week where we added this Like and Tweet button to a text widget here and stuck it in the header. Well, we’re not going to be using a text widget here. This time, what we’ll be doing is using code and hooking it in Thesis hooks. But having said that, it’s still not particularly complicated and although it is a departure from what I usually say we’re going to do a beginner’s session. However, almost everybody here shows up to all the sessions anyway so I think you’ll probably survive here today.
And then we need a function that is going to switch or decide when and where this stuff is going to be displayed. And so this is going to be called add share buttons to a post or page. Okay so we have descriptive names. Our function name has been prefaced by a prefix here that will distinguish our functions from any other function that may be added to the site.
And now what we need to do is go grab the code because we really don’t need to write very much code. Most of this code is just cut and paste from the various sites. So we’re going to start off with our Twitter code. So we’re going to search for Twitter button code and we’re going to use the resource page for that. What we’re going to do is we’re going to pick the horizontal count so the button’s just going to look like this. And we’re not going to style any other thing. We’re just going to go ahead and use this as it is. And because have clicked that, this is the script that has been created for us here. And so what we’ll do is copy that and then come over to our thing here.
Okay so our Twitter button is on here. And actually, yeah let’s add Facebook and then we’ll do this and then we’ll add the Google + to that. So we come back over here and instead of the Twitter button, now we want to look for our Facebook Like button code again, the Facebook Developers page. We’re not going to use the send button. We will use our standard button like this but 450 pixels is too big so we’re just going to go down to 300 pixels. We do want to show faces though because that’ll be cool. And all the rest of the settings, we’re going to leave the same so we’re just going to say get code. And now what this does is this just shows us our code.
Now we got to go grab the HTML for the Facebook button and that’s in the second block of code. Paste that. So now we have our Twitter button and our Facebook button. We hit save. Now, what we haven’t done yet is tell it where we want this stuff to be loaded and under what conditions. Well so the first thing we’re going to do is tell it where we want it to be loaded and we want to put this… we want to add this to the Thesis hook after heading so we’re going to use that very simple add action and then insert the hook name. So it’s Thesis hook after heading and then the comma, space, and then starting single quotes. And then we’re going to put the name of our function. The name of our function is this. Okay and put a comma…or not comma, semi-colon after that.
Okay so now we’ve got this add action that’s going to add this function which is currently blank to the Thesis hook after heading. Let’s just make sure we’re accurate about that spelling for a quick second here. Let’s see, DIY… I’m pretty sure I’m right about that but I may as well be right. Users guide, go to hooks and this is the Thesis hook after… not heading, after headline. That’s what it is. Thesis hook after headline, glad I checked. Headline.
Okay so we’ve got our function and we’ve got it hooked. Now we need to have it do something. So the first thing we want to do is we just want to add this to post. So we say if is single, that is the conditional phrase or the conditional… yeah, it’s the conditional phrase for single posts. If you want to add something to a single post, you ask the conditional question, if is single. So if it’s single then we want to call this function. So we can just go ahead and grab that function name just like that and paste it here. Okay so if it’s single, it’s going to do this function. And it’s going to do this function where this function is being hooked which is after headline.
Now we also need to call this function and we need to add it to the footer. Now if we used the Thesis scripts box for this, it would be applied to every single page. But there’s no reason for us to do that. We don’t need it applied to every single page. We just need this script applied to every place this is applied. So it’s inside this conditional that we’re going to add this. So this is another action then. Add action and in this case, what we’re going to say is the Thesis hook after HTML so we’re going to add action to the Thesis… I spelled that hook wrong. This needs underscores. This is not… it can’t be dashes. I’ve been doing other WordPress coding where I’m using dashes instead of underscores. But in this case, it’s all underscores.
Hit save and yes, I’m where I want to be. So let’s just refresh our FileZilla here for a second. Custom functions php and upload it. We come over to that page and let’s refresh it.