35 Examples of Well Integrated Social Media Links in Web Design

35 Examples of Well Integrated Social Media Links in Web Design

Implementing social media links into a website can be very important in helping you get a more professional look. In many cases this can make a huge difference when looking at how many actually follow your different profiles, again reflecting on how much your work gets shared and your traffic. If it fits in really well with the rest of the design, it can underline the professional look of your work and be quite a piece of art to have a look at.

35 Examples of Well Integrated Social Media Links in Web Design

35 Well Integrated Social Media in Web Design

This time we’ve decided to go ahead and browse hundreds of websites (and then more) to find some examples of websites that we thing have succeeded in implementing their social links in a clever and good looking way.

We’ll show you images of the websites and a closer look at the social media links as well.

Matt Brett
Matt Brett’s brown website, with its modern style grunge feeling, has everything nicely implemented at the very top.

Matt Brett Preview

Matt Brett Links

Rockatee
The Rockatee design website has a really cool style and designer Maleika Esther Attawel has managed to make the icons in the top right corner fit in with a grungy rounded look.

Rockatee Preview

Rockatee Links

Andrina Photography
This website has a very unique look. When you first land on the site you see a lot of clouds with a crumpled paper look. By scrolling down you’ll see that there’s an ocean underneath, with some sailboats and even the «fail-whale» from Twitter. Twitter and Facebook links are found underneath one of the boats.

Andrina Preview

Andrina Links

Justdot
This one made it to the collection as it’s a cool, though hidden, way of following on Twitter. The website has a nice bunch of handwritten style elements and is definitely unique and well worked through. What we found a bit extra cool was the fact that the blue bird sitting on the flask to the right is actually a link to their Twitter profile.

Justdot Preview

Justdot Links

Erik Iggmark
Swedish designer Erik Iggmark has a website that with a subtle halftone pattern gives a feeling of a red thread through the design no matter where you are at the website and which slide you’re looking at. If you scroll to the bottom you’ll find a very handy social links and contact area that is tidy and fits in well with the rest of the site.

Iggmark Preview

Iggmark Links

Hey Indy
This website has a retro look with a washed-out color scheme. At the bottom you’ll find the social links and contact area that looks very tidy.

Heyindy Preview

Heyindy Links

Designing Monsters
This typography styled website has a clean look that will appeal to everyone who loves smart and simple designs. Everything is nicely centered. Scroll a little bit down and you’ll find a social links section letting you get in touch with both of their designers. Clean and smart!

Designing Monsters Preview

Designing Monsters Links

Who is Leon
This website’s pleasant handwritten style has the social links nicely drawn in in the middle of it all. Great integration.

Leon Preview

Leon Links

Ribena
Ribena has a website with a fairly ordinary design, but score a huge point for their integration of the Twitter, Facebook and YouTube links that are nicely put on a wooden sign in the top right corner.

Ribena Preview

Ribena Links

IconMoon
This website is definitely simple and clean looking with inset letters that also are applied to the social links that you’ll find at the bottom. Plus point for no scrolling required.

Iconmoon Preview

Iconmoon Links

What’s Up Cupcake
This pink website has a couple of good-looking elements going on. The social media links are (of course) pink and their semi-handwritten style makes them blend in and stand out at the same time.

Cupcake Preview

Cupcake Links

Intrinsic Studio
This is another website with everything centered. A clean design with the social links on the top. They’re subtle as if they’re see-through stickers on the wall background, but still easy to see. Fits really well with the rest of the design.

Intrinsic Preview

Intrinsic Links

Monterail
The links to Facebook and Twitter on this website have a nice hand-drawn style that relates well to the illustration they’re using.

Monterail Preview

Monterail Links

Cornerd
This nerdy website has a bunch of monsters that set the tone for the design. The social links and contact area makes use of those same colors and has a unique and playful look.

Cornerd Preview

Cornerd Links

Makeshifters
The Twitter bird has gotten its own look and there’s a sheep hanging from a Facebook balloon. Pretty original and a fun contribution that shows great creativity and skills.

Makeshifters Preview

Makeshifters Links

NeedStyle
This website has a nice grid background that shines through all of the elements. The social links are somewhat «hidden» in the middle of the about-section, but they look good and fit perfectly with the rest of the website.

Needstyle Preview

Needstyle Links

Empire State Recordings
This website has a very unique look. It’s grungy and polished at the same time. The social media links aren’t very easy to find but blend in well and are cleverly implemented into the footer area. You’ll see the Facebook F and the Twitter T that change to their blue colors on hover over.

