Add Social Sharing Icons

How to Add Social Sharing Icons in Your Post

Social media has become the part of our lives. We find tons of resources, bookshelves containing information and lots of how to guides & tutorials. For bloggers and marketers it is the most important tool for sharing information with friends, clients, readers. To make this sharing thing easier many Sharing Tools are now available for the publishers. These are the great tools which decide the quality of the article and also help to share it with world.

So in this tutorial we are going to learn how to add these Social Sharing Icons in your post, to make it easy to share for all.

Step 1: Open single.php from your Themes folder

Head to your Theme installation folder and open the single.php file for editing in your favorite editor. We want to add Icons only in the single post therefore the code should also be added to this file.

Step 2: Add the Basic Code

Now add the following code just below the <?php the_content( ” ); ?> line. This line calls the content of the post.

<!-- Social Buttons -->
<div>
</div><!-- so_buttons end -->
<!-- Social Buttons End Here -->

Step 3: Get the Required Code for the Icons

Now lets add the icons. Decide which Social Sharing Icons you want to add and get the appropriate code from following links.

DesignBump

Design Float

The Web Blend

Digg

Facebook Share

Stumble Upon

TweetMeme

Reddit

Delicious

Faqpal Code:

<a href="http://www.faqpal.com/submit.php?url=<?php the_permalink(); ?>" target="_blank" title="Add it to FaqPal!">
<img src="http://www.faqpal.com/images/buttons/faqpal48x48.png" alt="Add it to FAQPal!" border="0" height="48" width="48"></a>

Step 4: Adding Buttons

Add the code obtained from above links between <div id=”so_buttons”> and </div>.

Put <em></em> tag around each code. Your code should look like this.

<!-- Social Buttons -->
<div>

<em><script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script src="http://www.designfloat.com/evb2/button.php"></script></em>

<em><script type="text/javascript">url_site='<?php the_permalink(); ?>';</script><script src="http://thewebblend.com/sites/all/modules/drigg_external/js/button.js"type="text/javascript"></script></em>

<em><script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script><script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js"type="text/javascript"></script></em>

<em><a class="DiggThisButton DiggMedium"></a></em>
<em><script type="text/javascript">
tweetmeme_source = 'Powerusers';
tweetmeme_service = 'bit.ly';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script></em>
<em><script src="http://reddit.com/static/button/button2.js"></script></em>

<em><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></em>

</div><!-- so_buttons end -->
<!-- Social Buttons End Here -->

Step 5: Remember

For Digg Button you have to add following code either in <head> or in <body>

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

In TweetMeme, do not forget to change the username in tweetmeme_source = ‘Powerusers'; field.

We are using <em> tag rather than <span> in HTML code because many of the above code itself have <span> tag inbuilt. So when you apply style to our <span> tag it gets applied to all the inbuilt <span> tags.

Step 6: Let’s add some Style

Open style.css file from your theme installation folder and add the following code for very simple and basic look.

/* Social Buttons
/* --------------- */

#so_buttons {
     width: 530px;
     height: 85px;
     background: #ddd;
}

     #so_buttons em{
          margin: 5px 10px 5px 10px;
          float: left;
     }

Do not forget that you can always change the feel and look by editing CSS file. And here is our final outcome.

For your inspiration check out the following collection of Sharing Block.

1. Blog.Spoongraphics

2. Design Informer

3. Build Internet

4. Productive Dreams

5. Tutorialzine

Written by Nikhil

Founder of Powerusers, done Engineering in Electronics Stream, Technology Geek by nature. Loves Nature and Photography. Facebook me at @nmisal and follow me on Twitter @Powerusers.

14 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>