Simple jQuery Plugin For Custom Social Share Buttons SocialJS - Free Download Simple jQuery Plugin For Custom Social Share Buttons - SocialJS

Free Download Simple jQuery Plugin For Custom Social Share Buttons – SocialJS

By Posted on

This time I will share jQuery Plugin and tutorial about Simple jQuery Plugin For Custom Social Share Buttons – SocialJS, hope it will help you in programming stack.

Simple jQuery Plugin For Custom Social Share Buttons SocialJS - Free Download Simple jQuery Plugin For Custom Social Share Buttons - SocialJS
File Size: 510 KB
Views Total: 1767
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

SocialJS is a simple lightweight jQuery plugin to generate custom social buttons with share counts for sharing your webpage over 5 major social networking sites: Twitter, Facebook, Linkedin, Google Plus, and Reddit.

How to use it:

1. Load the stylesheet socialjs.css in the head section for default social button styles.

view source
1 <link href="dist/socialjs.css" rel="stylesheet">

2. Load the Font Awesome  for social media icons (OPTIONAL).

view source
1 <link rel="stylesheet" href="font-awesome.min.css">

3. Create a list of social share buttons and use data- attribute to setup the sharing options.

  • data-sharetype: twitter, facebook, linkedin, googleplus, reddit
  • data-basecount: Base count
  • data-text: If not specified the plugin will take the title of the page as text.
  • data-via: For Twitter
  • data-related: For Twitter
view source
01 <div class="socialjs">
02   <ul>
03     <li>
04       <a class="sharebutton facebook"
05          data-basecount="0"
06          data-sharetype="facebook"
07          data-text="Text to share"
08          title="Title to share"
09          href="#">
10          <i class=" fa fa-facebook"></i>
11          <span class="count"></span>
12       </a>
13     </li>
14   </ul>
15 </div>

4. Call the plugin on the top element.

view source
1 $('.socialjs').socialjs();

5. Available options and callback functions. Options can be overwritten when initializing plugin, by passing an object literal, or after initialization.

view source
01 // $('#el').socialjs({OPTIONS});
02 // OR $('#el').socialjs('option', 'key', value);
03  
04 // Container
05 container: '.socialjs',
06  
07 // Uses https instead of http
08 https: true,
09  
10 // urls to get counts
11 urls: {
12   GooglePlus: 'backend/GooglePlusCall.php',
13   Facebook: 'http://graph.facebook.com/',
14   Linkedin: 'http://www.linkedin.com/countserv/count/share',
15   Reddit: 'http://www.reddit.com/api/info.json'
16 },
17  
18 // Show total by k or M when number is to big.
19 shortCount: true,
20  
21 // Fetch share count
22 fetchCounts: true,
23  
24 // Callback functions.
25 onInit: function () {},
26 onLoad: function () {},
27 onDestroy: function () {},
28 onClick: function(){},

6. Public methods.

view source
01 // destroy the plugin
02 $('#el').socialjs('destroy')
03  
04 // Get total count
05 $('#el').socialjs('getTotalCount')
06  
07 // Get Facebook count
08 $('#el').socialjs('getFacebookCount')
09  
10 // Get Google Plus count
11 $('#el').socialjs('getGoolgePlusCount')
12  
13 // Get Twitter count
14 $('#el').socialjs('getTwitterCount')
15  
16 // Get Reddit count
17 $('#el').socialjs('getRedditCount')
18  
19 // Get LinkedIn count
20 $('#el').socialjs('getLinkedinCount')

Changelog:

2019-09-13

  • v2.2.0

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

source : jquery.net

Related posts: