While much has been written about the many different ways to effectively float your message and brand across the social media space, little is being offered about the functionality of design in social media integration.
With that in mind, I’ve compiled some thoughts on how to increase your return on investment when designing and configuring social media sharing buttons.
A few best practices to always consider:
- Do NOT use social media icons to simply link out to profiles. This is not only out-dated but also minimizes the potential value of social media integration.
- As much as possible, show the number of times a piece of content has been shared or the number of Likes, or the number of followers.
- When pieces of content have very few shares, or a user has few followers there are two options: Either ask that the client round-up everyone they can to increase the number of shares, or do not display the number of Likes, followers, ect.
- When placing share icons in the masthead, or the footer (site-wide): ensure that the icons are sharing a unique URL (the website homepage, Facebook page, LinkedIn group, Twitter profile follow) and not the page they are on.
- Snippets should be customized for optimized sharing of content. By default, a share button will share the page title of a page, whereas we should be sharing, say, the product name and description.
There are two main types of uses for social media sharing buttons:
- Share this piece of content/page that I am looking at right now.
- Follow, Like, join, subscribe to the entity providing this content.
Below are different design options for both these types of buttons and where to go to configure them.
Sharing Content
- Facebook – Configuration Page
- Facebook provides three elemental options:
- Standard -This displays social text to the right of the button and friends’ profile photos below it. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
- The Button Count - Displays the total number of Likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
- Box Count -The box count displays the total number of Likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
Additionally: you can change “Like” to “Recommend” and add a “Send” button (which is like an “Email This” feature but instead emails to your Facebook friends).
- Twitter – Configuration Page
The idea behind the Tweet button is to allow people share content on Twitter without having to leave the page. It also helps to promote strategic Twitter accounts at the same time while driving traffic to your website.
- Twitter has three display options:
Twitter share vertical button.
Twitter share horizontal button.
Twitter share no count button.
Place the client’s Twitter username under “Recommend people to follow”.
- Google + – Configuration Page
Adding Google +1 to pages helps your site stand out and allows visitors recommend and share your content on Google Search.Try placing the button above the fold and near the title of the page. Visitors eyes usually move to this spot first. Also, it can also be effective to place the +1 button at the end and the beginning of an article or story.
There are 12 different size configurations available. Here are the basic content configurations:
Medium + Bubble:
Tall + Bubble:
Medium + none: (20px wide)
- LinkedIn – Configuration Page
More than 100 million members use LinkedIn to manage professional identities while building and engaging with a chosen professional network. Incorporating the network’s social media button can greatly enhance your presense among professionals.
- Three main display options:
Publishers can choose between three share button: vertical with a share counter, a smaller, horizontal button with the counter, or a horizontal button with no counter.
How To: Set Up the Buttons
Liking Facebook
Enter in the URL of the client’s Facebook page when configuring the widget.
Follow Twitter
Use the follow button (see below) rather than the share. Find the follow button here.
Going with Google
Just grab a snippet of code and your set to add Google+ button.
Share LinkedIn
Use client’s main URL to share LinkedIn button.
