Thursday, June 13, 2024
HomejQueryjQuery Plugin To Add Social Sharing Buttons To Your Website - Socialjs

jQuery Plugin To Add Social Sharing Buttons To Your Website – Socialjs

Social media websites are incredible assets for getting site visitors, however how do you make it simple on your readers to share your content material? By including a Social Sharing Plugin you can also make that course of simpler.

This tiny and easy-to-use jQuery plugin means that you can simply create social sharing buttons for fashionable social media networks proper in your web site or weblog. It offers a good way to extend site visitors, get extra web page views, and enhance subscribers.

How one can use it:

1. Obtain and cargo 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 most recent Font Superior Iconic Font for social icons.

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

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

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

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

  • Fb
  • Twitter
  • Pinterest
  • LinkedIn
  • Reddit
  • Pocket
  • E-mail
  • Whatsapp

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

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

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

5. Take away & add social sharing buttons.

let urls = {
  fb: {
      icon: 'fab fa-facebook',
      colour: '#4267B2',
      url: '[post-url]'
  twitter: {
      icon: 'fab fa-twitter',
      colour: '#00acee',
      url: '[post-url]&textual content=[post-title]&through=[via]&hashtags=[hashtags]'
  pinterest: {
      icon: 'fab fa-pinterest',
      colour: '#E60023',
      url: '[post-img]&url=[post-url]&is_video=[is_video]&description=[post-title]'
  linkedin: {
      icon: 'fab fa-linkedin',
      colour: '#0072b1',
      url: '[post-url]&title=[post-title]'
  reddit: {
      icon: 'fab fa-reddit',
      colour: '#FF5700',
      url: '[post-url]&title=[post-title]'
      icon: 'fab fa-get-pocket',
      colour: '#E60023',
      url: '[post-url]&title=[post-title]'
      icon: 'fas fa-envelope',
      colour: '#5522a4',
      url: 'mailto:?topic=[post-title]&physique=Take a look at this website: [post-url]'
      icon: 'fab fa-whatsapp',
      colour: '#1e7d34',
      url: ' content=[post-title]+[post-url]'

6. Accessible choices to customise the social sharing buttons.


  // present URL
  urlShare: '',

  // goal attribute
  btnTarget: '_blank',

  // button title
  btnTitle: 'Share on',

  // web page title
  title: '',

  // web page description
  description: '',

  // for Twitter
  hashtags: '',

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

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

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


This superior jQuery plugin is developed by mmlTools. For extra Superior Usages, please test the demo web page or go to the official web site.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments