55 Examples of Beautifully Integrated Social Media Links in Web Design

By / Jun 21, 2010 / Inspiration

I believe that everybody already understands the importance of social media, and incorporating it into a web design. To get the attention of your viewers to your social media links you need to use both strategy and good taste. To design a good call-to-action social media icon/link you need to think about its positioning, its color, approach, style, size, everything. You also need to keep in mind that you want to get the attention of your viewers to the social side of your website without distracting from what’s important, such as the content. In my opinion, a good social media link is one that you have no trouble to finding and when you find it, you like what you see.

To give you some ideas of how you might integrate social media links in your next project, I’ve put together a collection of 55 Examples of Well Integrated Social Media Icons in Web Design. There should be plenty here to inspire you.

What’s Up Cupcake?

socialicons01

siteicons01

Jason Howmans

socialicons02

siteicons02

Brett Chaney

socialicons03

siteicons03

dConstruct2010

socialicons04

siteicons04

The Waiting Room

socialicons05

siteicons05

Sky’s

socialicons06

siteicons06

Francesco Molezzi

socialicons07

siteicons07

veerle’s blog

socialicons08

siteicons08

danscotton

socialicons09

siteicons09

coolandtheguide

socialicons11

siteicons11

acosmin.com

socialicons11

siteicons11

Midtsommerjazz 2010

socialicons12

siteicons12

Taming the Wolf

socialicons13

siteicons13

The Pineapple Thief

socialicons14

siteicons14

precinkt

socialicons15

siteicons15

Aran Down

socialicons16

siteicons16

taami berry

socialicons17

siteicons17

brizk

socialicons18

siteicons18

The Many Faces of

socialicons19

siteicons19

Daniel Marques

socialicons20

siteicons20

Jonas Eriksson

socialicons21

siteicons21

Creative Soapbox

socialicons22

siteicons22

Poolga

socialicons23

siteicons23

the ship and the sea

socialicons24

siteicons24

Ricky Ryan

socialicons25

siteicons25

madewithlove

socialicons26

siteicons26

fullyi llustrated

socialicons27

siteicons27

freshlimesoda

socialicons28

siteicons28

monkeyworks illustration

socialicons29

siteicons29

Work at Play

socialicons30

siteicons30

AgencyNet 2.0

socialicons31

siteicons31

Healthy Harvest

socialicons32

siteicons32

shout

socialicons33

siteicons33

Crush + Lovely

socialicons34

siteicons34

The Walk

socialicons35

siteicons35

ok.cogaoke.com

socialicons36

siteicons36

Blissfully Aware

socialicons37

siteicons37

Andrew Greig

socialicons38

siteicons38

Oslo Internasjonale FilmFestival

socialicons39

siteicons39

Truf Creative

socialicons40

siteicons40

Behind my Scenes

socialicons41

siteicons41

Oliver James Gosling

socialicons42

siteicons42

Carl Rosekilly

socialicons43

siteicons43

They Make Apps

socialicons44

siteicons44

Behind the Websites

socialicons45

siteicons45

Vegas Uncorked

socialicons46

siteicons46

Foxtie

socialicons47

siteicons47

Zee

socialicons48

siteicons48

R/GA

socialicons49

siteicons49

Nocturn

socialicons50

siteicons50

Carsonified

socialicons51

siteicons51

EnviraMedia

socialicons52

siteicons52

ectomachine

socialicons53

siteicons53

Tapbots – Pastebot

socialicons54

siteicons54

Creanto

socialicons55

siteicons55

