Social Share

Overview

Many social media sites offer sharing widgets that websites can embed on their webpages. However, embedding JavaScript from multiple 3rd-party sites can cause a number of issues.

Issues With 3rd-Party Widgets
  • Visual Consistency - The sharing widgets don't share the same design, making a layout appear cluttered and inconsistent.
  • Layout Difficulties - Many of the sharing widgets will be encased in an iframe or otherwise be difficult to position on the page.
  • Slow Page-loading - Waiting for responses from multiple sites can cause the page to load slowly and render in a non-user friendly manner.
What Social Share Does Differently

With the Social Share plugin, we've attempted to address the above issues. Social Share has consistent design, multiple layout options, and loads and renders quickly. If you are displaying share counts, the widget is rendered first, the counts are retrieved asynchronously, and the count is updated when it is successfully retrieved.

Supported Social Networks

The Social Share widget currently supports 5 social networks: Twitter, Facebook, LinkedIn, Reddit, and Pinterest. More networks may become available in the future, but we will limit expansion to the more popular networks.

In particular, we will be looking at adding support Google Plus and StumbleUpon in future versions. However, we have had some technical challenges with the StumbleUpon API and the Google Plus button does not yet have an offical API.

Usage

Default usage of the Social Share plugin is extremely simple: just add the class socialShare to any <span> element. By default, a horizontal button list with buttons and share counts for Facebook, Twitter, LinkedIn, Reddit, and Pinterest will be injected into the element. If no URL is provided, the URL defaults to the current page.

Example Code
<span class="socialShare"></span>

Options

Social Share has multiple options that allow you to customize the number and order of the social networks used, whether or not to show the share count, the layout of the buttons, and what style of button should be displayed.

All options are passed in as an HTML5 data- attribute and none of them are required.

Social Share Options
OptionDescription
data-url The URL of the page to be shared and for which counts should be retrieved. Defaults to the current page.
data-text The text to be auto-filled on network submissions. Defaults to the current page title.
data-networks An comma-separated ordered list of networks to be displayed. Options include: facebook, twitter, linkedin, reddit, and pinterest. Defaults to all networks.
data-showCount A boolean value on whether or not to show the share count. Defaults to true.
data-countSize Determines if the count widget should be small and inline or large. Options are small and large. Defaults to small.
data-orientation Controls the layout of the widget list. Options are horizontal and vertical. Defaults to horizontal.

Demos

Below are demos of the different configurations that can be used with the Social Share plugin. Example code is provided for each demo.

Vertical With No Share Counts
<span class="socialShare" 
	data-showCount="false" 
	data-orientation="vertical" 
	data-url="http://uiframework.com"
	data-text="VM UI Framework - rapid prototyping and polished interfaces."
></span>
Example
Vertical With Share Counts
<span class="socialShare" 
	data-orientation="vertical" 
	data-url="http://uiframework.com"
	data-text="VM UI Framework - rapid prototyping and polished interfaces."
></span>
Example
Vertical With Large Share Counts
<span class="socialShare" 
	data-orientation="vertical"
	data-countSize="large" 
	data-url="http://uiframework.com"
	data-text="VM UI Framework - rapid prototyping and polished interfaces."
></span>
Example
Horizontal With No Share Counts
<span class="socialShare" 
	data-showCount="false" 
	data-url="http://uiframework.com"
	data-text="VM UI Framework - rapid prototyping and polished interfaces."
></span>
Example
Horizontal With Share Counts
<span class="socialShare" 
	data-url="http://uiframework.com"
	data-text="VM UI Framework - rapid prototyping and polished interfaces."
></span>
Example
Horizontal With Large Share Counts
<span class="socialShare" 
	data-countSize="large" 
	data-url="http://uiframework.com"
	data-text="VM UI Framework - rapid prototyping and polished interfaces."
></span>
Example
Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.