extreme webmaster evernerve

I will show you here how to add the 4 most popular social bookmarking service icons at the end of each post on your WordPress blog. I have selected only 4 icons, because adding 10 or 20 of them isn’t that effective and looks bad.

In order for this to work, you should have the WordPress WP-EMail plugin installed and activated. That’s because I chose email as one of the options for sharing a post (which is really universal, emailing someone an article is very popular, trust me).

Upload the image with four icons to your blog

1. Right-click on the image below and select “Save Image As…” or “Save Picture As…” and save it somewhere on your computer where you will easily and quickly find it.

2. Use any program that you usually do to upload files to your web server. I use Dreamweaver. You can use any FTP program, of course.

Since this is an image that will be used in every single post on your blog, it is wise to upload it in a folder where all the other images related to your blog (headers, design elements, etc) are stored.

I chose to put it in the folder of my selected theme’s images, namely:

/wp-content/themes/Cutline 1.1-3ColumnRight/images/

In that way, I can tell my main CSS file where to find the social bookmarking icons image really easily, just by pointing to it using the following short path:

images/sharepost.jpg

Of course, if you have some other theme, you may have to use a different path, of course. I am using the cutline theme.

Adding the CSS rules for your social bookmarking sharing options

I usually add CSS styles before I insert the icons below every post, because I want them to look cool right away.

3. Click on the Presentation tab and then on Theme Editor.

4. If you are using the Cutline theme too, select the custom.css file to add new rules to it. If you are not using Cutline, your CSS file is probably style.css.

5. Add this to your existing CSS styles (just copy and paste the whole code below):

/* ... social bookmarks ... */

.custom ul#sharepost {
background: transparent url(images/sharepost.jpg) 0 0 no-repeat;
list-style: none;
width: 248px;
height: 55px;
padding: 0;
margin: 0;
position: relative;
}

.custom ul#sharepost li {
width: 55px;
height: 55px;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
}

.custom ul#sharepost li#share1 { left: 0; }
.custom ul#sharepost li#share2 { left: 65px; }
.custom ul#sharepost li#share3 { left: 130px; }
.custom ul#sharepost li#share4 { left: 195px; }

.custom ul#sharepost li a, .custom ul#sharepost li a:hover {
text-indent: -9999px;
text-decoration: none;
height: 55px;
display: block;
background-color: transparent;
}

On the other hand, if you are not using Cutline, you must throw out all the .custom classes at the beginning of each rule, for example:

.custom ul#sharepost li#share3 { left: 130px; }

should be written as

ul#sharepost li#share3 { left: 130px; }

6. Click the Update File button below your CSS editing area to save it.

Adding the social bookmarks icons below every blog post

You should still be in your blog’s Theme Editor.

7. Click on the Single Post link on the right side to access the template for single blog posts.

8. Find these lines of code (they look like this in Cutline, should be similar in other WordPress themes):

<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
</div>
<p class="tagged"><strong>Tags:</strong> <?php the_category(' · ') ?></p>


9. Copy the following code:

<ul id="sharepost">
<li id="share1"><?php if(function_exists('wp_email')) { email_link(); } ?></li>
<li id="share2"><a href="http://digg.com/submit?phase=2&url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">Digg it</a></li>
<li id="share3"><a href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">StumbleUpon</a></li>
<li id="share4"><a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">del.icio.us</a></li>
</ul>

10. Paste the code between the closing </div> tag and the <p class=”tagged”> paragraph opening tag, like this:

<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
</div>

…you should paste the code here…

<p class="tagged"><strong>Tags:</strong> <?php the_category(' · ') ?></p>

11. Click the Update File button to update the template for the single post.

And that’s it. Check any of your posts and hit Ctrl+F5 in your browser to reload your blog’s CSS file and your cool, eye-catching social bookmarking icons should appear, just like you see them below this text!

If you enjoyed this post, consider subscribing to my RSS feed or leave a comment. Share and bookmark: