# social-share-js

> A jquery plugin to provide more control on social sharing buttons.

Latest version **1.0.4** (published 2015-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install social-share-js
pnpm add social-share-js
yarn add social-share-js
bun add social-share-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2015-05-28 |
| First published | 2015-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 72 |
| Author | Ritesh Kumar |
| Maintainers | ritz078 |
| Keywords | jquery-plugin, socialShare, share, twitter, facebook, linkedin |

## Links

- npm: https://www.npmjs.com/package/social-share-js
- Repository: https://github.com/ritz078/socialShare.js
- Issues: https://github.com/ritz078/socialShare.js/issues
- npm.io page: https://npm.io/package/social-share-js

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) >=1.8.x
- [grunt-contrib-copy](https://npm.io/package/grunt-contrib-copy.md) ^0.8.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2015-05-28
- 1.0.3 — 2015-05-26
- 1.0.1 — 2015-04-02

## README

# socialShare.js

> A jquery plugin to provide more control on social sharing buttons.
> Do the styling without worrying about the javascript implementation.

Demo is available at [http://rkritesh.in/socialShare.js](http://rkritesh.in/socialShare.js)


![screen](demo/demo.gif)

Features
--------

* Full control over the design of the buttons.
* No separate widget js loading for separate services.
* Share counts of all supported services.
* Easy to configure.


## Getting Started

Download the [production version][min] or the [development version][max].

[min]: https://raw.githubusercontent.com/ritz078/jquery-social-js/master/dist/jquery.socialshare.min.js
[max]: https://raw.githubusercontent.com/ritz078/jquery-social-js/master/dist/jquery.socialshare.js

Install from **npm**
```
npm install --save social-share-js
```

Install from **bower**
```
bower install --save social-share-js
```

Manual injection in your web page:

```html
<script src="jquery.js"></script>
<script src="dist/jquery.socialshare.min.js"></script>
```

##Simple Usage

This is the minimal configuration required to use the plugin

```javascript
$(element).socialShare({
	image 			: 'image-url',
	twitterVia		: 'ritz078',
	twitterHashTags : 'javascript,jquery'
});
```

##Advanced Options
property|default value|Description
--------|-------------|-----------
url|current page url|The url that will be shared
description|current page meta tag description|Can be set to be shared as description on twitter
title|current page title|Title that will be shared
counts|true|set to false to bypass http request to get the counts
twitter|true|set to false to disable 
pinterest|true|set to false to disable
facebook|true|set to false to disable
linkedin|true|set to false to disable
gPlus|true|set to false to disable
image|null|url of the image that will be shared with the links
toWord|true|to convert count numbers into words eg: 12000 to 12K
twitterVia|null|string containing the via value for twitter sharing eg: 'ritz078'.Mandatory if twitter is set to true
twitterHashTags|null|comma separated values to be shared as hashtags in a single string.Mandatory if twitter is set to true.

##How to use ?
You can use these 2 classes to make a class clickable(open share dialogue) and show the share counts.
* **[service]-share** and 
* **[service]-count**

where **[service] = twitter/facebook/pinterest/linkedin/gPlus**

Just add them wherever you want to use them

Class|Description|example
------|----------|-------
**[service]-share**|This is the class that becomes a link after clicking on which the sharing dialogue appears| ```<div class="twitter-share"></div>```
**[service]-count**|Class in which the share count appears|```<span class="twitter-count"></span>```


##Example Usage

* **HTML can comprise of any structure and tags**
* **Just use the 2 types of class provided**

```html
<div class="element">
<!--===== this block will become clickable (shows the twitter share dialogue on click) 
because of the class 'twitter-share'====-->
	<div class="twitter-share">
		<span>Share on twitter</span>
		<span class="twitter-count"></span> <!--====shows twitter share count==-->
	</div>
	<!--=======================================-->

	<!--===== this block will become clickable (shows the facebook share dialogue on click) 
because of the class 'facebook-share'====-->
	<div class="facebook-share">
		<span>Share on Facebook</span>
		<span class="facebook-count"></span><!--=== shows facebook share count==-->
	</div>
	<!--======================================-->
</div>

<script>
	$('.element').socialShare({
		image 			: 'image-url',
		twitterVia		: 'ritz078',
		twitterHashTags : 'javascript,jquery'
	})
</script>


```

Demo is available at [http://rkritesh.in/socialShare.js](http://rkritesh.in/socialShare.js)

## License

MIT © Ritesh Kumar

---
_Source: https://npm.io/package/social-share-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._