How to Add and Style Share Buttons in your WordPress posts

Published On :

How much ever effort you put in Producing Quality Content, you will still find only few visitors visiting your blog. That’s because you don’t promote the posts well. It can also be put this way, you are not offering an Opportunity to them, to Promote your Posts.

To correct this issue, you need to provide Social Media Share Buttons at the bottom of your posts. Wait a second. Will people share your posts if you do not make your share buttons attractive ?

Probably Yes, if your content is absolutely awesome. If every post you make turns out to be awesome, then you won’t even need to add share buttons.

Share Buttons

Share Buttons Appearing below the Posts @ DailyBlogging

It’s obvious that; the more elegancy you add to your Share buttons, the more people like it; resulting in increased sharing of your posts. In this tutorial I will show you how to add the Share buttons exactly as it appears below this post.

I’m making this tutorial since one commentator had asked me & I have no problem in sharing the code with him or with you all. So let’s start.

Add Share Buttons below your posts

Place the below code, into the single.php file of your WordPress theme. If you are using Thesis Theme, then paste it in the custom_functions.php file. We will also require a 1×1 px transparent.gif file.

<div class="content-settings" id="share-post">
<p id="share-h3">Share, Subscribe & Bookmark</p>

<div class="share-left">
<div><a rel="nofollow" title="Tweet this post" href="http://twitter.com/share?url=<?php the_permalink();?>&text=<?php the_title(); ?>" target="blank"><img class="p-sprite twitter" width="36px" height="36px" src="http://www.dailyblogging.org/images/transparent.gif" alt="Twitter" border="0" /><span id="s-text">Tweet this Post</span></a></div>

<div><a rel="nofollow" title="Share this post on Facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank"><img width="36px" height="36px" class="p-sprite facebook" src="http://www.dailyblogging.org/images/transparent.gif" alt="Facebook" border="0" /><span id="s-text">Share it on Facebook</span></a></div>

<div><a rel="nofollow" title="Stumble" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="blank"><img width="36px" height="36px" class="p-sprite stumbleupon" src="http://www.dailyblogging.org/images/transparent.gif" alt="StumbleUpon" border="0" /><span id="s-text">Stumble It</span></a></div>

<div><a rel="nofollow" title="Digg" href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="blank"><img width="36px" height="36px" class="p-sprite digg" src="http://www.dailyblogging.org/images/transparent.gif" alt="Digg" border="0" /><span id="s-text">Digg It</span></a></div>
</div>

<div class="share-right">
<div><a rel="nofollow" title="Reddit" href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="blank"><img width="36px" height="36px" class="p-sprite reddit" src="http://www.dailyblogging.org/images/transparent.gif" alt="Reddit" border="0" /><span id="s-text">Vote it Up</span></a></div>

<div><a rel="nofollow" title="Save/Bookmark" href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="blank"><img width="36px" height="36px" class="p-sprite delicious" src="http://www.dailyblogging.org/images/transparent.gif" alt="del.icio.us" border="0" /><span id="s-text">Save on Delicious</span></a></div>

<div><a rel="nofollow" title="Subscribe to Our RSS Feeds" href="<?php bloginfo_rss('rss2_url') ?>" target="blank"><img width="36px" height="36px" class="p-sprite rss" src="http://www.dailyblogging.org/images/transparent.gif" alt="RSS" border="0" /><span id="s-text">Subscribe to Our RSS Feeds</span></a></div>

<div><a rel="nofollow" title="Subscribe to Our Email Updates/Newsletters" href="http://feedburner.google.com/fb/a/mailverify?uri=dailybloggingorg" target="blank"><img width="36px" height="36px" class="p-sprite email" src="http://www.dailyblogging.org/images/transparent.gif" alt="Subscribe to Our Daily Updates" border="0" /><span id="s-text">Subscribe to Our Daily Updates</span></a></div>
</div>
</div>

Styling the Share Buttons using CSS

I’ve used CSS Sprites technique to combine all the Social Media icons/buttons into a single image. Images have been attached below the code. If you take a closer look at the share buttons present below the post, then you’ll find that I have used some CSS3 properties like text-shadow & transition.

Copy and paste the below code in your theme’s CSS File. Again, If you use Thesis Theme, then paste it in the custom.css file.

.content-settings {
    width: 656px;
    padding: 0.5em;
    font-size: 1.57em;
    overflow:hidden;
}
#share-post{
    background: url("images/share-bg.jpg") repeat-x #eee;
    font-size: 1.45em;
    height: 240px;
    margin-top: 20px;
    text-shadow: 1px 1px #DDDDDD;
}

.p-sprite{
    background: url("images/share-sprite.png") no-repeat scroll 0 0 transparent;
    margin: 3px;
}

.twitter {
    background-position: 0 0;
    vertical-align: -19px;

}
.facebook {
    background-position: -36px 0;
    vertical-align: -19px;

}
.stumbleupon {
    background-position: -72px 0;
    vertical-align: -19px;

}
.digg {
    background-position: -108px 0;
    vertical-align: -19px;

}
.reddit {
    background-position: -144px 0;
    vertical-align: -19px;

}
.delicious {
    background-position: -180px 0;
    vertical-align: -19px;

}
.rss {
    background-position: -216px 0;
    vertical-align: -19px;

}

.email {
    background-position: -252px 0;
    vertical-align: -19px;

}

.share-left {
    float: left;
    margin-left: 15px;
    margin-top: 20px;
    width: 260px;
}
.share-right {
    border-left: 1px solid #E1E1E0;
    float: left;
    margin-bottom: 20px;
    margin-left: 50px;
    margin-top: 20px;
    padding-left: 30px;
    width: 280px;
}

.share-left a {
    opacity: 0.75;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
.share-left a:hover {
    opacity: 1;
    font-size: 1.05em;
    padding-left: 3px;
}

.share-right a {
    opacity: 0.75;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
} 

.share-right a:hover {
    opacity: 1;
    font-size: 1.05em;
    padding-left: 3px;
}

#share-h3 {
    border-bottom: 1px solid #D9D9D9;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    text-shadow: 1px 1px white;
}

#share-post #s-text {
    background: none repeat scroll 0 0 #E9E9E9;
    border-bottom: 1px solid #DDDDDD;
    padding: 5px;
    opacity: 1;
    text-shadow: 1px 1px #F5F5F5;
}

#share-post #s-text:hover {
    border-bottom: 2px solid #d0d0d0;
    background: #e3e3e3;
}

 

Images:-

Power-Up your WordPress blog with Thesis

If you liked this WordPress tutorial then you can Subscribe to Our RSS Feeds / Daily Updates.

So have you added an elegant looking Share button below your WordPress Posts ?

Share :
Tagged as : 22 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

18 Comments Comments RSS

  1. #

    Hey Mani – Can you tell me that which plugin you are using to display Read them too section below content ….

  2. #

    whoaa thanks a lot man…..this looks supercool….i copied the code in my blog 😀 finally feel relieved after getting rid of social plugins like digg digg and sexybookmarks….thanks again 😉

  3. #

    I was looking to add some social media buttons to my blog. Thanks for the guide mani…

    • #

      Manually adding codes are always better than using Plugins for every single thing.

  4. #

    thanks a lot Mani for also adding Codes for Thesis I was looking for that… I also wanted to know how to get this Floating Bookmarking Buttons as you have here on site??..

  5. Manually adding codes to the php and css files seems to be hectic. I was also looking for the same, will sure give a try to it. Thanks for sharing..

    • #

      It is hectic at the beginning. But you can use the code & learn from it.

  6. Dear Mani,
    I think you have just forget to add thesis hook, Without this how it can add? If i am wrong, Please correct me.

    • #

      This article is primarily for Non-Thesis Users.
      Add the below code in your custom_functions.php (Thesis Users)
      function post_footer_author() {
      if (is_single())
      { ?>
      COPY-PASTE THE CODE HERE

  7. #

    Hello Mani!

    Thank you for your article. I had a question for you, I am running the Enterprise Theme off of Genesis for Studio Press, and wanted to used your codes. Is it wise to add a few other bookmarks, or do you feel that it is better to keep the list of options short?

  8. #

    Social sharing plugins are increased my blogs page load, So i need to replace it :)

    am sure css sprites will reduce loading time

  9. #

    really cool .. Thanks for sharing .. but!! .. where am I supposed to put the code ?? ..
    I have the single.php opened right now and I have no idea where to put the code !! ..
    Help please :(

    I’m waiting for your answer !!
    thanks again for sharing :)

  10. Nice Post. I have Build a New Blog and I will apply all these codes there.

  11. #

    This is really useful i am searching for the , buttons but now i can give them my own style by changing the css you uses in it, i hope it will works fine…..

  12. #

    Okay, maybe I am not searching for the right thing lol. I do not need to find a wordpress plug in to let people SHARE my site. I need a wordpress plugin that let’s me add MY Twitter and Facebook “icon” to MY site. Make sense?

  13. #

    I started a new blog recently and I will apply these codes!! Good one!!

4 Trackbacks

  1. By Add An Elegant on March 8, 2011 at 9:43 pm
  2. By DailyBlogging – Wrap-up of Posts for March 2011 on April 9, 2011 at 12:35 am
  3. By HowTo Add Buffer Button in WordPress on April 26, 2011 at 7:46 pm

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.