How to Add Social Networking Icons to your Blog

// Blogging, Cool Links, Design, Design Resources, Graphic Design, Graphics, Icons, Photoshop, RSS Feeds, Rss Feed Icons, Social Network, Social Network Icons, Wordpress, Wordpress Plugins, webdesign, webmaster

If you want to add social bookmarking icons or links to the bottom of your posts here are a few different ways you can do it with out a plugin. You can of course use one of the many Wordpress plugins like Sharethis or Social Bookmarking RELOADED.

However, if you want to add something a little more unique to your posts to get people’s attention you can use the examples from Catwhocode.com and Hongkiat.com by creating an image map banner at the bottom of your posts using CSS and PHP. You can find out how by reading the tutorial by wphacks.com or one of the other tutorials listed below..whichever one works for you. I tested out the last one and it worked great for me and was easy as pie.

It’s a lot easier then you might think…examples below..

Read: How To: Add Social Bookmark Links to your Theme

There’s a couple other hacks I found based on the same concept.

Read How To: Build An Image Map with CSS

Read How to: Add Big, Eye-catching Social Bookmarking Icons Below Every Post on Your WordPress Blog Easily

Or you can use this one that I made for a darker background…it’s not a black background it’s a dark blue grey but it turned out pretty cute I think.

If you need help finding icons to use in your image map no fear there are plenty of them on this site so just check out one of my icon posts to find the perfect social networking icon for your blog. You might also try Icofree.com. Good Luck and let me know if you have any questions or need help, just leave a comment to this post…

Make the world a happier place and share this link.

Read the rest of the post for the code.

Just upload your image..and then Add this code to your style.css page:

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

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

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

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

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

Then add this to the bottom of your post in the single.php page:

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