Flexible and Easy Social Sharing Plugin with jQuery - jssocials

jssocials is a flexible and easy jQuery social share plugin which lets you share web content and links with custom social buttons & counters on social networks. 

Features:

• Facebook, Twitter, Google plus, Linkedin, Pocket and Pinterest are supported.
• Custom social button shapes and icons.
• 4 built-in themes.
• Custom social media icons.
• Show share count inside/outside the social button.
• Responsive design.

Basic usage:

1. Load the core stylesheet and a CSS theme in the head section of your web page.

<link rel="stylesheet" href="dist/jssocials.css">
<link rel="stylesheet" href="dist/jssocials-theme-flat.css">

2. Load the Font Awesome for the social media icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

3. Load the jQuery jssocials plugin after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jssocials.js"></script>

4. Initialize the plugin to generate basic social share buttons that adapt to the screen size by default.

$("#share").jsSocials({
  shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest"]
});

5. Global settings.

$("#share").jsSocials({

  // An array of share networking services
  shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest"],

  // URL to share
  url: "http://url.to.share",

  // text to share
  text: "text to share",

  // whether to show the text on the share button
  showLabel: true,

  // "self | blank | popup"
  shareIn: "blank",

  // whether and how to show share count
  // true|false|"inside"|function(screenWidth)
  showCount: true,

  smallScreenWidth: 640,
  largeScreenWidth: 1024,

  resizeTimeout: 200,
  
});

6. Social share settings.

shares: [{

  // Twitter settings
  label: "Tweet",
  logo: "fa fa-twitter",

  // twitter username
  via: "",

  // twitter hashtags.
  // separated by comma.       
  hashtags: "" 

},

{

  // Facebook settings
  label: "Like",
  logo: "fa fa-facebook"
},

{
  // Google Pluse settings
  label: "+1",
  logo: "fa fa-google-plus",
},

{
  // Linkedin settings.
  label: "Share",
  logo: "fa fa-linkedin",
},

{

  // Pinterest settings.
  label: "Pin it",
  logo: "fa fa-pinterest",

  // // a url of media to share
  media: ""               
}]

7. Public methods.

// destroy the plugin
$("#share").jsSocials("destroy");

//  set options
$("#share").jsSocials("option", "showCount", false);

// refresh sharing control
$("#share").jsSocials("refresh");

Change log:

v1.5.0 (2017-04-30)

• JS update

v1.4.0 (2016-10-11)

• Fix alignment of buttons on multi-row display

v1.3.1 (2016-09-01)

• Shares: Simplify googleplus count url
• Shares: Add Pocket share

v1.3.0 (2016-08-19)

• update.

v1.2.1 (2016-05-18)

• Core: Set share strategy function context to share
• Shares: Add Telegram share

v1.2.0 (2016-04-04)

• Core: Add shareStrategies "self | blank | popup"

v1.1.0 (2015-10-16)

• add WhatsApp as build-in social network share
• Add shareOption method to get/set share options

v1.0.0 (2015-10-16)

• Core: Add 'on' config option to be able to attach event handlers to share links

v0.2.0 (2015-05-18)

• Shares: Fix facebook likes count url

2015-05-09

• add email share.

---

This awesome jQuery plugin is developed by tabalinas. For more Advanced Usages, please check the demo page or visit the official website.