How to Add Attractive Social Bookmarking Icons to WordPress Theme

UPDATE: After moving to Thesis theme, we no longer use this method for social bookmarking, but it can still work for you.

Social Bookmarks are must have for any blog. They let readers share the posts which brings traffic and new readers.

There are lot of plugins that add social bookmarks to WordPress but having custom Social Bookmarks has its own advantages.

Why? Because, they are eye catching and unique . You have full control over their appearance and the images that will be displayed.

Take a look at the bookmarking icons we use:

In this tutorial, we will be adding custom social bookmarking icons to your WordPress blog just like the ones above.

What we Need?

1. Simple Twitter Link: A free plugin that generates short links for posts. We will need it for "Tweet This" button.
2. Social Icons: You will need to get social bookmarking icons for services included in this tutorial(or others if you want to include).

Finding and Uploading Icons:

While hot-linking to images will do the job, its better to upload images for fast access. You can choose any type of icons you want, just make sure they are of same size!

Here are 5 Icon Packs you can use on your blog(links will open in new tab):

1. Social Icons set from DryIcons.
2. Heart Icon Set from Smashing Magazine.
3. 3-d Social Bookmarking Icons.
4. Web 2 Icons from FastIcon.
5. Circle Social Bookmars from FastIcon..

Styling

In WordPress, go to appearance --> Editor. Stylesheet (style.css) is open by default. At the end of this file, add the following lines of code:

#Social{
background: #d4e2eb;
border: 1px solid #DDD;
padding: 5px;
margin: 5px;
}

You can edit color and borders to fit your theme. You can use I like Your Colors(opens in new tab) to extract colors from your design.

Code to Display Icons:

Here is the code that will display icons:

<DIV id="Social" align="center">

<TABLE border="0"><TBODY><TR><TD width="68">

<CENTER> <A href="http://del.icio.us/post?url=<?php echo the_permalink(); ?>&title=<?php the_title(); ? >"><IMG src="http://bloggingwithsuccess.net/wp-content/uploads/2009/02/delicious_48x48.png" alt="Add To Delicious" />Add to Del.icio.us </A> </CENTER></TD><TD width="68"> <CENTER> <A href="http://digg.com/submit?url=<?php echo the_permalink(); ?>&title=<?php the_title(); ? >"><IMG src="http://bloggingwithsuccess.net/wp-content/uploads/2009/02/digg_48x48.png" alt="Digg This post" />Digg This Post</A> </CENTER></TD><TD width="68"> <CENTER> <A href="http://www.stumbleupon.com/submit?url=<?php echo the_permalink(); ?>&title=<?php the_title(); ? >"><IMG src="http://bloggingwithsuccess.net/wp-content/uploads/2009/02/stumbleupon_48x48.png" alt="Stumble this post" />Stumble This Post</A> </CENTER></TD><TD width="68"> <CENTER> <A href="http://technorati.com/faves?sub=addfavbtn&add=http://bloggingwithsuccess.net" rel="nofollow"> <IMG src="http://bloggingwithsuccess.net/wp-content/uploads/2009/03/ technorati_48x48.png" alt="Fave on Technorati" />Fave on Technorati</A> </CENTER></TD><TD width="68"> <CENTER> <?php if (function_exists('simple_twitter_link')) : ?> <A href="<?php simple_twitter_link('Reading: %title% %url%'); ?>" rel="nofollow"> <?php endif; ?> <IMG src="http://bloggingwithsuccess.net/wp-content/uploads/2009/03/twitter_48x48.png" alt="Tweet This" />Tweet This</A> </CENTER></TD></TR></TBODY></TABLE> </DIV>

Tweet This button needs Simple Twitter Link plugin installed, otherwise no link will be there.

Here is a quick overview of the php functions used:

<?php echo the_permalink(); ?>

Gets the permalink of post.

 <?php the_title(); ?>

Gets the post title.

<?php simple_twitter_link('Reading: %title% %url%'); ?>

Makes a link to Twitter which when clicked, takes reader to Twitter home with "Reading: -post title- -short-url-" in Status message.

Adding More Services

The above code includes links to Delicious, Digg, StumbleUpon, Technorati and Twitter.

For other services, you will have to compare the code to make bookmark button using these steps:

I am taking reditt.com for this example. However, you can apply it these steps to any service available.

1. Copy a submit URL generated by any Bookmark service from page. I copied following URL from ShareThis button for this post:

http://reddit.com/submit?url=http%3A%2F%2Fbloggingwithsuccess.net%2F%3Fp%3D2701&title=How%20to%20Add%20(attractive)Social%20Bookmarking%20Icons%20to%20WordPress%20Theme%3F

2. Look for the Post URL and Title in the link. In this case, they are after url= and title= for Reditt.

3. Replace Post URL with following php code:

<?php echo the_permalink(); ?>

This code generates the URL of post reader is viewing.

4. Replace Title with following code:

 <?php the_title(); ?>

This code will generate the post title.

5. Finally, your Bookmark URL will look like following:

 http://reddit.com/submit?url=<?php echo the_permalink(); ?>&amp;title=<?php echo the_title(); ?>

This way, you can create links to any bookmarking website.

Adding Code to Theme:

This code has to added to theme so that it is displayed after every post/page. I will be covering single post, pages and homepage.

Home Page:

Go to Appearance -> Editor and open index.php page. Now, look for following code in your theme:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Do not place code after it. Instead, look for first php endwhile tag. It should look like this:

<?php endwhile; else: ?>

Place the code above it. This will add icons to all posts on homepage.

Single Posts:

To add icons to single posts, go to Appearance -> Editor and open single.php file. Look for following code in it:

<?php the_content(); ?>

This code tells WordPress to place content. We want our icons after this, so place code next to it.

Pages:

For pages, go to Appearance -> Editor -> Page.php and repeat steps as with single post.

Plugin Interference:

If you useplugins to add stuff after your posts, the plugins will place everything before the bookmarks.

Only thing you can do to solve this is check if your plugin supports manual placement. Many plugins let you place their content manually with php code and you will have to place that code after the bookmarks.

We use Yet Another Related Posts plugin and it was displaying related posts directly after post before Bookmarks. If you too use it, just go to Options and uncheck "Automatically display related posts?". Now, add this code to call the plugin after social bookmarks:

<?php related_posts() ?>

You will have to refer to documentation of  plugin to find right code.If your plugin does not allow manual placement, you are stuck with the display!

Demo:

Here are the working demos that I created by using exact code in this post:

• Home Page
• Single Post/Page

You are only limited by creativity. No need to stay with the code I used, you know where to place code, so go no and try something new and share it here with us!

If you liked this post, consider Stumbling or Saving to Delicious.

Get Blogging With Success Newsletter:

Subscribe to our Newsletter to get freebies and exclusive blogging tips.