/SocialShare

Primary LanguageJavaScript

Social Share

The Social Share module provides an interface for generating social network sharing URLs. Social network share URLs will share content based on the Open Graph protocol.

You can compose social network share URLs in two ways:

  1. Imperatively with Javascript
  2. Declaratively with HTML

See the Demo Page for examples.

##Dependencies

##Install

###Bower

$ bower install --save SocialShare

Include the javscript file in your web page:

<!DOCTYPE HTML>
<html>
  <body>
    //...
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/SocialShare/socialshare.js"></script>
  </body>
</html>

###NPM

$ npm install --save socialshare

Include the javscript file in your web page:

<!DOCTYPE HTML>
<html>
  <body>
    //...
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/SocialShare/socialshare.js"></script>
  </body>
</html>

##Supported Social Networks

##Usage

### Javascript

$("#sharebutton").on("click", function() {
    SocialShare.share("twitter", {
        url: "share-page.html",
        text: "Check out this website",
        hashtags: "SocialShareTool, Tooling",
        via: "twitterUserName"
      });
});

####API

#share

SocialShare.share(socialNetworkName, [paramOptions])

The share method is used to generate a social share url which contains a query string of passed parameter keys and values. The generated social share url will open in a pop-up window for the user to share the page and content to their social network timeline.

The paramOptions object is optional. By invoking the share method with only a socialNetworkName value, the social share url will generate with the respective social network's required parameters and default to the current page's url.

#####Arguments:

socialNetworkName paramOptions Notes
"facebook" u URL to shared page; value is relative from the location.href of the page
"twitter" text Tweet text
url URL to shared page; value is relative from the location.href of the page
hashtags Comma-separated list of hashtag values without the preceding # character
via A Twitter username to associate with the Tweet
related Suggest additional Twitter usernames related to the Tweet as comma-separated values
"linkedin" url URL to shared page; value is relative from the location.href of the page
mini An argument who's value must always be: true
title The title value that you wish you use
summary The description that you wish you use
source The source of the content (e.g. your website or application name)
"googleplus" url URL to shared page; value is relative from the location.href of the page
hl The language code for the locale to use on the Google+ sharing page
"pinterest" url The URL that hosts the source image (sometimes this URL is the same as the media url)
mediaurl the URL of the media being pinned. This shows up on the Pinterest board.
description Description of the pinned image (optional)

  • For each social network, the url parameter will be auto-populated from the location.href of the page when not explicitly set.

  • Any url parameter set will be concatenated to the location.href value of the page.

  • All parameter values are URL encoded.

  • See Goolgle+ language codes for available values.

### HTML Markup

<a href="javacsript:void(0);" share-url="share-page.html" share-text="Check out this website" share-hashtags="SocialShareTool, Tooling" share-via="twitterUserName" class="share-twitter">
  <span>Share on Twitter<span>
</a>

#####Markup Requirements:

Set the social network via class. Each social network name must include the share- prefix:

<ANY class="share-facebook">...</ANY>
<ANY class="share-twitter">...</ANY>
<ANY class="share-linkedin">...</ANY>

Set URL parameters via share- prefixed attributes:

<ANY share-text="title value" share-hashtags="hashtag1, hashtag2" class="share-twitter">...</ANY>

The data-* attribute is also supported:

<ANY data-share-text="title value" data-share-hashtags="hashtag1, hashtag2" class="share-twitter">...</ANY>

#####Resources: