Flexible and Easy Social Sharing Plugin with jQuery - jssocials
File Size: | 64.8 KB |
---|---|
Views Total: | 19182 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.