Sources:

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

  • http://aext.net AEXT.NET MAGAZINE

    Awesome showcase! Social media is the most important part of a web design nowadays. The more attractive integration, the more subscribers a website will get.

  • http://www.dataqweb.eu DataQ Web

    I like all of them, but I especially like Daniel Marques’, the one with the bookshelves. You could miss it at first if you don’t pay attention

  • http://www.favouritemedia.co.uk/blog Johny Favourite

    I really really enjoyed this. Completely unique post and very inspirational.

    I love how these design all fit and shows a real high level of care and attention to the overall work on show.

  • http://aardling.com/ Stijn

    Some folks really put some work into their integration, but I don’t see what’s so beautifully original about some of those other plain text links.

  • http://www.vectorfly.it Vectorfly

    Amazing showcase! I believe attracting integration between websites and Social Media links is the main thing, and this is how I integrated them in my website: http://yfrog.com/4rmywebsitep

  • http://webdeziners.blogspot.com Sharif khan

    Simply awesome. All are new to me. Nice post.

  • http://www.wahhadesign.com Blake Baxendell

    Our local basketball teams website had some good ones too. Used Penent Flags for the design.

    http://www.goseadawgs.com

  • http://www.jordanwalker.net Jordan Walker

    Very nicely integrated.

  • chris

    Love the post. I recently came across these icons… http://www.faucethead.com . Nice to see people thinking more than just dropping a logo on the page.

  • http://5to8design.net Chris Fernandez

    Love to see how people integrate these into their websites!

    Some are cute and others are very practical (& cool).

    thanks =)

  • http://www.camlikesdesign.com Cam Hilsman

    nice collection!

  • http://www.crearedesign.co.uk Amelia Johnson

    These examples of Social media links are really interesting, especially in the way they are designed to work with the design of the website. It makes the designer seem unique and the viewer is more likely to subscribe. It’s a very inspiring post.

  • http://www.WSIQS.com Gregg Towsley

    Wow, what a great collection of Social Media Marketing logos! I will bookmark it and retweet it, NICE WORK!

  • http://evajansen.com/ Eva

    I like this showcase; very inspiring!

  • http://www.aptdesignonline.com Brad

    Beautiful integration of icons and links. Really some well-thought out design on this list.

    I spent some time putting in Social Media links on this website: Writing the World

  • http://mawebsitedesign.com boston website design

    That ipad application websites looks simple and cute.We could design like this.

  • http://www.webdesign-norwich.com Keir Harness

    thanks for the post, some great examples of what can be achieved, I love the twitter blue bird.Were these designed concepts or sourced from plugins?

  • Clyde Billingsley

    I love all of them but i think your missing one

  • http://philwebservices.wordpress.com/ Philwebservices

    Great list! nice idea of having it! Thanks for the post!

  • http://www.starcontentwriters.com Amber – SEO Content Writer

    These are awesome and seamless. I think the integrations look like part of the site versus just having these random social media icons.

  • http://www.bonetgraphicdesigns.com/blog/ MC Bonet

    Nice collection. I really like the way What’s Up Cupcake, Daniel Marques and Fresh Lime Soda integrated the social media in their websites.

  • http://knowledgecity.com Jae Xavier

    awesome integration!

  • http://www.littleboxofideas.com Sneh Roy

    Loving this showcase! Very creative :-) Thanks for sharing!

  • Nicolás

    Thanks for the post! Great list! This site is another example. http://www.nicolasbulacio.com

  • http://populerlinkler.blogspot.com/ deniz

    very nice examples for inspiration thank you

  • http://www.nocturn.ro alex tass

    I must thank you, again, for including our website, http://www.nocturn.ro, in this nice selection of examples, even thou we’ve used the social media links in a quite simple manner. You’ve chosen some really nice examples. Thanks for sharing.

  • lamourbaby

    those ones are beautiful, but this one could fit: http://caramelcafe.hu/ what do you think?

  • http://www.innovatics.de Innovatics

    Great Designs. Nice to see how creative people get with integrating social media into their sites. Inspiring stuff.

  • sam

    Some great ideas, loving the design from Daniel marques. Wonder how long something as unique as that took

  • http://www.invisibleinkwebdesigns.com/weblog Luke Sheppard

    Some of them are nice but quite a lot of them are pretty uninspiring – I’m a bit surprised you’ve incuded simple text links to social media sites in the examples, although I guess you might deem them to fit with the style of the site.

  • http://twitter.com/los140depedro Pedro

    Daniel Marques’ is definitely one of the most original.

  • http://www.attitudedesign.co.uk Attitude Design | Graphic Design Portfolio

    Some great examples here, I like the ‘What’s up Cupcake’ set.

  • kris

    Bookmarked! Thank you.
    Here’s another one you may like. http://thissuitcase.com/

  • Raquel Brandim

    Breathtaking…
    Parabéns Giselle!! Valeu a pena scroll a seleção toda!
    Bom trabalho e bom final de semana!

  • http://www.carriecorcorcoran.com Carrie

    I enjoyed these examples. I have a custom pink Twitter bird and custom LI icon. I think mine rivals any of these so take a peek and judge for yourself.

  • http://www.naumanakhtar.com Nauman Akhtar

    “Midtsommerjazz 2010″ is cool and so easily understandable, +10 for it :)

  • http://www.sno.travel ski holidays

    superb resource for inspiration

    we’re adding the whole gamut of social functionality to our site and examples like the terrific bookshelf really make us want to do something original…
    … hope to plump for something more than glossy buttons…

  • http://www.ilusionas.com ilusionas

    Great examples! My website is another example that could interest you. Maybe… 😛

  • Sue Brettell

    Bravo! This is awesome. Most showcase galleries list a selection of icons sets ….useful, but all rather samey.

    This is the first time I’ve seen someone showcase superb examples of how they can be imaginatively integrated consistently with overall branding and visual identity.

    With the awesome variety of social media icon sets available, it’s a shame that so many sites use the same popular sets.

    Please please give us more showcases like this. :)

  • http://www.craigmcpheat.co.uk Craig McPheat

    Great resource for inspiration thanks!

  • http://blog.codesignstudios.com Dennison Uy

    Some of the examples aren’t that special but there are real gems in this list. Excellent article.

  • http://designbuddy.com Derek Kimball

    I was actually more impressed with the quality of the sites themselves. An awesome collection of inspiration. I must say, I look forward to WDL in my email inbox. Keep it up.

  • http://www.blinddrop.com/ Web site Design Calgary

    It’s important that social media icons need to stand out a bit from the overall design. In some senses, making the icons match your own site design is disregarding their branding in favor of making it look pretty.

  • http://www.gikmedia.com GIK

    Really like the way that some of the logos actually become part of the overall theme of the site will be looking to adapt this is some of my own sites.

  • http://www.revolutionweb.com Printing Company

    Nice Resources. I like it

  • http://emdashcreative.com Em Dash

    Some of these are interesting from a design perspective, but others treat the social media links like another navigation link in the same style as the rest of the site – hardly innovative or worth including on this list.

    Does anyone else find it ironic that designers, traditionally ever so concerned with maintaining their own brand design, are willing to mutilate facebook and twitter’s icons and logos? I mean, part of the point of including a link to facebook or twitter using an icon is to be instantly recognizable to the viewer…

  • http://www.megastarmedia.com Sandy Rowley

    Superb collection of creative website designs!

    Motivating people to click through and actually engage in conversations on social media profiles is more of a challenge. Although these designers clearly have a gift for visual design, most of their FB pages had no communication on their walls.

    I think social media marketers are still experimenting with which demographic will engage on these social networks and which need to focus efforts elsewhere.

    Great list of beautiful web design.

    Sandy Rowley

  • http://superbwebsitebuilders.com/ Howard Steele

    ‘What’s Up Cupcake?’ social media bar blows my mind! Great!

  • http://www.redcherryinc.ca SEO Calgary

    ‘What’s Up Cupcake?’ social media bar blows my mind! Great!

  • http://www.redcherryinc.ca SEO Calgary

    Motivating people to click through and actually engage in conversations on social media profiles is more of a challenge. Although these designers clearly have a gift for visual design, most of their FB pages had no communication on their walls.

    I think social media marketers are still experimenting with which demographic will engage on these social networks and which need to focus efforts elsewhere.