Streamline Copy and Share Actions with The CopyShareify Plugin

File Size: 38.2 KB
Views Total: 282
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Streamline Copy and Share Actions with The CopyShareify Plugin

CopyShareify is a tiny yet useful jQuery plugin that adds customizable copy and share functionality to buttons on your website. With just a few lines of code, you can empower users to instantly copy and distribute your content.

Features:

  • Copy any content (text, images, input values) to the clipboard.
  • Share any content on the page using the Web Share API.
  • Define different copy and share actions per button.
  • Configure options via HTML data attributes.

How to use it:

1. To use the plugin, download and include the copyshareify.min.js script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/copyshareify.min.js"></script>

2. Initialize the plugin on document ready.

$(function(){ 
  $('[data-action]').CopyShareify();
});

3. Enable a button to copy the text defined in the data-string attribute.

<button 
  data-action="copy" 
  data-string="Text To Copy">
  Click To Copy
</button>

4. Enable a button to copy the text in an HTML element.

<p id="copy">
  Text To Copy
</p>
<button 
  data-action="copy" 
  data-html-element-selector="#copy">
  Click To Copy
</button>

5. Enable a button to copy an image within the document.

<img id="img" src="copy.png">
<button 
  data-action="copy" 
  data-html-img-selector="#img">
  Click To Copy
</button>

6. Enable a button to share any content using the Web Share API.

<button 
  data-action="share" 
  data-title="jQueryScript" 
  data-description="A jQuery Website!" 
  data-string="https://www.jqueryscript.net">
  Share Link
</button>

7. You can also integrate the Copy or Share functionality into buttons using JavaScript as follows:

$('#myButton').CopyShareify({
  action: null, // 'copy', or 'share'
  string: null,
  htmlInputSelector: null,
  htmlElementSelector: null,
  htmlImgSelector: null,
  title: null,
  description: null,
  onActionDone : function () {},
  onActionFailed : function (error) {},
});

Changelog:

2023-07-25

  • Bugfixes

2023-07-19

  • Bugfix

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