Showcase: Social Media Buttons

Social Media sites like digg and delicious have become of great importance for the traffic of a blog. Everyone wants to be dugg so every blogger adds social media buttons to their blog. But sometimes it’s very boring, all those standard ’share this’ and ‘digg’ widgets on every page. Luckily there are some designers who melted the social media links into their design. 29 creative examples:

1. CSSGlobe

Icons for Digg, StumbleUpon, Reddit and DesignFloat. Unobtrusive and stylish.

2. Snook

These two buttons got a nice place in the article footer. The ma.gnolia icon fits great with the green colour.

3. Webdesigner Wall

The social media buttons are placed well and fit great in the design. The handdrawn ‘Digger’ makes the standard digg widget a great design element.

4. Woork

Woork has an ‘Add to delicious’ button in a nice, handwritten font combined with a speech bubble with the count. The compact digg button is more standard, but it looks good in this lay-out.

5. Ars Technica

Ars Technica uses a nice homemade digg button with counter.

6. I Can Has Cheeseburger

A few cartoony buttons in a own style. Very creative!

7. I love Typography

Four small black and white buttons with smooth rounded corners. Nonobstrusive and stylish.

8. Noupe

Noupe uses three small icons. The look good, but it bothers me a bit that they aren’t transparent.

9. Lifehacker

A few really small social icons.

10. Problogger

The icons themself are not special, but the list fits great in the columned design of the article footer.

Other Examples:

Opera Development Blog

The Watchmaker Project

The Trend

The most common place for the social media buttons is the footer. However, some designers are experimenting with other places like the post title or first paragraph. Plain text links are getting more popular too. There are still a lot of standard buttons out there, but the small icons (16×16 pixels or a bit larger) are getting more common, which I think is a good development.

I hope you got some inspiration and if you have encountered other creative and nonobtrusive examples, leave a comment and tell it and I will add it to the article.

BROWSE / IN TIMELINE
« What do ancient philosophers learn us about blogging?
» How2Launch

BROWSE / IN Design Featured Showcase
« CSS Diseases: Divitis & Classitis
» Blog Action Day: Design of Charity Websites

TRACKBACKS (11)

COMMENTS (10) / ADD YOUR OWN COMMENT

I wasn’t really sure when this post ended: Each bit looked like the end with the social buttons and comment count

By Lachy on August 13th, 2008 at 2:09 pm

Thanks for this collection. It’ll inspire me for the next project.

By Rose on August 13th, 2008 at 9:23 pm

@Lachy, haha Maybe I should have written some text next to the last examples too.

@Rose, thanks

By Fabian on August 13th, 2008 at 9:47 pm

Great list, Getting these buttons to stick out, especially in the case of WebDesignerWall, is growing increasingly important for bloggers.

By Spence on August 14th, 2008 at 2:05 pm

Nice showcase …

I’ve been on the fence about adding these “buttons” to my own blog (still in development), because I believe that active users of these social media sites already have a “workflow” of their own for adding/saving posts. For example, I use Delicious all day, but I’ve never used a button on a site; I use the Delicious toolbar for Firefox.

Yet, after seeing some of these examples and how they can look clean, unobtrusive and still provide the needed visual cue, I think I will be adding them to my blog.

Thanks!

By Emily on August 14th, 2008 at 8:29 pm

@Spence, thank you . You’re right. A huge percentage of the traffic of major blogs comes from social bookmarking websites. And therefore you first need to get them to the frontpage.

@Emily, You’re definitely right about del.icio.us, but digg or designfloat is another story, if you would ask me. When I browse websites, i don’t regularly go to digg to vote for a website, but when I see a button, I’m happy to click when it is a good article. It’s about providing the user a simple way to give kudos to an article they like. I’m glad this article helped you (a bit )

By Fabian on August 14th, 2008 at 9:01 pm

Wow, this is a long one but quite interesting I must say. Digg it!

By diseno-web on October 19th, 2008 at 11:52 pm

Wow, really interesting post. It’s always interesting to see how other sites promote their social media buttons. This was pretty insightful. Personally, I use straight text links. It’s been working out for me fairly well. I thought about adding a Digg button but I don’t want the site to look cluttered. Great post Keep up the good work.

By Perspective Shift Chris on April 28th, 2009 at 4:09 am