TutorialsWordPress

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.

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:

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.

Step 5: Remember

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

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.

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

15 thoughts on “How to Add Social Sharing Icons in Your Post

  1. Pingback: Gadget Newz
  2. Nice Tips, was looking for such kind of post initially, did not find it then, so tried my own code. Now will use this article to make some changes.

  3. you know what? you just saved me a lot of time.. i’ll be changing my share buttons soon and i’ll take a look at this post. this one’s bookmarked.. thanks a lot for sharing!

    cheers!

  4. Pingback: faqpal.com
  5. A year later and I’m wondering if any of these steps or the code has changed. I’m trying to use text for social sharing links instead of icons. You can see the text at the bottom of my posts, but as of today’s date I’m struggling with this. Just thought I’d post here in case you happen to come across my comment. Thank you!

Leave a Reply to Lucas Cobb Design Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.