Add a Stylish Set of Share Buttons to Blogger / WordPress

If you checked this site on mobile, you should see a set of share buttons appear above and below posts. Also, if you’re using a PC, you should’ve noticed the same share buttons appearing just below posts only. Lots of co-bloggers often ask me which exact WordPress plugin I use but as a matter of fact, I’m not using a plugin for those buttons, I added them manually. Either you’re on Blogger platform or WordPress, you can add these kind of cool, stylish share buttons to your blog too. This is what the buttons should look like when added:

I actually got the code from sharethis.com but you may not like the way it appears on your blog if you’re using their WordPress plugin or if you did the automatic setup they have for Blogger. Adding it manually gives you more flexibilty: You can choose how and where you want the sharing buttons to appear. As you can see, the buttons have the major social networks and social bookamarking sites included:

• Facebook share button
• Facebook like buttton
• Tweet button
• Pinterest button
• Digg button
• Stumbleupon button

Of course, you can add more buttons and even customize it but lets get started with these first. Below is a demo of what it should look like. Note that it’s customized with a little bit of CSS but of course, you can change this if you know how to get it done.

Adding the share buttons to Bloggger / Blogspot

1. Log in to your Blogger account

2. Go to Template > Edit HTML

3. Click the box labelled “Expand Widget Template”

4. Search for this:

5. Paste this code above it:

6. Now search for this:

Note that you will have more than one of this if you’re using a magazine style template. You should keep trying them one after the other and check you blog each time you implement the code to know when it works.

7. Copy this code:

If you want the buttons to appear above your posts, paste the code above <data:post.body/>.
If you prefer to have the share buttons just below your content, paste the code after <data:post.body/>.
You can as well put the code in both positions if you like.

You can change the CSS to change the look and feel if you want. Did you see the colored part of the code? That’s how the buttons are arranged. You can remove the ones you don’t like or change the arrangement.

I’ll be explaining hot to add these buttons to your blog’s regular theme and mobile version (Mobilepress precisely). The first part of the code goes into the head section of your theme.

1. Copy this code:

And paste it in your head section.

For genesis theme users, simply go to Genesis > Theme Settings > Header and Footer Scripts and paste the code.

If you’re using any other WordPress theme, install Header and Footer plugin. Then go to Settings > Header and Footer > Code to be added on HEAD section of every page and paste the code there.

If you want the buttons to appear on MobilePress, log in to cPanel file manager and navigate to …public_html/wp-content/plugins/mobilepress/system/themes/default/header.php. Edit your header.php and paste the code before the closing </head> tag.

2. The second of the code requires Post Layout plugin to work. This plugin defines how your post looks like and what you want to put before, after and even in the middle of your content. You can even use it to add adsense codes but that’s another story. 😉

Installed the plugin? Now go to Settings > Post Layout > Before the content and/or Before the content. Paste this code right there:

That’s all folks. If you encounter any trouble adding the share butons, don’t hesitate to let me know and if it works perfectly on your blog, say thank you by sharing on Facebook or hitting the Google +1 button.