One of the best ways to ensure the growth of your followers, fans, friends, and connections is by sharing your social profile links on your website. The following are examples of brands who use various areas of their website to display social network icons, buttons, and badges.
Social Integration Into Headers
Want to make sure no one misses your social profiles? Place them in your header like the following brands have so they are above the fold.
1. Whole Foods
Whole Foods keeps their header colors consistent by skipping the colorful icons and just using text based links.
2. Tennis.com
Tennis.com keeps it simple with small icons at the top right of their menu bar, letting visitors know they can keep up with the latest tennis news on Twitter, Facebook, and their blog.
3. Oreo
Oreo integrates bright and bold social icons into their website’s header. The social engagement doesn’t stop there though – beneath their header and 100th birthday celebration graphic are additional social profile links including three more references to their Facebook page and a Twitter activity widget. Even their footer has additional Facebook Like, Facebook Share, Twitter, and +1 buttons.
Social Integration Into Sidebars
If your business has or is designed like a blog, then you can take advantage of the sidebars as the perfect home for your social profiles like the following brands.
4. Mashable
Mashable has one of the best designed subscription areas that integrates the official buttons, badges, and plugins from the top social networks. It isn’t a surprise that they have quite the number of followers.
5. Coca Cola
Coca-Cola’s homepage is actually a giant splash page that ultimately directs you to different properties under the Coca-Cola brand about saving the arctic, freestyle machines, rewards, and other company information. Right in the middle of their homepage is a fully social mini-sidebar, equipped with a Facebook plugin and links to their other social profiles.
6. Starbucks
Starbucks homepage layout includes links to their social profiles and official social buttons / badges in their left sidebar. This way, users comfortable with automatically connecting with them can, and others can go to their profiles for a preview first before deciding to follow or become a fan.
Social Integration Into Footers
Want to display your brand’s social prowess without distracting from the main conversion points of the website? These brands have added their social links to the bottom portion of their websites and footer areas.
7. American Express
American Express uses simple 16×16 icons to display their top social networks. They even have a rotating banner that highlights their Twitter profile along with membership rewards points programs, mobile applications, and other news.
8. Toyota
Toyota, like American Express, keeps their icons small and unobtrusive, yet easy to find for those who want to connect with them socially.
9. Nikon
Nikon USA puts their social icons at the top of their website’s footer. They go a bit against conversion optimization, as these icons are larger and more likely to catch the attention of the website visitor as they scroll down to the bottom – possibly distracting them from the juicy product links below.
Resources
Want to add social icons to your own website? Here are the official and unofficial resources.
Official Social Icons and Logos
Want your social icons and logos straight from the source? Here are what the top social networks have to offer. Be sure to read all the usage guidelines accompanying each set of logos as networks are particular about their usage.
- Twitter Logos and Icons – This page includes PNG and EPS versions of the Twitter logo and bird for light and dark backgrounds.
- Facebook Logo – Facebook offers their Like button logo in EPS format, and their “f” square logo in EPS, JPG, PNG, and PDF format.
- Google+ Badge – Google+ offers their official static badge in a few sizes in PNG format.
- LinkedIn Logos and Images – LinkedIn offers their square and corporate logos with light and dark backgrounds in JPG and PNG format. They also have high resolution TIFF files for print usage.
- YouTube Logos – YouTube has a variety of logos, button sizes, and wording you can use for your website – access them by using the drop down under Need More Choices.
- Foursquare Buttons, Assets, and Icons – Foursquare has a variety of different buttons to choose from for your local business website in PNG format.
Unofficial Social Icons
If you are looking for matched sets of social icons and buttons of other varying shapes and sizes, then you’re in luck – there are tons of icon packages out there. I generally start out by doing a Google image search for social icon packs.
Then I browse through the images until I see something I like. Just be sure to read the website for additional information about the licensing and usage of the icons. Most of the time, you will find great, matching icons for free that will work perfectly for your website.
Official Social Badges and Plugins
If you want to go beyond just an icon or logo, the following are the official plugins for the top social networks. They will allow visitors on your website to be able to follow, fan, or connect with you without leaving your website.
- Twitter Follow button – Grab the official Twitter follow button here, along with additional Twitter sharing buttons.
- Facebook Like Button and Like Box – Use these to encourage people to like your Facebook fan page directly from your website.
- Facebook Subscribe Button – Want people to subscribe to your personal profile instead of a Facebook page for public updates? Use this button instead.
- LinkedIn Member Profile Plugin – Instead of just an icon to your LinkedIn profile, you can use this so that users will get a preview of your profile when they hover over the social icon.
- LinkedIn Company Profile Plugin – Promote your LinkedIn company page instead of your professional profile with this plugin that allows website visitors to follow your company immediately or hover over to see additional details.
- Google+ Badge – Use this configuration tool to create a Google+ badge for your website so people can add your Google+ page to their circles instantly.
Where do you integrate your social media profiles into your website design? Do you feel it increases engagement as well as fans and followers?
