Generate Custom Social Share Buttons With jQuery C Share Plugin

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
  • Google+
  • Line
  • Plurk
  • Weibo
  • Twitter
  • Tumblr
  • Pinterest
  • Email

 

Install & Download:

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

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

 

READ  [LIVE CODING] jsPDF Autotable Documentation with Source Code

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>

 

READ  Basic CRUD Application in VUE with Firebase

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',
    'gPlus',
    'line',
    'plurk',
    'weibo',
    '<a href="https://www.jqueryscript.net/tags.php?/twitter/">twitter</a>',
    'tumblr',
    'pinterest',
    'email'
  ]
});

5. Specify the content you want to share.

READ  Electron Drag and Drop File Example with Editing - Coding Shiksha
$('#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'
});

Leave a Reply