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:
- Google+
- Line
- Plurk
- Tumblr
Install & Download:
|
1 2 3 4 5 |
# 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.
|
1 2 3 4 5 6 7 8 |
<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.
|
1 |
<script src="js/c-share.js"></script> |
3. Create an element to hold the social share buttons.
|
1 |
<div id="shareBlock"></div> |
4. Call the function on the container element and specify the social media networks you want to use.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#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.
|
1 2 3 |
$('#shareBlock').cShare({ description: 'Content To Share', }); |
6. Set the space between social share buttons. Default: 6px.
|
1 2 3 |
$('#shareBlock').cShare({ spacing: 10 }); |
7. Customize the Share To text.
|
1 2 3 |
$('#shareBlock').cShare({ shareToText: 'Share to' }); |
