Create Custom Social Sharing Buttons

C Share jQuery plugin allows you to dynamically create social share buttons from popular social networks to increase social media sharing.

social sharing buttons best practices, social share buttons html code, share button generator, share button html, share button javascript

Supported social networks:

Facebook
Line
Plurk
Weibo
Twitter
Tumblr
Email

How to make use of it:

Install & Download:

# Yarn
$ yarn add jquery-plugin-c-share

# NPM
$ npm install jquery-plugin-c-share --save

1. Include the needed jQuery JavaScript library and Font Awesome Iconic Font on the web page.

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" 
      integrity="" 
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="" 
        crossorigin="anonymous">
</script>

2. Download and embrace JavaScript c-share.min.js after jQuery.

<script src="js/c-share.js"></script>

3. Create a component to hold the social share buttons.

<div id="shareBlock"></div>

4. Call the function on the container component and specify the social media networks you need to use.

$('#shareBlock').cShare({
  showButtons: [
    'fb',
    'line',
    'plurk',
    'weibo',
    'twitter',
    'tumblr',
    'email'
  ]
});

5. Specify the content you need to share.

$('#shareBlock').cShare({
  description: 'Content To Share',
});

6. Set the area between social share buttons.

$('#shareBlock').cShare({
  spacing: 10
});

7. Customize the Share To text.

$('#shareBlock').cShare({
  shareToText: 'Share to'
});

8. Customize the share buttons.

$('#shareBlock').cShare({
  data: {
    fb: {
      fa: 'fab fa-facebook-f',
      name: 'Fb',
      href: (url) => {
        return `https://www.facebook.com`
      },
      show: true
    },
    line: {
      fa: 'fab fa-line fa-2x',
      name: 'Line',
      href: (url) => {
        return `https://social-plugins.line.me`
      },
      show: true,
      hideWrapper: true
    },
    plurk: {
      fa: 'fa-plurk',
      name: 'Plurk',
      href: (url, description) => {
        return `http://www.plurk.com`
      },
      show: false
    },
    weibo: {
      fa: 'fab fa-weibo',
      name: '微博',
      href: (url, description) => {
        return `http://service.weibo.com`
      },
      show: false
    },
    twitter: {
      fa: 'fab fa-twitter',
      name: 'Twitter',
      href: (url, description) => {
        return `https://twitter.com`
      },
      show: false
    },
    tumblr: {
      fa: 'fab fa-tumblr',
      name: 'Tumblr',
      href: (url, description) => {
        return `http://www.tumblr.com`
      },
      show: false
    },
    email: {
      fa: 'fas fa-envelope',
      name: 'E-mail',
      href: (url, description) => {
        return `mailto:`
      },
      show: false
    }
  },
});

Generate Custom Social Share Buttons, C Share buttons Plugin/Github