Add a Stylish Set of Share Buttons to WordPress

on
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 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. 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 WordPress without a plugin
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:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>
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:

<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p>
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.


Comments

Post a Comment