Generate Custom Social Share Buttons With jQuery C Share Plugin

The C Share jQuery plugin lets you dynamically generate social share buttons from popular social networks to increase social media engagement.

Requires jQuery and Font Awesome.

Supported social media networks:

• Facebook
• Line
• Plurk
• Weibo
• Twitter
• Tumblr
• Email

Install & Download:

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

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

How to use it:

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

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" 
      integrity="sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" 
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

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

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

3. Create an element to hold the social share buttons.

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

4. Call the function on the container element and specify the social media networks you want to use.

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

5. Specify the content you want to share.

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

6. Set the space between social share buttons. Default: 6px.

$('#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/sharer.php?u=${url}`
      },
      show: true
    },
    line: {
      fa: 'fab fa-line fa-2x',
      name: 'Line',
      href: (url) => {
        return `https://social-plugins.line.me/lineit/share?url=${url}`
      },
      show: true,
      hideWrapper: true
    },
    plurk: {
      fa: 'fa-plurk',
      name: 'Plurk',
      href: (url, description) => {
        return `http://www.plurk.com/?qualifier=shares&status=${description} ${url}`
      },
      show: false
    },
    weibo: {
      fa: 'fab fa-weibo',
      name: '微博',
      href: (url, description) => {
        return `http://service.weibo.com/share/share.php?title=${description}&url=${url}`
      },
      show: false
    },
    twitter: {
      fa: 'fab fa-twitter',
      name: 'Twitter',
      href: (url, description) => {
        return `https://twitter.com/intent/tweet?original_referer=${url}&url=${url}&text=${description}`
      },
      show: false
    },
    tumblr: {
      fa: 'fab fa-tumblr',
      name: 'Tumblr',
      href: (url, description) => {
        return `http://www.tumblr.com/share/link?name=${description} ${url}&url=${url}`
      },
      show: false
    },
    email: {
      fa: 'fas fa-envelope',
      name: 'E-mail',
      href: (url, description) => {
        return `mailto:?subject=${description}&body=${description} ${url}`
      },
      show: false
    }
  },
});

Changelog:

v1.2.1 (2023-12-12)

• Add noopener for window.open

v1.2.0 (2020-10-19)

• Update LINE share base url
• Remove G+, pinterest buttons

v1.1.0 (2019-04-02)

• Add option shareToText
• Change option show_buttons to showButtons

2019-03-29

• v1.0.4

---

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