Paintbits

WordPress: Social Bookmarking

WordPress is the tool of use of an increasing number of people, be it a developer, clients or just blog enthusiasts. If you fall into one of this categories you should think in optimization your WordPress experience. One way to do that is insert more functionalities into your website / blog. You should be thinking by now – Widgets! Well, widgets are one of the ways to achieve that, but do we really want to depend on widgets to implement all the features on our blog? You can, but you shouldn’t. It’s pretty obvious that after a certain amount of widgets you will see the loading time of your website increase accordingly.

This post falls exactly into this thematic that I hope to explore in future posts, WordPress functionalities without plugins. It seems harder than it is and even the typical Average Joe can do it. I haven’t yet explored much of the power to which you have access with a platform like wordpress and I can tell you that it’s simply amazing the stuff you can do with it.

Anyway, today is about Social Bookmarking, because it was exactly the part that I implemented into my theme today. For the ones that don’t know what the hell I’m talking about, by social bookmarking I mean the small links you can find in a lot of blogs to share the post with the rest of the world, i.e., Digg, StumbleUpon, Reddit… and Twitter, of course.

Social Links

What we want to achieve is what you can see in my blog, or like the picture below.

The first thing to do is to write the html we need to make the horizontal menu. It’s a pretty simple unordered list (ul) with some list items (li) and a bit of CSS.

The HTML

Like I said, the html part is pretty simple. This is what I used to created the menu.

  <div class="social_links">
  <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  </div>

We’ll go into the structure of the links later. Right now focus on the list structure, as you can see it’s a pretty straightforward unordered list. The only thing to note is the wrapping of a div with a class (social_links).

The Link Structure

The key for having the social links… is to have them linking your post and title to the aggregation website of your choice (Digg, Delicious, etc..). For this you can check other blogs that makes use of social bookmarking and see the structure of the links (a bit of WordPress back-end knowledge comes in handy here), but for most of the link, you can find the appropriate href to use in a website like here.

As an example, the link structure of the Digg Bookmarker looks like this:

<li><a class="digg" href="http://digg.com/submit?phase=2&amp;url=<?php echo get_permalink() ?>&amp;title=< ?php the_title(); ?>">Digg</a></li>

The CSS

The next thing to do is to write some CSS to style the unordered list and the list items in it. This is the CSS i’ve used to style the Social Bookmarking Menu. I won’t go much further in explanations, but essentially the rollover effect in CSS is achieved by position the background image to a negative position, this means that in the same image you should have the normal state and the hover state, like this:

The css code:

.social_links
{
clear:both;
height:16px;
margin-bottom:35px;
padding: 4px 0 15px 4px;
position:relative;
}

.social_links ul
{
position:relative;
float:left;
}

.social_links ul li
{
float:left;
list-style: none;
line-height: 16px;
padding-left: 8px;
}

.social_links ul li a
{
display:block;
padding-left: 24px;
padding-right: 4px;
height:16px;
color:#555555;
}

.social_links ul li a:hover
{
color:#f7bf29;
}

.social_links ul li a.digg
{
background: url("images/sl_digg.png") 0px 0px no-repeat;
}

.social_links ul li a:hover.digg
{
background: url("images/sl_digg.png") 0px -16px no-repeat;
}

Basically you just need to repeat the same for the other classes (just like I show here for the digg class). Nothing out of ordinary here, only thing to note is the use of the css background element position to achieve the rollover effect on the little social link icons.

The Icons

Last but not least, the icons to use in your links. I’ve used the excellent Social Network Icon Pack from Komodo Media but there are tons of other options out there, that you can use in your project. I’ll leave here a few as a starting point for your search.

Social Network Icon Pack

Link: Komodo Media

Chrome Social Icons

Link: Chris Wallace

Social Bookmark Iconset

Link: Vikiworks

For more Icons check this article from Speckyboy Design Magazine or this one from Smashingmagazine.

Conclusion

That’s it! With this you should be able to have a nice looking Social Bookmarking menu without the need to use a plugin. Even better that not having to use a plugin is that you can customize it freely to suit your theme or personal taste. The limit is your imagination.

See you soon!

5 Comments