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.
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.
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.
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.
<span class="socialShare"></span>
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.
Option | Description |
---|---|
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. |
Below are demos of the different configurations that can be used with the Social Share plugin. Example code is provided for each demo.
<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>
<span class="socialShare" data-orientation="vertical" data-url="http://uiframework.com" data-text="VM UI Framework - rapid prototyping and polished interfaces." ></span>
<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>
<span class="socialShare" data-showCount="false" data-url="http://uiframework.com" data-text="VM UI Framework - rapid prototyping and polished interfaces." ></span>
<span class="socialShare" data-url="http://uiframework.com" data-text="VM UI Framework - rapid prototyping and polished interfaces." ></span>
<span class="socialShare" data-countSize="large" data-url="http://uiframework.com" data-text="VM UI Framework - rapid prototyping and polished interfaces." ></span>
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.