Styling Po.st’s social sharing buttons

Recently I was asked what plugin I use for my social sharing. Actually, I don’t use a plugin at all, but a service that I’ve integrated into my theme: Po.st. I’m going to share with you how I set up this service, inserted it into my theme, and styled it. But first, let’s discuss how you can skip half the trouble: download the Po.st plugin. If you don’t want to bother with the code, if you don’t mind having another plugin… you can just download this ready-to-use plugin to control many of the aspects Po.st has to offer, while styling it however you like (although I suspect my code would need slight modifications to properly alter the appearance of the Po.st plugin).

So, why Po.st?

I’m not a sales rep, an affiliate, or even a die-hard Po.st fan girl. I just liked what it had to offer me.

1. Ability to integrate into my site without plugin.
2. Display share count without slowing site
3. Analytics and insights
4. Add page link to copied text
5. Monetization: display ad after sharing (that’ll teach them, eh!)

P.S. #5 isn’t implemented in this example. Interested? Let’s get started.

1. Sign up for an account

You’re going to need an account, so go sign up for the sharing platform.

2. Add the service to your site

Here’s the fun part. We’re going to create a javascript file with the necessary code, customize it, and tell our theme to load it. Begin by creating a new folder in your theme directory called “js” (if you don’t already have one). Create a new document in that folder called “social-by-post.js” and copy the following code into it.

Note that you need to change at least two pieces:

• Get your publisher key from Post. This is under your “Administration” tab.
• Add your Twitter handle.

Other than that, the settings are optional. You can learn more at their integration center, such as the what platforms they support. Now, tell your theme to use this file by adding the following code to your functions file.

3. Insert it into your theme

Once we’ve set up the code, we just need to tell it where to execute. Po.st’s social sharing buttons will display wherever the class “pw-widget” is, so we need to insert a div with that class into our site. After reading a study suggesting the top of your article is the best place to have your sharing buttons, I placed mine using the following code, in the functions file.

Note: this hook is Genesis specific! If you’re not running on the Genesis framework, you’ll need to change this code to fit your theme. Don’t feel restricted to this code! You could call that function twice, inserting it again at the bottom of your entry_content by using a lower priority, ensuring it appears at both the top and bottom of your article. I’ve also used Po.st to add social sharing into a fixed widget. That is, I put the necessary div inside a widget, then used the Sticky Widget plugin to ensure my sharing buttons stayed with the reader.

4. Style it accordingly

You can add the following code into your style sheet in order to style your icons like mine. This code is used to style both my in-content sharing buttons as well as my sticky-widget sharing buttons (not seen on this site). Notice that my widths are percent based, so if you plan on adding or removing any of the sharing platforms I chose, you’ll want to adjust that. Additionally, I’m using Font Awesome for the icons, which you may need to install.

If you run into any problems, give me a shout-out and I’ll try to assist!