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

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

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({

  // current URL
  urlShare: window.location.href,

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

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

5. Remove & add social sharing buttons.

let urls = {
  facebook: {
      icon: 'fab fa-facebook',
      color: '#4267B2',
      url: 'https://www.facebook.com/sharer.php?u=[post-url]'
  },
  twitter: {
      icon: 'fab fa-twitter',
      color: '#00acee',
      url: 'https://twitter.com/share?url=[post-url]&text=[post-title]&via=[via]&hashtags=[hashtags]'
  },
  pinterest: {
      icon: 'fab fa-pinterest',
      color: '#E60023',
      url: 'https://pinterest.com/pin/create/bookmarklet/?media=[post-img]&url=[post-url]&is_video=[is_video]&description=[post-title]'
  },
  linkedin: {
      icon: 'fab fa-linkedin',
      color: '#0072b1',
      url: 'https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]'
  },
  reddit: {
      icon: 'fab fa-reddit',
      color: '#FF5700',
      url: 'https://reddit.com/submit?url=[post-url]&title=[post-title]'
  },
  pocket:{
      icon: 'fab fa-get-pocket',
      color: '#E60023',
      url: 'https://getpocket.com/save?url=[post-url]&title=[post-title]'
  },
  email:{
      icon: 'fas fa-envelope',
      color: '#5522a4',
      url: 'mailto:?subject=[post-title]&body=Check out this site: [post-url]'
  },
  whatsapp:{
      icon: 'fab fa-whatsapp',
      color: '#1e7d34',
      url: 'https://wa.me/?text=[post-title]+[post-url]'
  }
};

6. Available options to customize the social sharing buttons.

$('#demo').socialSharingPlugin({

  // current URL
  urlShare: '',

  // target attribute
  btnTarget: '_blank',

  // button title
  btnTitle: 'Share on',

  // page title
  title: '',

  // page description
  description: '',

  // for Twitter
  via:'',
  hashtags: '',

  // for Pinterest
  img: '',
  isVideo: 'false',

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

  // apply default styles to the buttons
  applyDefaultButtonStyle: true,

})

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