How to Add Fancy Social Bookmarking Icons in WordPress Manually?

It can be pretty boring to have small social bookmarking icons which most of bloggers use at the end of their post. It will also not bring any excitement for our blog readers to click on them to help us to promote our blog post.

So, for today post, I would like to share a quick and straightforward tutorial on how can you use your preferred social bookmarking icons that you found in the internet and put them at the end of every blog post in your WordPress blog.

Here is the example of the effect that you will get when you use below tutorial on your WordPress blog.

WordPress Social Icons

If you bring your cursor on the icon, it will turn to grey.

WordPress Social Icons

Cool right?

The quick tutorial…

First, you have to open your CSS file and add below code into it. You can the code anywhere but it is advisable to put it after last code line in the CSS file so that it would be easier to delete if you want to in the future.

#share-container { background:url(images/horiz-borders.gif) repeat-x bottom; height:80px; padding:10px 0 25px 15px;}
#share li {display:inline;}
#share li a {background:url(images/social-icons.png); display:block; float:left; height:67px; text-indent:-9999px; }

#share li a#facebook {background-position:0 -67px; width:72px;}
#share li a:hover#facebook {background-position:0 -1px; width:72px;}
#share li a#digg {background-position:-72px -67px; width:81px;}
#share li a:hover#digg {background-position:-72px -1px; width:81px;}
#share li a#delicious {background-position:-153px -67px; width:83px;}
#share li a:hover#delicious {background-position:-153px -1px; width:83px;}
#share li a#stumbleupon {background-position:-239px -67px; width:87px;}
#share li a:hover#stumbleupon {background-position:-239px -1px; width:87px;}
#share li a#rss {background-position:-329px -67px; width:81px;}
#share li a:hover#rss {background-position:-329px -1px; width:81px;}
#share li a#twitter {background-position:-410px -67px; width:83px;}
#share li a:hover#twitter {background-position:-410px -1px; width:83px;}
#share li a#technorati {background-position:-494px -67px; width:67px;}
#share li a:hover#technorati {background-position:-494px -1px; width:67px;}

For the image file that I have highlighted in red is for the horizontal grey line that you can find on the top and bottom of the social icons. While for the image file highlighted in yellow, it is the most important image that you need to have for this tutorial as it is the image of the social icons.

To personalize the social icons section for your WordPress blog, you can replace both images with your own but do make sure that the images that you are going to replaced have the same size with the previous ones. If not, you may need to adjust slightly the above code.

If you do not want to use your icons and want to use the same icons like the above, you can download the image from the link below. Then, you have to upload the image into the images folder which is located under theme that you are using. (Public html>WP Content>Themes>Your Themes>Images)

Social Icons

And for the icons, you can find the icons that you love by searching them in the internet. However, you may find the icons that you will love from the post that I have posted before.

Top 13 Perfect Designed Hand Drawn Social Bookmarking Icons

Then, after you have finished with your editing in the CSS file, you now have to open the single.php file for you to place social icons in every post of your WordPress blog.

You have to find <?php the_content(); ?> inside single.php as it represents your blog post. Then, if you want to have the social icons on top of your blog post, you have to add social icons code that I am going to give you in a moment before the <?php the_content(); ?>. But, if you want it after your blog post, you have to add the social icons code after the <?php the_content(); ?>.

Download below file:

Code – Social Icons for WordPress

After you have added the code, hit save button and refresh your blog.

Now, you will have your very own personalized fancy social bookmarking icons in your WordPress blog.

The ending…

Do you have your own personalized social icons for your WordPress blog or use the icons that you get by using WordPress plugin? Which one do you prefer and will work well with you?

For me, I prefer to have my own personalized social icons. How about you?

