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: social-icons In this tutorial, we will be adding custom social bookmarking icons to your WordPress blog just like the ones above.

This tutorial involves editing theme files. So, make sure you have backup of your theme before proceeding.
[tip]There is a Blogger version of this tutorial! [/tip]

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..
Please note that some of these Iconsets may require to give credit to Original Creator, so please make sure you read their Terms of Service

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">
<table border="0">
<tbody>
<tr>
<td width="68">

 <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></td>
<td width="68">  <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></td>
<td width="68">  <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></td>
<td width="68">  <a rel="nofollow" href="http://technorati.com/faves?sub=addfavbtn&add=http://bloggingwithsuccess.net"> <img src="http://bloggingwithsuccess.net/wp-content/uploads/2009/03/ technorati_48x48.png" alt="Fave on Technorati" />Fave on Technorati</a></td>
<td width="68">  <!--?php if (function_exists('simple_twitter_link')) : ?--> <a rel="nofollow" href="<?php simple_twitter_link('Reading: %title% %url%'); ?>"> <!--?php endif; ?--> <img src="http://bloggingwithsuccess.net/wp-content/uploads/2009/03/twitter_48x48.png" alt="Tweet This" />Tweet This</a></td>
</tr>
</tbody>
</table>
</div>

Replace image URLs with your own uploaded image URLs as we have hotlink protection and images won't be displayed on your blog with the above code.
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(); ?-->&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(); ?-->

[tip] the_content tag can have different attributes assigned to it in different themes. Do not worry about anything inside brackets, just look for php the_content[/tip] 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:

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 Updates:

Subscribe to our Newsletter to get freebies and latest blogging tips straight to your inbox:

Blogging With Success Logo
Join 600+ Subscribers to get latest posts delivered straight to your inbox and 4 Free Blogging Guides

About Ishan Sharma

Hi, I am a young Blogger from India. I am very passionate about blogging and also co-founder of Blogging With Success. I write about general blogging tips and WordPress. You can read other posts by me here.If you need help, feel free to contact anytime!

Comments

  1. Thanks For The Tutorial..

  2. Thanks for the information,it will come in quite handy for building backlinks to my site. Keep the info hot this helps people with business websites.

    • Okay, but where is your WordPress site? (I removed the link you left since it's a search portal). Let me know when you implement the bookmarking icons and I'll visit.

  3. Hi,

    Thanks, your step by step tutorial is exactly what I am looking for. Although by using the ShareThis, AddThis or Sociable plugin is less troublesome, I would like to add the buttons manually as I can place more attractive and eye- catching icons.

  4. I think WordPress users can just install the Sociable plugin which includes more than 50 social bookmarking sites for you to choose from. Quick and easy without much hassle.

  5. I know how important those icons for social bookmarking are to be on my blog… no matter how hard I try to understand this thing , it's like I'm reading at a blank page! I will have my webmaster check out this tutorial

  6. I was searching for such tutorial it is very important stuff for me. social bookmarking icon is very important for any blog.

  7. great tutorial.. will srching similar to this

  8. Anybody have a list of the submission links for all the social networking sites? I found most of them, but cannot for the life of me find the links for flickr and feedburner.

    HALP PLEASE!!!

    • Although Flickr.com is a social network, you need to have your photos on their site (start a photo stream) for people to bookmark it as their favorite or leave comments on your image at Flickr. So start your account. Since there are no comments on your website, you can add the flickr link for people to go there and mark favorites or comment. Point them to your album with a text link at the top of your website.

      Feedburner is not a true social network. You need to have a account, and put the subscribe button on your website! Then people can sign up for your posts as you publish them —but you don't have a blog!!!! ???

  9. thanks, this will surely aware all bloggers in the field of applying good bookmarking icons

  10. You have done a wonderful job by posting this! One of my fellow blogger said, it is really a useful tip. I have done the same job as u did, but for bloggers(blogspot) in my blog. You may check that out. It is quite simple.

    • I think I sent you here from Blog Catalog — glad you like it. Your version is similar (without Twitter), using text links and vertical separators instead of large icons. I was not able to see the actual links on your blog, just read the html in the post.

  11. Tampa Telecommunicat says:

    Good post. I will add social bookmarking icon on my blog. Thanks for helpful information.

    • You may have left the wrong site link( seems to be an ad, I removed link). Let us know when you add bookmarks to your blog so we can visit.

  12. this is for me i need to add social bookmarking tabs in my blog.

  13. Finally I have applied the icons to my site, Thanks Again for writing such a great tutorial.

    Although there is one small problem in the reddit link which you have formed in the above article.

    Instead of "http://reddit.com/submit?url=&title=&quot;

    It would be

    Instead of "http://reddit.com/submit?url=&title=&quot;

    That is instead of the_permalink() it would be the_title() as we are submitting title.

  14. hey borther please explain

    first i have to add a plugin tweet ok than add some code to style shee t and

    the codes which you provide in the section of Code to Display Icons:

    in which file i have to put it header ,style shee footer where please tell me or give me step by step guide

    please brother help me

  15. This is great. I really want to add these links to my blog. Will any of it work in blogger?

  16. Great Tutorial , I will follow it soon .

  17. Thanks a ton for such a detailed information on adding these icons. After reading this post i have just implemented all of Icons on my blog. I appreciate your efforts to share such a vital information on your blog. There is a saying the more you share more you earn.

  18. YAY! It's here!

    But OMG … I'm going to have to read this over and over to fully understand it. Code and I are not friends. At all.

    I'm so excited you posted this! Such a fantastic tutorial and resource for bloggers at every level – thank you!

    • Took some time but finally, I got it in readable form. Hope it helps you. Waiting to see new social bookmarks on your blog!

      • There's an interesting discussion going on over at BlogCatalog about social bookmarking today: http://www.blogcatalog.com/discuss/entry/why-i-go

        What are your thoughts?

        I swear, blogging just gets more and more confusing with each passing day.

        • I will still go for better user(and visual) experience which custom icons offer. SEO industry is based on predictions and noone can say definite thing about it! Go on, add icons, I have these, ProBloger has these, top blogs have these, do not worry!

Trackbacks

  1. [...] Simple Twitter Link displays a link allowing Twitter users to update their status with a link back to your post or page. (Tutorial on installing) [...]

  2. [...] Simple Twitter Link displays a link allowing Twitter users to update their status with a link back to your post or page. (Tutorial on installing) [...]

  3. [...] is an excellent article at Blogging With Success on how to add social bookmarking links to your blog. This includes using my very own Simple Twitter [...]