Our Theme Blog
How to Add Compact Share Buttons to Your WordPress Blog Posts
During my Internet business blog redesign last year, I decided to add a bunch of compact share buttons to the top of my blog posts. I absolutely love them as they don’t take up a lot of space and help promote the sharing of my posts.
A few of my readers have asked how I got those buttons and whether or not I used a plugin, so I decided to write a tutorial on how you can add the same buttons to your blog! There are no plugins required, however you will need to feel comfortable editing your theme’s CSS and post page. Let’s get started…
1. Grab Button Codes
You can easily grab a share button for each of your favorite social networks by following the links below. For this tutorial, we’ll be using the compact counter (shows number of shares) buttons. Remember, avoid using plugins. When asked what type of website the code is for, choose the “Normal” website version.
BLOG ENGAGE: http://www.blogengage.com/profile_promo.php (scroll down for plain code)
DELICIOUS: http://delicious.com/help/savebuttons
DIGG: http://about.digg.com/button
FACEBOOK: http://www.facebook.com/advertising/?share
NJUICE GOOGLE BUZZ: http://njuice.com/button/
REDDIT: http://www.reddit.com/buttons/
SPHINN: http://sphinn.com/widgets/
STUMBLEUPON: http://www.stumbleupon.com/buttons/
TWEETMEME: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/
2. Customize Your Button Code:
We will want to customize some button code in order to make sure they work with WordPress and open in new windows (if possible). Here’s the final code I used for all the buttons I have on my blog:
BLOG ENGAGE:
<script type="text/javascript">
submit_url = "<?php the_permalink(); ?>" target="_blank";
</script>
<script src="http://blogengage.com/evb/button.php"></script>
submit_url = "<?php the_permalink(); ?>" target="_blank";
</script>
<script src="http://blogengage.com/evb/button.php"></script>
Notes: I added the blank target in order to force the link to open in a new window.
DIGG:
<script type="text/javascript">
digg_bgcolor = '#FFFFFF';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
digg_bgcolor = '#FFFFFF';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
Notes: This is actually Digg’s older button code. I tried using their new one, but it never appeared on my posts. For this code, I customized the background of the button, selected the compact version, and instructed the link to open in a new window.
FACEBOOK:
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Notes: No changes.
NJUICE GOOGLE BUZZ:
<script type="text/javascript">
var njuice_buzz_size = 'small';
var njuice_buzz_share = 'reader';
</script>
<script type="text/javascript" src="http://button.njuice.com/buzz.js"></script>
var njuice_buzz_size = 'small';
var njuice_buzz_share = 'reader';
</script>
<script type="text/javascript" src="http://button.njuice.com/buzz.js"></script>
Notes: I selected to use the small compact counter with the little image. I also instructed the button to share posts on Google Reader rather than through Gmail.
SPHINN:
<a href="http://sphinn.com/submit?url=<?php echo get_permalink() ?>" target="_blank"><img src="http://www.YOURDOMAIN.com/images/sphinn.png" border="0" alt="Sphinn" title="Add to Sphinn"></a>
Notes: First, I added the WordPress Permalink code to the URL submission per instructions I found on http://bloggerdesign.com/227/sphinn-button/. I then ensured the link would open in a new window with the blank target. Next, I saved their image to my own server and referenced it in the image source.
STUMBLEUPON:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
Notes: No Changes.
TWEETMEME:
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_source = 'YOURNAME';
tweetmeme_service = 'TinyURL.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
tweetmeme_style = 'compact';
tweetmeme_source = 'YOURNAME';
tweetmeme_service = 'TinyURL.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Notes: There are lots of customizations you can make to the Tweetmeme code, which you will see on their button page. First, I specified I wanted the compact button. Next, I gave it a source (YOURNAME). In my case, my source is “fresheventure.” Make sure to add your twitter name to that section. Finally, I chose a URL shortening service for the button (TinyURL).
I do not use the Delicious or Reddit buttons on my blog, but the customizations needed for those should be minor to unnecessary.
3. Add Buttons to Your Blog Posts
You will want to add each button code to your index.php file in order to display them on your posts. Add them just before “the_content” or “the_excerpt” to display them right above your post.
4. Style Your Buttons
If you were to just add these button codes as is to your WordPress Theme, each would appear on top of the next, creating a vertical line of share buttons and pushing all content below it further down the page. In my case, I wanted each button to appear next to one another – neatly lined up. In order to achieve this look, I had to style the buttons.
We’re going to do some basic CSS styling. The first thing we want to do is wrap each button with its own div and class and then wrap them ALL with one div like this:
<div id="sharebuttons">
<div class="facebook">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="twitter">
<script type="text/javascript">tweetmeme_style = 'compact';tweetmeme_source = 'fresheventure';tweetmeme_service = 'TinyURL.com';</script><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div class="buzz">
<script type="text/javascript">
var njuice_buzz_size = 'small';
var njuice_buzz_share = 'reader';
</script>
<script type="text/javascript" src="http://button.njuice.com/buzz.js"></script>
</div>
<div class="digg">
<script type="text/javascript">digg_bgcolor = '#FFFFFF';digg_skin = 'compact';digg_window = 'new';</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
<div class="stumble">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
</div>
<div class="engage">
<script type="text/javascript">
submit_url = "<?php the_permalink(); ?>" target="_blank";
</script>
<script src="http://blogengage.com/evb/button.php"></script>
</div>
</div>
<div class="facebook">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="twitter">
<script type="text/javascript">tweetmeme_style = 'compact';tweetmeme_source = 'fresheventure';tweetmeme_service = 'TinyURL.com';</script><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div class="buzz">
<script type="text/javascript">
var njuice_buzz_size = 'small';
var njuice_buzz_share = 'reader';
</script>
<script type="text/javascript" src="http://button.njuice.com/buzz.js"></script>
</div>
<div class="digg">
<script type="text/javascript">digg_bgcolor = '#FFFFFF';digg_skin = 'compact';digg_window = 'new';</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
<div class="stumble">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
</div>
<div class="engage">
<script type="text/javascript">
submit_url = "<?php the_permalink(); ?>" target="_blank";
</script>
<script src="http://blogengage.com/evb/button.php"></script>
</div>
</div>
Now we can reference each div in our stylesheet and style each button individually. This is important as each button comes with built-in styles. We need to override those to make sure they appear as we want them. Here’s the code I added to my style.css sheet:
First, I want to make sure the main box that contains all of the buttons is the width of my content area. I also want to add a little margin below it so it doesn’t touch content that follows it. Also, by specifying a height, I ensure the box is displayed separately from following content.
#sharebuttons {
margin: 0px 0px 25px 0px;
padding: 0px;
width: 635px;
height: 25px;
}
margin: 0px 0px 25px 0px;
padding: 0px;
width: 635px;
height: 25px;
}
Next, I want to style each button div. The measurements I chose are purely based on what fits on my blog. Feel free to adjust them to your design. To ensure the buttons display next to each other, use the “float:left” and “display:inline” references. Also, make sure you add the ”important” reference – this will override any styles that the button scripts are calling.
.facebook {
float: left;
margin: 0px 28px 0px 0px !important;
padding: 4px 0px 0px 0px !important;
display: inline;
}
.twitter {
float: left;
margin: 0px 0px 0px 0px !important;
padding: 5px 0px 0px 0px !important;
display: inline;
}
.buzz {
float: left;
margin: 0px 0px 0px 8px !important;
padding: 5px 0px 0px 0px !important;
display: inline;
}
.digg {
float: left;
margin: 0px 0px 0px -35px !important;
padding: 5px 0px 0px 0px !important;
display: inline;
}
.stumble {
float: left;
margin: 0px 0px 0px 5px !important;
padding: 4px 0px 0px 0px !important;
display: inline;
}
.engage {
float: left;
margin: 0px 0px 0px 30px !important;
padding: 3px 0px 0px 0px !important;
display: inline;
}
float: left;
margin: 0px 28px 0px 0px !important;
padding: 4px 0px 0px 0px !important;
display: inline;
}
.twitter {
float: left;
margin: 0px 0px 0px 0px !important;
padding: 5px 0px 0px 0px !important;
display: inline;
}
.buzz {
float: left;
margin: 0px 0px 0px 8px !important;
padding: 5px 0px 0px 0px !important;
display: inline;
}
.digg {
float: left;
margin: 0px 0px 0px -35px !important;
padding: 5px 0px 0px 0px !important;
display: inline;
}
.stumble {
float: left;
margin: 0px 0px 0px 5px !important;
padding: 4px 0px 0px 0px !important;
display: inline;
}
.engage {
float: left;
margin: 0px 0px 0px 30px !important;
padding: 3px 0px 0px 0px !important;
display: inline;
}
And that’s it – You should now have a line of compact counter share buttons displayed on your WordPress blog!
Hi Keller – I just added these buttons on my blog and have one question. How do I prevent them from showing on my homepage? It looks the buttons are assigned to the two posts on my homepage, but it it’s not.
Hi Jack!
Did you figure it out? I checked your website and everything looks right to me. Let me know if you still need help.
Yup! Thanks!
Keller,
How can I make the first image indented a little bit? Right now it’s against the edge of the page and I was hoping to move it in a bit similar to where the post title starts.
Any advice?
Thanks by the way this is amazing!
Thanks Brian! You will want to play with the margins and padding to align the images perfectly with your theme. Here’s how they work:
padding: 0px 0px 0px 0px
what this really says:
padding: 0px-top 0px-right 0px-bottom 0px-left
The numbers control measurements in a clockwise rotation. So, to add some padding to the left on the first image, you will want to adjust the last 0px. Same goes for margins. Does that help?
Also, you may want to adjust the main div that contains all of the images by placing some padding on it’s left measurement.
Hi,
Thanks for sharing your code. I was planning on adding these buttons, and wasn’t looking forward to having to code it myself, since I hate using plugins. Now I can use some of your code and modify it to fit where I want it.
Glad I could help! I’m with you – if I can avoid using a plugin, I go for it.
Thanks Keller that worked perfect!
It looks good Brian!
I’m having trouble with my buttons. Could you take a look http://www.ben-lang.com? Thanks so much!
Hey Ben! I watched your news video – so cool. Congratulations on your success. I wish I had started my Internet businesses at your age. I started at 22 years old.
I can see your buttons at the top of your posts and they seem to be working fine. Can you tell me what issues you’re experiencing specifically?
Keller, this is a great tutorial.
I added these and then pulled the code until I could clarify something.
Currently I have to plugins installed (BlogEngage and TweetMeme) and want to replace them with your social media bar. But when I add the code it seem to lose the votes I already have. TweetMeme loses SOME of the current tweets and BlogEngage loses them all.
Did I do something wrong or is there a way to get those to show up?
Thanks.
Humm… I’m honestly not sure why some of your tweets and engages would disappear. The buttons should all pull data from the same place (Tweetmeme and Blog Engage), so the numbers should be the same.
I suggest you contact TM and BE and see if they have any recommendations on this. I know TM offers a support forum here: http://help.tweetmeme.com/forum/ You may want to post this issue and see what they have to say. Basically, you’re just replacing the plugin with the compact button code, so everything should work fine.
Also, Brian from BE is always willing to help.
Unfortunately, I’ve never experienced this before, so I’m afraid I can’t be of much help. If anyone else has experienced this and has a solution, please chime in!
Thanks anyway. The Twitter badge showed the same as the other badge minus one vote. The BE badge was blank. :/
I’ll see if I can find an answer.
Seriously. I know how to spell “two.” I swear.
Does this work if my blog is hosted on WP?
Do you have access to your theme’s files? If so and you are allowed to edit them, this should work. It’s all just code :).
Keller–
This is a great tutorial and I appreciate all of the references to the various sites.
I am curious, however, why you dislike using plugins. While they do have disadvantages, they do allow you to have functionality that survives changing your theme. I am curious as to what you think are the biggest disadvantages to using plugins.
–Daryl Lozupone
With each plugin you add to your WordPress powered site, you slow down the load time a little. My rule of thumb is, if I can easily code it myself, I will. If not, I will rely on a plugin.
Also, just because a plugin is available doesn’t mean it’s reputable. The code may not be well written and it could even open the door for security issues.
Thanks for your feedback Daryl!
Agreed. Plugins do slow down load time.
And also, agreed. Code quality of the plugins out there varies greatly.
I always look at my clients and whether they change themes regularly or if they stick with one. If they do stick with one, then hand coding the changes directly to the theme files works just fine. If not, then they have to redo those changes every time they change themes.
Thanks for your reply!
–Daryl Lozupone
This is literally exactly what I’ve been looking for! Except the only thing is that i’m using Blogger. Is it possible to somehow manipulate the CSS code to fit a Blogger theme? If not that’s totally fine. I’m just a little tired of looking at the floating sharebar that I have currently installed. Thanks!
All of the above code can be used on any type of website – it is not written specifically for WordPress. It should work fine on your Blogger site.
Oh, except for the < ?php the_permalink(); ?> on the Blog Engage button and the < ?php echo get_permalink() ?> for the Sphinn button. Those will need to be replaced with whatever code Blogger uses to identify a page link.
Hi Keller,
Just want to say that I`ve been looking for something like this for a while now – so I really appreciate you posting it :)
I`m trying to add this in myself, no coding skills and seem to be having some problems.
My site is here – http://www.executivedigest.co.uk/allen-soralio-photographer/ (I do`nt know what CSS to change to sort out the spacing or the alignment).
Also how would I possible get the Share buttons placed under the pictures, as opposed to above them? Maybe with a thin grey line underneath them to add to the sleek effect!
Thanks for your help, and great website by the way – do you happen to design bespoke WP themes also?
Oliver
Thanks Oliver.
To change the alignment of each individual button, you will want to tweak the padding, like this line:
.facebook {
padding: 4px 0px 0px 0px !important;
}
Try different numbers until you get each button lined up properly. The numbers control measurements in a clockwise rotation. So, to add some padding to the top on the first button, you will want to adjust the first px. Next would be right, bottom and finally left like so:
padding: 0px-top 0px-right 0px-bottom 0px-left
If your images are inserted into posts, you won’t be able to move the buttons directly below them. The only way to do that would be to use custom field images and then place the buttons underneath that code.
To add a line underneath the buttons, try this:
#sharetop {
margin: 0px 0px 25px 0px;
padding: 0px;
width: 635px;
height: 25px;
border-bottom: 1px solid #999999;
}
Hope this helps!
hi,
just wondering in your example you have #sharetop and div id=”sharebuttons”, shouldn’t they be the same?
Thanks
Will
They should. Thanks for the catch. I’ve updated the code. On my blog, I use two rows of share buttons and had assigned “sharetop” to this one. Forgot to change it for the tutorial.
Hi,
is it possible to update the facebook share button to use the new like button instead?
Thanks
Will
Yes, simply replace that code and alter the padding in the stylesheet to make sure it lines up correctly.
Hey Keller, finally implemented this great code. I still have the problems mentioned above, but hopefully Brian can help me work it out.
Thanks again.
Thanks Alison!
I wish I knew what the issue was. I have seen this problem on many blogs I’m starting to think it’s a theme related issue. For some reason on the home page on a few blogs the votes for each specific article isn’t counted. There has to be some tag or insert missing on these themes. Perhaps it’s simply added to others… I really don’t know.
If you find out, let me know.