47 Responses to How to Add Fancy Social Bookmarking Icons in WordPress Manually?

  1. I think it is always great to have our own social media button that differ from the others.

  2. Mike says:

    Dude your site is amazing. I use wordpress on two of my sites and am always looking for easy ways to make it better. Thanks a lot. I will try these social bookmarking buttons.

  3. ariff says:

    Interesting but I still love how sexy bookmarks plugin do the job. The ‘share the love’ message gives a unique touch to the social icons button bar.

  4. This looks pretty cool. I think I’ll try to put these in and see how they work. And to put alternate buttons in you just replace the image in the code right?

  5. Kushal Chap says:

    Cool idea, but I think the end result could be better but I guess that’s why its called a quick tip. And anyway using a plugin can is easier 🙂

  6. Helmi Asyraf (admin) says:

    Totally agree with you, Dana. Sometimes, if we make something exciting to our blog, our readers will also feel it.

  7. Helmi Asyraf (admin) says:

    Hi Mike. Great to see you over here and thank for your compliment.

    WordPress is totally the answer for building great site that is easy to manage.

    I’m definitely looking forward to see you again soon. Cheers!

  8. Helmi Asyraf (admin) says:

    I do agree with you but if we rely too much on plugin, it can slow down our site. That is why there are still a lot of tutorial on doing something manually are being published.

    But, plugin is totally the best for those who does not comfortable with codes.

  9. Helmi Asyraf (admin) says:

    Yes, you just need replaced the image file in the code. Good luck with your tweak. Cheers!

  10. Helmi Asyraf (admin) says:

    I agree with you but about the plugin, as I mentioned in my reply to Ariff’s comment,it can probably slow down your site.

  11. Kushal Chap says:

    I don’t think having 10 – 15 plugins will slow down your site that much.

  12. Helmi Asyraf (admin) says:

    But not everybody have 10-15 plugins. Sometimes, the plugins can reach more than 20…

    So, I think it depends on the bloggers themselves to decide what best for their site.

    What do you think?

  13. Mike says:

    I didn’t know too many plugins will slow down your site. That is very good to know since I rely on plugins a lot. Where do I find the code for that retweet button you have at the end of your post?

  14. Mike says:

    I downloaded the code to put in the single.php file but I can’t seem to open it. Is there something I need to know or some software I need to open a .rar file?

  15. Helmi Asyraf (admin) says:

    Do you mean the green button besides related post? It is button from tweetmeme.

  16. Helmi Asyraf (admin) says:

    I works fine with me.

    What you need to do is to extract the zip file, then open .txt file, copy and paste the code that you will find in the .txt file into single.php.

  17. Mike says:

    Ok I opened it. I had to download a program called winRAR. I have winZIP but for some reason it didn’t work. I have installed the button according to your instructions but I don’t see anything on the posts. I added the code after this code:

    It looks like a space has been added for the buttons but no pictures. Do I need to add pictures to the code.
    Sorry I’m sort of new at this.

  18. Mike says:

    For the retweet icon I was referring to the one next to the right of this text: “Hello there! If you are new here, you might want to subscribe to Huzzer Magazine through…”

  19. Mike says:

    I have added the sexybookmarks plugin for this function until I can get the code to work. Once I get it working I’ll delete the plugin. The last thing I want to do is slow down my site and I think the image on this site look better since they stand out more.
    Thanks for all of your posts. I will have a great site by the time I am finished with all of your great tips.

  20. Kushal Chap says:

    I was wondering how you got the facebook at the bottom of the page. It looks really awesome!

  21. Kushal Chap says:

    Just curious – How many plugins do you think will slow down a site? and how many do you have?

  22. Mike says:

    Ok I figured it out. I didn’t read the whole post. I tend to scan over things for lack of patience. This is the reason why I may use this over sexy bookmarks. Because if a site loads to slowly people will lose patience and go somewhere else. I don’t know though I may end up switching. Thanks for the options.

  23. mike says:

    I have decided to go with this over the sexy bookmarks plug in.
    I put the sexy bookmarks plug in on one of my sites and the buttons in this post on another and sent an email to a yahoo group I am in. I asked people which one they liked best and which one would they most likely use to share content. It was a ten to one vote for the buttons in this post. The sexy bookmarks seem to be too small to really catch peoples attention. I don’t just want buttons that look nice I also want people to use them. I’m going with the popular vote on this one

  24. Helmi Asyraf (admin) says:

    Good to know that. If there is still problem to put it in your blog, you can email me. I can help you out.

  25. ariff says:

    Well I suck at reading codes. I rely 100% on plugins.

    Brw, I love the bookmarking button style on your site. It was different before this right? Why not you write a tutorial or something for that

  26. Mike says:

    Thanks, I will email you this week with a question. They are on the site now if you want to take a look. If you look on my recent post you will also see the facebook imported notes and in my sidebar a little testimonial widget. All of which I got from the ideas on your site. Thanks!

  27. Kushal Chap says:

    @mike – Your site looks pretty nice with the bookmark. Although I wouldn’t go with grey, just my opinion

  28. Mike says:

    Thank you. Do you mean the gray background on the site? I definitely want to change themes. I don’t like the red font color for the archives in the sidebar either. The theme worked great when I was starting out but now that the site is growing I need a change. Something cleaner and more visitor friendly.

  29. Kushal Chap says:

    You could always change it yourself. I am pretty sure it wouldn’t be that complicated. Probably a css file.

  30. Kushal Chap says:

    Those look pretty nice.

  31. Mike says:

    I went ahead and took your advice. i changed the whole theme

  32. Mike says:

    since I changed it I have been getting a much greater response from my visitors thanks!

  33. Mike says:

    Is there a way to delete one of the buttons? The image is too long for my new site design

  34. Mike says:

    I am sure some plugins slow down your site more than others.

  35. Kushal Chap says:

    Nice I think it looks better than it was before.

  36. Kushal Chap says:

    Pretty sure you can. Are you using the sexy bookmark plugin.

  37. Kushal Chap says:

    If you are then you can go to the plugin settings and change it.

  38. Tinh says:

    I used Digg Digg plugin to do so. This way is also interesting too however, it is not easy for non-technical blogger who are new to wordpress or code

  39. Themedseo says:

    Above you mentioned icons is not more.. Have to add more icons…

  40. I do know now why your site trigger attention from a lot of people Helmi. You’re post here is awesome! I’m going for your other post! =)

  41. Helmi Asyraf (admin) says:

    Welcome to blogging world, Eri! hahahaha…..

    Go to Gravatar.com and you can have your own picture in the comment avatar.

    Goog luck!

  42. Haha.. let start with this, will the picture of me appear?
    =p

  43. Ouh no! Let me try once more! hahaha

  44. It wont work! Dush!

  45. Pingback: Add Personalized Social Icons Into WordPress Blog Manually ... | Intenseblog.com

  46. blogresipi says:

    Hi,

    Cool tutorial. I always thinking how http://ma.tt put personalized icon on his Projects at Sidebar. Really love to have something like that but don’t know how to do that.

  47. poker says:

    Great article. This was exactly what I was looking for… I tryed WP plugins: shareaholics and sociable, but they inserted social icons in my widgets and coudnt remove them soo this woud do the trick…

Leave a Reply

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