Tips for Integrating Social Media Sharing on Your Website

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 round-up everyone you 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 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).

Facebook standard

      • 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.

Facebook count button

        • 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.

Facebook vertical count button

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).

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 vertical button

Twitter share horizontal button.

Twitter horizontal button

Twitter share no count button.

Twitter button

Place the client's Twitter username under "Recommend people to follow".

Adding Google +1 to pages  helps your site stand out and allows visitors to 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 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:
Google+ medium count button

Tall + Bubble:
Google+ tall button

Medium + none: (20px wide)
Google+ medium button

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 presence among professionals.

            • Three main display options:

Linkedin button display options

Publishers can choose between three share buttons: 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.

Facebook enter URL

Follow Twitter

Use the follow button (see below) rather than the share. Find the follow button here.

Twitter follow button

Going with Google

Use the Google+ Badge Configuration tool to generate code.

  • Google+ badge configuration

Share LinkedIn 

Use client's main URL to share LinkedIn button.

Linkedin URL to share

10 Ways to Integrate Social Media Whitepaper

Share this post

Comments on this post

  1. Good tutorial on how to do social media buttons for blogs and sites! Very useful cause I’ve been looking on how to do this for quite some time. I’m sure many people will learn from this. I did and surely, they’ll also learned!

  2. Awesome ideas for social media integration tips. Very organize and step by step process tutorials. Surely, many people will learn from your post. Keep up the good work friend. Thanks 🙂

Comment on this post


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978