Empire Preview

Empire Links

Marcello Brivio
Visiting self-proclaimed web-ninja Marcello Brivio’s website that will make ninjas look less scary and give you a line up of social media links that show you the web-ninja can be found pretty much everywhere! The links have a subtle and straight forward design and fit in well.

Marcello Preview

Marcello Links

Born with Design
Click on the package in the middle to get access to some of the really cool elements of this website. If you click on «black book», you’re getting one of the most unique social links and contact pages we’ve seen. It looks good, it’s different and absolutely memorable. Once you start looking around it’s easy to understand why this website has gotten several awards. Great work!

Born Preview

Born Links

Me in Motion
The Me in Motion website has a good-looking grunge design. The social links are placed in the top left and the black font makes them stand out well on the white «paint». It does look good and you won’t have to keep searching for them.

Motion Preview

Motion Links

Denise Chandler
The clever social media links area is found right underneath the header. Great use of the existing color-scheme and hand-drawn style for that personal look.

Denise Overview

Denise Links

Wild Bill’s Soda
This website has a cool western look with a lot of stuff going on. Social media links can be found in the right bottom corner on a wooden sign that is part of the whole design.

Wildbill Preview

Wildbill Links

Sonny T.
This website has a clever minimalist home page where all parts have their own square. We really like how Twitter and Facebook links stand out and are part of the design, both at the same time. Smart and simple!

Sonny T Preview

Sonny T Links

nGen works
Social media links are integrated into the header in a nice way. They blend in with their subtle look, but still no problem seeing them right away.

Ngen Preview

Ngen Links

Blossom Graphic Design
Social media buttons are found in the top right and stand out using the same color that can be seen in the logo and other elements.

Blossom Preview

Blossom Links

Simple.art
If you scroll down on this website, you’ll find contact options + Twitter in the left bottom corner with a clever design.

Simpleart Preview

Simpleart Links

Pro Blog Design
These icons are a bit bigger than normal, but still fit in nicely. You’ll find them at the right top, tidy put together in their own box.

Problog Preview

Problog Links

Minervity
Minervity’s grunge meets hand-drawn and glossy look is very unique. Find the icons at the top right behind the logo/header.

Minervity Preview

Minervity Links

Robbie Manson
Robbie Manson has included social media links (social stalkery) nicely in the bottom left in the footer. Clean and professional look.

Manson Preview

Manson Links

Ryan Scherf
At the left of this website you’ll find a bookmark that includes social media links. Works very well with the organic/grunge feeling of the website.

Scherf Preview

Scherf Links

Carol Rivello
Carol Rivello has a website with some retro-style illustrations both in the header and footer. The footer also contains social media link icons and navigation.

Rivello Preview

Rivello Links

Limpfish
The limpfish website has a strong hand-drawn theme that is also used with the social media links that are found in the middle to the right. Original and cool.

Limpfish Preview

Limpfish Links

Daniel Marques
This website has a strong focus on the social media links and the icons are «right in your face» on the top shelf of the navigation bookcase. Creative solution that looks very clean.

Marques Preview

Marques Links

Freshlime Soda
Freshlime Soda have made their own twist to the icons. They’re found in the middle at the bottom and have been made into soda cans. Fun and creative!

Freshlime Preview

Freshlime Links

Work at Play
Work at Play has made a very original version with words only. This can be found in the footer as one long sentence to the right. Stands out and shows that simple can be a great way of doing it.

Work Preview

Work Links

What Do You Think?

How important is it to make your own twist when it comes to social media link icons? Which is your favorite? Do you have any good examples to share? We’d love to hear your opinion in the comments. And don’t forget to share this article!

Hilde is a Norwegian girl with a great passion for everything related to design, freelancing, PhotoShop, photography, Illustrator and more. Running her own website and work with mainly Graphic Design and Business Consulting besides article writing.

