Social Sharing Buttons in Single Post Templates

One of the most frequently asked questions I get on a regular basis is what plugin I use for the above social sharing buttons in my posts. The answer is it is not a plugin, but some manually entered coding, which I am going to share with you today.

This coding will work with most self-hosted WordPress themes, including Thesis.
Why Are Social Sharing Buttons Important?

One of the main blog post promotion strategies I cover in my new eBook involves the big three social networks: Twitter, Facebook, and LinkedIn. If you share your posts on these networks, you will naturally want people who come to read them to continue sharing them to their connections on those networks as well.

Using these buttons will make it easy for your visitors to continue the promotional process of your posts to their favorite networks. It will also give your blog social proof when the numbers start climbing, and when you make social sharing easy in combination with great content, they will start moving up.
Social Sharing Button Coding

When it comes to inserting the social sharing buttons into your theme, you have two options. You can insert them into your templates in order to show everywhere, including the home page and archive pages, or you can insert them into just your single post template so they only show when you are viewing a single post. I choose to put them only on single post pages because, if any of them lag, you don’t want five – ten of them hanging up your homepage’s load time.

Also, yes, there are several plugins out there that you can use to do something similar. I like going with the manual coding option because A) less plugins = less load time and B) I can control exactly where the buttons go and what order they are in.

Without further ado, here is the code you will need to implement social sharing buttons in your single post templates.

The CSS – Styling and Aligning the Social Share Buttons

The following styling will keep your social sharing buttons in alignment. You can place these in your theme’s main style sheet.

To get to this, go in your WordPress dashboard to the Appearance > Editor and it will usually be under the heading of Styles > Stylesheet, style.css. For Thesis users like myself, it will go in the custom.css file which, in Thesis 1.7 is under Thesis > Custom File Editor.

.social-single {
margin: 17px 0 0 0;
}

#twitterbutton, #likebutton, #stumblebutton, #sharebutton, #linkedinshare {
float: left;
display: block;
}

#likebutton {
margin-top:0px;
margin-left:-3px;
}

#sharebutton {
margin-left:0px;
margin-top:0px;
margin-right: 5px;
}

#stumblebutton {
margin-left: 20px;
margin-top: 1px;
}

#linkedinshare {
margin-left: 20px;
margin-top: 1px;
}

#plusonebutton {
margin-left: 20px;
margin-top: 1px;
}

You can adjust the margin pixels as needed to straighten or space out your buttons. It’s a fun game of trial and error, but eventually they will all look straight enough.

The HTML – Inserting the Social Share Buttons in a WordPress Theme Template

The following is the HTML code you will need to insert into your single post template files, usually under the heading of Single Post, single.php. You’ll place the code where you want the buttons to appear, which is again a fun game of trial and error depending on your theme. (I’ll get to the Thesis specific code in a moment.)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s