73

Yes! ? Now we have dynamically update the data that will be used for share ? goo...

 5 years ago
source link: https://www.tuicool.com/articles/hit/quQfYnm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

RjEzi2b.jpg!web

goodshare.js

Useful

jQuery plugin

modern JavaScript solution for share a link from your website to social networks or mobile messengers. Easy to install and configuring on any of your website!

Features

Simple install, extensive documentation, developer support, SEO friendly , many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed .

Full Documentation & Demos

Installation

Install via npm : 

$ npm install goodshare.js --save

Or include from jsDelivr CDN: 

<script src="https://cdn.jsdelivr.net/npm/goodshare.js@5/goodshare.min.js"></script>

Usage

Script works with any HTML tags: <a> or <div> or <button> or other.

So you can choose any and add required attributes data-social .

For example:

<!-- Create button with share to Twitter -->
<button data-social="twitter">Share this to Twitter</button>

<!-- Create link with share to Facebook -->
<a href="#" data-social="facebook">Share this to Facebook</a>

<!-- Create div container with share to LinkedIn -->
<div data-social="linkedin">Share this to LinkedIn</div>

<!-- Create icon from Fontello.com with share to Google+ -->
<i class="icon-google-plus" data-social="googleplus"></i>

By default, goodshare.js search this tags for get title, description and image (for some social networks): 

<head>
  <title>Current page title</title>
  <meta name="description" content="Current page description.">
  <link rel="apple-touch-icon" href="http://example.com/path/to/image.png">
  ...
</head>

Change URL, title or else

If you want to add different url , title , description and image to share element — use special data-* attributes:

  • data-url redefines document.location.href
  • data-title redefines document.title
  • data-description redefines meta[name="description"]
  • data-image redefines link[rel="apple-touch-icon"] 
Note: Please keep in mind, not all social networks support all of them data attributes!

Dynamically update

If you want to dynamically update the data that will be used for share. You can call a method Goodshare.reNewAllInstance() that will update data in goodshare providers instance and update EventListeners 

Note: For example, you have a widget to share content that generates images for sharing based on selected items or other user actions.

// update all data
// Goodshare instance expose in window._goodshare by default 
window._goodshare.reNewAllInstance();

Display share count

To display share count, just add data-counter attribute to HTML element that will contain numbers. For example: 

<!-- Create link with share to Facebook and counter -->
<a href="#" data-social="facebook">
  Share this to Facebook
  <span data-counter="facebook"></span>
</a>
You also may put this attribute to any element.

Notes

  • No more depending on jQuery! Since 4.x , no longer support the old goodshare.js version ( 3.2.9 and lower). Thank you jQuery, but ES6 is better and cleaner.
  • Browser support. Since 4.x , goodshare.js do not support Microsoft Internet Explorer 8 and older.

Author & maintainers

Development and maintenance engaged by Vic Shóstak (aka Koddr). If you want to say «thank you» and/or ask me about goodshare.js — create new issue .

Your assistance will help make project even better!

Thanks for supporting!

License

The MIT License (MIT)


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK