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.
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.
5. Tutorialzine
15 Comments
Very nice, good share.
Thanks Darrell, we need Faqpal button too!!
Great post on social sharing buttons. You make it so simple to follow. Thank you.
Thanks Lucas, I am glad that you find it useful and easy to understand.
Nikhil, I will email you the code for our button.
WOW! That would be great…
🙂
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.
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!
Thanks Nikhil. I was looking for this
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!
How do I add this to Thesis? My theme doesn’t have a single.php file.
Thanks,
Adrienne
Hi,
I like your post…
Website development company in Indore