Best practices for integrating social media into your website design

social media icons

Digital social networks have become a key source for website discoverabiilty. That makes it very important to seamlessly integrate social media into your website design.


Tip 1: Include the right social media icons as infrastructure elements

There are two primary points for infrastructure navigation, that is, navigation that remains constant from page-to-page of your website: the top and the bottom.

This is where you want to put the social media icons for the networks where people can find you. You may put them in both places if pages tend to be long; usually, one set will be smaller than the other.

This is the time to think strategically: by placing social media icons in your infrastructure navigation, you’re saying “you can get in touch with me in this space/place.” So if you never go to your Google+ page, you might not want to feature a G+ icon.

Again: these icons should link to the social media network. These are not “share” buttons!

Tip 2: Include Share Buttons

Share buttons are designed to let a website visitor share your content with her networks. Sharing (eg, Tweet, Like, Pin) should be seamless, whether we’re sharing a blog post, a great pair of shoes, a photo, or a pre-populated “quote” from a news release.

If your site is running on WordPress software (self-hosted or at, this functionality is “built in” (JetJack on self-hosted). However, there are other plugins available, including AddThis orShareThis.

Sophisticated share button applications let you customize a pre-populated tweet or post.


Tip 3: Integrate feeds where they make sense

You can embed Twitter feeds — yours or a list or a key hashtag, for example — anywhere in your site. Some people create a page that contains feeds. Others put them in a sidebar. Don’t integrate a feed from a network where you are not active.


Tip 4: Allow log in with multiple network accounts

If you want people to log in before commenting on a blog post, for example, give them multiple options. Let them log in with Disqus, Facebook, Google, Twitter, and/or WordPress. Don’t force them to create a new account on your site. Or only log in with Facebook!


Tip 5: Use analytics

Google Analytics is the granddaddy of free analytic services for your website. But you can also use analytics services to measure shares. For example, if you use a link shortening service like, you will get analytics on how that link was shared.

If you are scheduling content to share, then services like Buffer provide both analytics and scheduling.


Tip 6: Understand the networks

The networks are very different and they have different terms and conditions. doesn’t allow external ads. If you want a Facebook page for a business, it shouldn’t be registered as an individual profile; instead, an individual creates a profile for herself and then creates the page.


Tip 7: Use rich snippets and structured data to customize how your content is shared.

Snippets, in the context of search, are the lines of text that appear under each search result; their purpose is to give users a sense for what’s on the page and why it’s relevant to their search query.

There are three formats that help with SEO:

Twitter provides information about “Twitter Cards” and Facebook, OpenGraph.

The importance of feedback in web applications, a case study

Jakob Nielsen heuristics

How to make subscription activation a pain (feedback is AWOL)

When we engage with a web application, the interaction is something like a conversation.

A click is not unlike asking a conversational partner a question. We expect confirmation that the listener heard the question (a head nod, a verbal cue) and some sort of answer. Even if the answer is “I don’t know.”

This leads to a key heuristic for web (and mobile) design: making system status visible. That’s a fancy/engineering way of saying that applications need to provide feedback, to respond after we, figuratively, ask a question.

Continue reading