How To: Add custom social bookmarking in your WordPress blog posts without a plugin

5 Comments
How To: Add custom social bookmarking in your WordPress blog posts without a plugin

There are many social bookmarking plugins for WordPress out there like SexyBookmarks, ShareThis, Bookmarkify, etc, but I don’t like to use plugins when I can do things myself and exactly how I want it. Sure plugins are awesome for those who don’t know or are not interested in coding.

In this article I will show you, step by step, how you can make your own social bookmarking section that you can customize in a thousand ways. Of course, this post is for those who know at least basic wordpress/html/css/php coding and why not for those who want to learn and want to get their hands a little dirty.

So let’s begin. At first we have to create the html/php of our wordpress social bookmarking section:

If you liked this article please consider sharing it.

I only added the social networks that people usually use. You can add whatever network you want.

Then the css part:

/*--social bookmarking--*/ .bookmarking { background: #e3e3e3; width: 550px; border: 1px solid #c5c5c5; } .bookmarking p { font: normal 14px Arial, Verdana, Tahoma; color: #555555; padding-bottom: 10px; line-height: 30px; text-align: center; } .bookmarking ul { list-style: none; margin: 0 0 0 100px; float: left; } .bookmarking ul li { float: left; margin-left: 10px; } .bookmarking ul li a { width: 38px; height: 38px; text-indent: -9999em; display:block; } .bookmarking ul li.rss-bookmark a { background: url(rss-bookmark.png) no-repeat; } .bookmarking ul li.digg-bookmark a { background: url(digg-bookmark.png) no-repeat; } .bookmarking ul li.stumble-bookmark a { background: url(stumble-bookmark.png) no-repeat; } .bookmarking ul li.delicious-bookmark a { background: url(delicious-bookmark.png) no-repeat; } .bookmarking ul li.twitter-bookmark a { background: url(twitter-bookmark.png) no-repeat; } .bookmarking ul li.reddit-bookmark a { background: url(reddit-bookmark.png) no-repeat; } .bookmarking ul li.buzz-bookmark a { background: url(buzz-bookmark.png) no-repeat; } /*--social bookmarking end--*/

Here’s a nice set of free social bookmarking icons:
free web2.0 social bookmarking icons You can find hundreds of social bookmarking icons on IconFinder or by searching on Google.

Hope you enjoyed this article and find it useful. Cheers.

You may also like

 
 
  1. Extension:103 08/08/2010, 11:57 pm Reply

    i stumbled upon you post when sorting out my own theme that i am developing. i have something similar in my theme (but done a different way) problem i have is that when i try to validate the theme w3 shows errors for all the symbols in the urls (ie &, =, etc) you dont happen to know a way to make this validate do you?

    • Skat 08/09/2010, 1:55 am Reply

      have you tried to use & amp; (without the space after &) instead of &

      • Extension:103 08/09/2010, 12:59 pm

        thats works for validating, but produces a 404 on the websites when link is clicked?, dont think there is a way round this

      • Extension:103 08/09/2010, 1:30 pm

        okay, sorted it. problem was with replacing all the & with an & amp; for some reason it lets you get away with the first & and the rest need to be formed correctly. thanks for your help.

  2. Extension:103 08/09/2010, 2:01 pm Reply

    just thought you might like to know, with wordpress 3.0 now here, you dont need a url shortner function. just use the_shortlink.