WordPress Tutorial: Add Social icons to every post without using plugin

by R Zaman on May 22, 2009 · 1 comment

We all know the importance of social networks in the field of promotion. So why not make your post more promotable by your readers by adding social share icons? And of course your reader will also be helpful. They can Bookmark their fav post by them. Why don’t think about your reader’s benefit instead of yours?

There are some good plugin to do so. But not using plugin will increase your websites performance.

I’m writing this WordPress Tutorial for those guys who want to make their site more user friendly. You can simply add social icon bar to your every post by doing the following trick.

Open up your single.php file from your theme folder. Copy the following code and paste it within the loop. It’s standard to paste the code after the content (<?php the_content ).

<div>
<a href=”http://feeds2.feedburner.com/WpDite/”><img src=”/images/feeds.png” alt=”bookmark” style=”float: left; margin-left: 5px; margin-right: 8px; border: none;” /></a>
<a href=”http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”><img src=”/images/delicious.png” alt=”bookmark” style=”float: left; margin-right: 8px; border: none;” /></a>
<a href=”http://www.digg.com/submit?phase=2&url=<?php the_permalink() ?>&title=<?php the_title(); ?>”><img src=”/images/digg.png” alt=”bookmark” style=”float: left; margin-right: 8px; border: none;” /></a>
<a href=”http://www.reddit.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”><img src=”/images/reddit.png” alt=”bookmark” style=”float: left; margin-right: 8px; border: none;” /></a>
<a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”><img src=”/images/stumbleupon.png” alt=”bookmark” style=”float: left; margin-right: 8px; border: none;” /></a>
<a href=”http://www.technorati.com/faves?add=<?php the_permalink() ?>”><img src=”/images/technorati.png” alt=”bookmark” style=”float: left; margin-right: 8px; border: none;” /></a>
<a href=”http://www.furl.net/storeIt.jsp?t=<?php the_title(); ?>&u=<?php the_permalink() ?>”><img src=”/images/furl.png” alt=”bookmark” style=”float: left; margin-right: 8px; border: none;” /></a>
</div>

Then Download the Social Icon Set and place the images in your themes images folder ( /images/ ).

You are done! Your social icon is added in your post. Every time your reader reads your post, they will be able to share it also.

Note: You need to change your feed address from the first line of the code. (http://feed2.feedburner.com/WpDite/ —-> Your RSS feed Address)

Icon Set: IconsPedia