Angular-share-every NPM

Share-every - javascript angular module, for share everything

custom share plugin

See doc. for other languages: RUS

Supported social nets:

Vk
Facebook
Odnoklassniki
Twitter
Telegram
Evernote

Demo

Live demo

Installation

NPM

If you want to use this plugin locally, install it by npm command:

npm install angular-share-every

yarn add angular-share-every

CDN

You can just add a script from CDN:

<script src="https://cdn.rawgit.com/dslpp056193/angular-share-every/0baf95e1/src/angular-share-every.js"></script>

Add module

Don't forgot to add this module in your app:

var yourApp = angular.module('yourApp', [ /*...other modules...*/, 'share-every']);

Usage

This module has two directives, whose activates by attributes share and share-single.

Share directive

Creates list of social nets inside element. By click on social net will open small window for share in this social net.

share - add directive to this element
Required Yes
Values: No
share-title - title for share
Required No
Values: String
share-subtitle - subtitle for share Required No
Values: String
share-text - text for share
Required No
Values: String
share-image - image for share
Required No
Values: absolute or relative link
share-tag - tag for share
Required No
Values: String
share-icons - custom icons Required No
Values: object, (key - name of social net, value - any html code)
Example of value:
{
    vkontakte: 'share in vk',
    facebook: '<img src="img/facebook.png">',
}
share-counter - count of shares in each social nets
Required No
Values: controller variable, that have object, (key - name of social net, value - count of shares)
Note: can be empty
Example of value:
{
    vkontakte: 17,
    facebook: 4,
    twitter: 6
}

Working example

<div 
    share
    share-url="https://github.com/dslpp056193/angular-share-every"
    share-title="Module share-every for Angular" 
    share-description="Module share-every for Angular" 
    share-image="https://cdn4.iconfinder.com/data/icons/mayssam/512/share-128.png" 
    share-tag="Share-plugin"
    share-icons="icons"
    share-counter="counters">
</div>

Share-single directive

Creates a click event on element, which will open small window for share in given social net.

share-single - add directive for element and set social net for share Required Yes
Values: name of social net
Example of values:
vkontakte
facebook
odnoklassniki
twitter
telegram
evernote
share-title - title for share
Required No
Values: String
share-subtitle - subtitle for share
Required No
Values: String
share-text - text for share
Required No
Values: String
share-image - image for share
Required No
Values: absolute or relative link
share-tag - tag for share
Required No
Values: String
share-counter - count of shares in this social net
Required No
Values: controller variable, that has a integer

Working example

<div 
    share-single="facebook"
    share-url="https://github.com/dslpp056193/angular-share-every"
    share-title="Module share-every for Angular" 
    share-description="Module share-every for Angular" 
    share-image="https://cdn4.iconfinder.com/data/icons/mayssam/512/share-128.png" 
    share-tag="Share-plugin"
    share-counter="facebook_counts">
    Click me, please, i love it
</div>