Sunday, October 2, 2022
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
$('#demo').socialSharingPlugin({

  // 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: 'https://www.fb.com/sharer.php?u=[post-url]'
  },
  twitter: {
      icon: 'fab fa-twitter',
      colour: '#00acee',
      url: 'https://twitter.com/share?url=[post-url]&textual content=[post-title]&through=[via]&hashtags=[hashtags]'
  },
  pinterest: {
      icon: 'fab fa-pinterest',
      colour: '#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',
      colour: '#0072b1',
      url: 'https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]'
  },
  reddit: {
      icon: 'fab fa-reddit',
      colour: '#FF5700',
      url: 'https://reddit.com/submit?url=[post-url]&title=[post-title]'
  },
  pocket:{
      icon: 'fab fa-get-pocket',
      colour: '#E60023',
      url: 'https://getpocket.com/save?url=[post-url]&title=[post-title]'
  },
  e-mail:{
      icon: 'fas fa-envelope',
      colour: '#5522a4',
      url: 'mailto:?topic=[post-title]&physique=Take a look at this website: [post-url]'
  },
  whatsapp:{
      icon: 'fab fa-whatsapp',
      colour: '#1e7d34',
      url: 'https://wa.me/?textual content=[post-title]+[post-url]'
  }
};

6. Accessible choices to customise the social sharing buttons.

$('#demo').socialSharingPlugin({

  // present URL
  urlShare: '',

  // goal attribute
  btnTarget: '_blank',

  // button title
  btnTitle: 'Share on',

  // web page title
  title: '',

  // web page description
  description: '',

  // for Twitter
  through:'',
  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.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments