How to Incorporate Social Into Your Web Design
Social media has changed the way the online world operates. Over 73% of online adults have a social networking profile and millions of businesses are adopting it every month. Facebook, with 829 million daily active users, would be the third largest country on the planet.
With this continuous growth, businesses are rushing to leverage the power of social media. Developers and designers are at the centre to deliver a social experience to users, specifically on their websites.
There are three key ways to instantly make your website more social: social page buttons, social share, and social login. It is important to understand how to incorporate them into your designs effectively.
1. Social Pages Buttons
Businesses are always reaching to grow their social followings to engage with their users. A good way to do this is to redirect users to those pages by encouraging users to follow with social page buttons.
Here are two potential approaches:
i) Add beautiful social icons that match your design and link to your social media pages. You can use pre-designed icons to save some time. You can download various social icon themes from here.
It’s recommended to use them in the web footer similar to what Zendesk is doing. Most of the users identify these icons easily and interested ones will click to go to your social media pages.
Pro Tip: Make the buttons unique. If you want them to stand out, make your design eye-catching. Responsive designs that change color as you scroll over them or increase in size always add a nice touch.
ii) Add social follow widgets such as Facebook Like, Twitter Tweet, or Google +1. The great advantage of social widgets is that users can follow social accounts with one click, while the social button requires users to click first and then go to the social media pages to follow.
Adding numbers, as you can see in the example on the right, also works as a social proof. It shows the thousands of people benefiting from following, making someone else more likely to follow or like.
Basically, you want them to be seen, so positioning depends greatly on your design where they fit into that picture. The most common spots are on the sidebar or in the footer.
2. Social Share
Social sharing is one of the most essential pieces to push your web content to social media and drive referral traffic. Users today are much more likely to trust a recommendation by a friend over the company itself, so with each social share it not only grows your brand awareness, but increases your referral rate.
You can get ready-to-go responsive sharing widgets from my company LoginRadius, or from AddThis or ShareThis. You’ll either get a relevant CMS plugin or a simple HTML code which you can easily place on your web pages.
You should place this widget next to or near the content you want your users to share. For example – place it at the beginning or at the end of a blog, or place it next to the products on your online store.
Typically whenever a user would want to share your content, there should be a sharing widget.
You may want to learn the Best practices to implement social share to optimize it on your site.
Pro Tip: Have a floating sharing widget. Not sure when your readers might share? Have the widget be in the same place no matter where they are on the page.
3. Social Login
Social login is a key social piece for a website that requires user authentication. It allows users to login with one of their already existing social accounts such as Facebook, Google, Twitter, and Linkedin.
You can add social login in two ways:
Build it in-house using open APIs of each social networks. This is very expensive and time consuming for your development team to build and maintain.
Use a third party cloud service that provides fully customizable social login. This requires no maintenance on the businesses end, can be implemented quickly and comes with lots of other social features.
Optimizing the design is the most important to ensure that it is successful. As all things, it needs to match your design and be prominent enough that users understand how simple it is for them to log in.
It is recommended to use long social login icons with proper messaging to ensure users don’t get confused with social media buttons. If you are using a traditional username/password system, you may want to place it before to encourage users to login with their social accounts.
Here are some of the best social login implementations and I’ll let you know why.
Aruba has made the social login buttons very noticeable. The entire login interface matches the websites theme and encourages users to login with one of their social networking accounts.
Easytobook puts the social login buttons first, then offers the traditional login form if a user would prefer. This is a good practice because, again, it is encouraging users to login with social and matches the website design.
My One Thing takes an entirely different approach. They have customized the widgets to match their home screen perfectly. With an all black and white website, bright colored login buttons would stand out in a bad way. This incorporates into the design better.
These are three quick ways to make your website more social and integrate them seamlessly into your design. Social media buttons, social share and social login will help socialize your website and integrate simply into your website design.
Social media is not a fad, it’s just going to continue to grow. Adding and optimizing its elements into your website will put you ahead of the curve.
About Rakesh Soni
Rakesh Soni is co-founder and CEO of LoginRadius – a social platform serving more than 120,000 businesses worldwide that reaches over 250 million users every month. LoginRadius’ primary goal is to help businesses leverage social media to engage with, understand and market to their online consumers. The company is ranked as one of the top 25 up-and-coming Canadian tech firms by the Branham Group.