Share the Love: Social Bookmark Designs in Blogs

The other day it came to my attention that there are so many beautiful social bookmark icon sets around but no blog seems to use them. Now, that has to […]

The other day it came to my attention that there are so many beautiful social bookmark icon sets around but no blog seems to use them. Now, that has to do a lot with the fact that many publishing platforms require a certain amount of programming knowledge in order to personalize the sharing buttons.

We use the Sexy Bookmarks WordPress Plugin, simply because it is really nice and it works well. For the Retweet Button we use the Digg Digg Plugin which is easy to integrate but not really stylable.

It would be really great to have some kind of plugin, that let’s you just add your own buttons, I bet that would increase the creativity of the social bookmarking designs found in blogs.

During my search for some examples of designs, I found this set that I thought, shows some nice ways of engaging the reader to share the post or bookmark it. Although the opinions about in which way the user should be engaged to share a post at all might differ (some blogs don’t offer any social bookmarking options), I think that it is ultimately a very important tool for any blog.

Before I start with the collection, I would like to share one more thing with all of you that use the Digg Digg Plugin for the integration of the TweetMeme Button. It took my some time to find out, why the retweet would contain @tweetmeme instead of our Twitter name “codrops”. Ultimately I found the solution:  in the settings we chose the “Integration Type” to be “none” because we called the PHP function manually. Even if you put your TweetMeme source RT name, this will cause the retweet to contain the @tweetmeme instead of your name. (I actually don’t know if that issue is fixed by now, I just noticed that a lot of blogs seem to have that problem.)

And here comes the collection! Enjoy!

http://www.blog.spoongraphics.co.uk


This is a really nice way to show those quite “ugly” sharing buttons: wrap them in a box so that they look similar and homogeneous.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

http://www.hongkiat.com


I really like the big type, fits nicely to the blog.

http://cellphones.org


This one is definitely my favorite, it is very unique and it is completely adapted to the style of the blog.

http://designinformer.com

http://buildinternet.com

http://10steps.sg


Although we are stuck to the designs and “identities” of the sharing buttons, we can make the them interesting by surrounding the buttons with some nice design. This is a good example of how to do it.

http://www.9lessons.info

http://www.minervity.com

http://creativeoverflow.net

http://desizntech.info

http://designora.com

http://www.sitesketch101.com

http://www.hairstylesdesign.com/blog

http://www.tutorialboard.net

http://www.outlawdesignblog.com

http://www.fuelyourcreativity.com


Now, this one is really nice. You have to try it out by hovering, it makes a really nice effect.

http://www.clickonf5.org

http://www.onextrapixel.com

http://www.threestyles.com

http://blogof.francescomugnai.com

http://www.inspiredm.com


Here we have an alternative way of showing the social bookmarking options. It saves space in the blog and it is always accessible.

http://d-lists.co.uk

http://www.littleboxofideas.com


This one is charming, but it also shows the problems many of us face: using different plugins and manual insertions do not let us adapt the style like we would like to.

http://www.designussion.com

http://www.psdeluxe.com

http://designmess.com


I like the approach of integrating the social bookmarking options as part of the post, like the comment section. It looks clean and it gives the sharing buttons a functional appearance.

http://www.dezinerfolio.com


Here we have a really nice and clean sharing “button”. When clicked, a sharing box pops out. This is a good example on how to integrate the social bookmarking option elegantly and discretely.

http://www.tutorial9.net

http://games.venturebeat.com

http://www.geeksucks.com

http://www.webresourcesdepot.com


This one is beautifully integrated under the title of the blog post.

And that’s it!

These were the designs that I found nicely fitting to their blog styles. Although I am not terribly excited about the level of creativity used, I understand why it is so hard to adapt this very crucial part of a post to our design needs.

What do you think? Is it important to bring some attention on the social bookmarking option in a blog? Would you as well like to have some more freedom in adapting the style of sharing buttons? Or do you think it should not be obtrusive in any way? Have you seen some interesting sharing button styles that you would like to add to this list?

I hope you liked it and got inspired!

You might be interested in some sets of social bookmarking icons:
21 Sets of Free Social Bookmarking Icons for Your Blog
72 Sets of Free Social Bookmarking Icons
75 Beautiful Free Social Bookmarking Icon Sets
Social Bookmarking Icons Collection
70 Free Social Media Icon Sets
30 Amazingly Creative Social Bookmarks Icon Sets
108 Free Black Magic Marker Social Bookmarking Icons
40 New and Trendy Free Social Media Bookmark Icon Sets

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 11

Comments are closed.
    • @Colin, thank you a lot! That makes it a lot easier to add your own icons. We will check it out! Cheers, ML

  1. Great collection of links… thanks for sharing!

    Why not include some left vertical share buttons? Notice a few sites doing the effectively…

  2. Really nice collection here.

    Given me some good ideas of how to display my own icons.

  3. Nice Post love the Hairstylesdesign.com one looks great and bubbly makes me wanna share even thought the article might suck hehe 😉