jQuery Plugin To Add Social Sharing Buttons To Your Site - Socialjs

File Size: 446 KB
Views Total: 3179
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Add Social Sharing Buttons To Your Site - Socialjs

Social media sites are fantastic resources for getting traffic, but how do you make it easy for your readers to share your content? By adding a Social Sharing Plugin you can make that process easier.

This tiny and easy-to-use jQuery plugin allows you to easily create social sharing buttons for popular social media networks right on your website or blog. It provides a great way to increase traffic, get more page views, and increase subscribers.

How to use it:

1. Download and load the socialSharing.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/socialSharing.js"></script>

2. Load the latest Font Awesome Iconic Font for social icons.

<link rel="stylesheet" href="/path/to/font-awesome/css/all.min.css" />

3. Create an empty DIV container to hold the social sharing buttons.

<div id="demo"></div>

4. Initialize the plugin to generate social sharing buttons on the page. Available social media networks:

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Reddit
  • Pocket
  • Email
  • Whatsapp
$('#demo').socialSharingPlugin({

  // URL to share
  url: window.location.href,

  // get description from meta description tag
  description: $('meta[name=description]').attr('content'),

  // get title from title tag
  title: $('title').text(),

  enable: ['copy', 'facebook', 'twitter', 'pinterest', 'linkedin', 'reddit', 'stumbleupon', 'pocket', 'email', 'whatsapp']
  
})

5. Available options to customize the social sharing buttons.

$('#demo').socialSharingPlugin({

  // url to share
  url: '',

  // page title
  title: '',

  // page description
  description: '',

  // image to share
  img: $('meta[property="og:image"]').attr('content'),

  // button classes
  btnClass: 'btn btn-light',

  // Array of social sharing links
  // ['copy', 'facebook', 'twitter', 'pinterest', 'linkedin', 'reddit', 'stumbleupon', 'pocket', 'email', 'whatsapp']
  enable: null,

  // enable responsive class
  responsive: false,
  
  // 'left' or 'right'
  mobilePosition: 'left',

  // copy message
  copyMessage: 'Copy to clipboard',

})

Changelog:

v0.0.2 (2022-11-10)


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