Build Your Own Business Website header image

Add Social Media Icons to Posts in Thesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

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.

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.

In this session, we show how to add the icons with code and as coding goes, this is a relatively easy job. We create a series of functions in the customfunctions.php file to add the HTML, add the javascript, and to decide on which pages and where the icons are to display.

Video Transcript

Before I started working on this site, Marty had a very heavy plugin that loaded all of its javascript to the beginning which meant that the entire site loaded slowly. And so I disabled and removed that plugin but she still wants the important social networking buttons added to her site here. And so I’m going to demonstrate to you how to do that in Thesis. This is a good example. This is what we’re going to be trying for. That is, we want to be able to choose which pages these show up on.

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.

So what we’re going to do is start off by opening up our custom functions php file for this site which is what I have right here. And we are going to create a series of functions. The first function that we’re going to create is the function that adds the HTML to the locations that we wanted. So let’s see, function byob add sharing HTML. Unless we are using a… oh yeah, I’m sorry. Here we go, okay. I was doing an outside the php tag so it wasn’t giving me the appropriate appearance here. And then while we’re at it, we’re just going to copy this again and we’re going to create a function that adds the javascript, add sharing javascript because that gets added to another place. You recall, when we did this previously, we stuck that in the scripts section of Thesis at the footer. So we’re going to do that same thing here.

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.

Now, in this case, the Twitter button has its HTML and its javascript combined. And so we are going to paste that in the HTML section. Notice how we’ve got this angry, red error? That’s because we have an escape php so we’re going to escape php by having a closing php tag. And then we’re going to reenter php with an opening php tag which is how we wrap HTML.

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.

Okay this first part is the javascript that we need to load at the bottom of our page. So we’ll grab that first, come back over to our code here and that’s going under the Add Sharing javascript section. So let’s escape the HTML and advanced this time and then reenter the php. And then here, we’re going to paste that code.

Okay so this is the javascript code that we need in order to run the Facebook button. The javascript code we need to run the Twitter button is already part of this so it’s not being added to it. But the script for the Facebook button is in this section here.

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.

So add action Thesis hook after HTML and then which is essentially the very bottom of your page. This is where this is going to be hooked. And then we want to add this function there, that the add javascript, the sharing javascript. We’re going to add that there.

Okay so now we have this conditional statement set up. The conditional is if it’s a single post then do this function and add this action to this hook. So it’s going to do the sharing HTML function and it’s going to add the javascript to this Thesis hook after HTML. And actually, this should work as desired or as advertised right now. So let’s go ahead and try it.

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.

3 Comments… add one
3 comments… add one
  • AWD May 23, 2012, 2:26 pm

    This has been a very informative series.

    Unfortunately, it appears that the Verve Meta Boxes plugin is no longer available. The word is that the latest version of Verve Meta Boxes included an outdated version of timthumb.php in /tools directory, which has a known security risk.

    Are there any alternative plugins that you can recommend to perform the role Verve did – opting whether a page would be added to it or not?

    Thanks!

  • AWD May 23, 2012, 2:28 pm

    Typo, regret. Verve allowed us to determine whether a page would have the social media icons displayed on it or not.

    • Rick Anderson June 9, 2012, 9:58 am

      I’m getting ready to add some videos on the plugin “Types” which has similar functionality.

Leave a Comment