Comments

  1. / Reply

    Great Find & interesting read. Importance of social media is getting higher day by day. Placing the social media links where it catch the users eye is really important & this post is good inspiration in doing that.

  2. / Reply

    well… the presented items are great examples of well done work with the social networks buttons implementation. Thanks the author for such captivating selection

  3. / Reply

    Making social media buttons custom for a website can be fun. These are some really good examples of custom buttons. Sometimes I think people integrate them a little too well though and make them difficult to find. I’ve seen websites where I could barely find their Twitter or Facebook button because it blended so well with the layout, that they looked like part of the layout. I think it’s important to remember they are still buttons and they should stand out at least a little bit and say “Click Me”. Great article.

    • ZogWee,
    • May 7, 2011
    / Reply

    Wow ,that is some really cool stuff indeed.

    http://www.anon-toolz.at.tc

  4. / Reply

    Thanks for citing Maleika Esther Attawel’s Rockatee. She is a stunningly talented designer and a good friend of mine to boot. I can always learn something from looking over her work.

  5. / Reply

    What a nice list Thanks you onextrapixel you make me inspire and gain more knowledge

  6. / Reply

    Good examples ! Thinking about putting my social media icons elsewhere than the bottom of the pages…

  7. / Reply

    Daniel Marques has an awesome website, he deserved to be on the list and Hilde thanks for sharing such a good inspirational stufff… xox

  8. / Reply

    Its very refined list. Great work Hilde

  9. / Reply

    Great Find & interesting blog.Thank u

    • Jakk,
    • May 10, 2011
    / Reply

    Integrating sociability within your website is an incredibly important step towards word of mouth marketing (or word of mouth traffic, as it were).

    After running many sites on WordPress, I have come across a great deal of good plugins which can help people integrate sociability in to their website as a complete novice. A lot of these plugins I have used since day 1 for my sites.

    6 years blogging professionally has taught me that your header is the most important part of your websites navigation, and your social icons are the most important part of retaining your visitors.

  10. / Reply

    These sites all integrate social media icons into their designs very well. It’s nice to see that the designers take the time to produce a unique icon which fits with their site, rather than using some of the free icons available. Sites like Justdot and Makeshifters have completely integrated the social media icons to their site, so they’re no longer icons, they’re actual illustrations contributing to the overall impact of the site! There is a risk of doing it this way, as some non designers visiting the site may not realise what they are for, but I still love the idea of using social media icons in this way. It’s amazing how many ways you can design a social media icon for the same style of website, I really like the grunge and sketch style icons. I’ve got some new inspiration for my next social icons.

  11. / Reply

    Some fantastic sites on display here, particularly FHOKE with the fixed left column layout it reminds me of the old days of using frames to build websites!

  12. / Reply

    Great Post,
    Some really talented designers their! such inspiring and moving designs, just makes me want to open up photoshop and have a go my self! A very intresting list!

    Thanks For posting!

  13. / Reply

    Coool., it’s so inspiring !

  14. / Reply

    Love to see how people integrate these into their websites!
    Very creative Thanks for sharing!

  15. / Reply

    Very nice designs. Does anyone have any idea of where i can find moving social icon designs?
    Similar to the one on OneExtraPixel – but for the homepage?

    • kyrul,
    • December 6, 2011
    / Reply

    i like the limpfish design .nice and clean !

  16. / Reply

    Great Designs… inspire me to create new things… Thanks for uploading it. Eagle View Creation.

  17. / Reply

    Nice designs :)

  18. / Reply

    Really cool stuff here. I particularly like the denise chandler website. The spinning ferris wheel is a nice touch and I like some of the rollover effects.

  19. / Reply

    Love the Me In Motion site great design and a good bit of interactivity to keep people on the site

  20. / Reply

    I like these designs. The Justdot is kinda of cool. Great Post.

  21. / Reply

    Design and placement indeed play a very important role in determining conversions. But there are several other ways to get good results. Plugins like Twitter box for example that allows readers to tweet about your post without having to leave your site can be very effective for encouraging tweets.

  22. / Reply

    Good collections of social media websites. May be i can derive some inspirations in implementing social media on my website in an even better way

    • Ed,
    • November 30, 2012
    / Reply

    Awesome. These guys sure know something about (web)design. Now about these “folow me” icons… honestly, I don’t see the point here, except for competitors, perhaps?

  23. / Reply

    Dear writer, these are good but lots of things have been changed since 2011, when this post was added. I suggest to repost this with some more latest trends of social media, that would be really helpfull.

    thanks anyway.

  24. / Reply

    Love the Me In Motion site great design and a good bit of interactivity to keep people on the site thanks you nice very good..

    • bsr,
    • January 26, 2013
    / Reply

    We are founding here great example but i am searchin demo which type u put on your social on page

    • Linda,
    • February 9, 2013
    / Reply

    Wow, these designs are so creative. I’m so used to seeing the ‘usual’ corporate looking ones – but these are amazing. Fantastic work by the designers!!

    • Ankita singh,
    • June 6, 2013
    / Reply

    Really cool stuff here. These are such a good design.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.