README
Social JS 2.2.0
Social JS is a Javascript to easily create share buttons for the most common social media sites. It's built in a way that requires almost no knowledge in javascript but depends instead of the use of data attributes.
Features
- Twitter - API for fetching counts is shutdown
- Google Plus
- Can fetch share count for each social media. Requires server side client to provide a count for Google Plus. A PHP client is provided.
Browser Support
- Google Chrome
- Internet Explorer 10+
- Firefox
- Safari 8+
Installation
yarn add socialjs
Setup
<!-- and you'll need to include socialjs of course! -->
<script src="socialjs.min.js"></script>
Usage
socialjs.init();
Settings and Defaults
options: {
container: '.socialjs',
fetchCounts: true,
shortCount: true,
https: true,
urls: {
GooglePlus: 'backend/GooglePlusCall.php',
Facebook: 'http://graph.facebook.com/',
Linkedin: 'http://www.linkedin.com/countserv/count/share',
Reddit: 'http://www.reddit.com/api/info.json'
},
onInit: function () {},
OnAttachEvents: function () {},
onDestroy: function () {},
onClick: function () {}
};
fetchCounts
: Default true. If the plugin should fetch share count or not.shortCount
: Default true. Show total by k or M when number is to big.https
: Defaults false. Set to true to change all requests from HTTP to HTTPS.GooglePlus
: Path to server side google plus client.Facebook
: URL to REST Service. Don't change unless you know what your doing.Linkedin
: URL to REST Service. Don't change unless you know what your doing.Reddit
: URL to REST Service. Don't change unless you know what your doing.onInit
: Executes when initialized.OnAttachEvents
: Executes when finished attaching all events.onClick
: Executes when user clicks any share button.onDestroy
: Executes when plugin is removed/destroyed.
Required classes, data-attributes and elements.
.sharebutton
: Required. Class of the<a href>
element containing all data-attributes.data-sharetype
: Required. To tell the script what social media it is. Supports twitter, facebook, linkedin or googleplusdata-basecount
: Optional. If you want to cheat or have moved pages or switched domain but want to keep the old count you can add this and specify a numberdata-text
: Optional. If not specified the plugin will take the title of the page as text.data-via
: Only for Twitter. Optional. The creator of the content. Usually your twitter name without the @data-related
: Only for Twitter. Optional. The creator of the content. Usually your twitter name without the @
If you want a count to be presented you'll need to add a span
element inside the <a href>
Public methods
Exposed methods that you can access and use. The count methods is best to use within the onLoad
hook since the count will be fetched by and Ajax request.
getCount.Total
: getTotalCount,getCount.Facebook
: getFacebookCount,getCount.GooglePlus
: getGooglePlusCount,getCount.Linkedin
: getLinkedinCount,getCount.Reddit
: getTwitterCount
How to use a public method
In this example we alert the count of all Facebook shares.
socialjs.init();
alert(socialjs.getCount.Facebook());
Typical setup
This could be your typical script setup for a facebook share button.
socialjs.init();
<div class="socialjs">
<a class="sharebutton facebook" data-basecount="249" data-sharetype="facebook" data-text="The neat page title" title="Share this on Facebook" href="#"><span class="count"></span></a>
</div>
About server side Google Plus clients
Currently I have only written one in PHP but you can write your own in any language really. The only thing you need to know is that the expected return value from the client is a number and nothing else.
If you want to contribute with a C# client or a client in any other language please do! Just fork and pull request.
change log
2.2.0
- Added repository to Yarn. Will no longer be updated on Bower.io
2.1.1
- Fixed bug with https not working as intended.
2.1.0
- CHANGE: Added option to set all requests from HTTP to HTTPS.
2.0.0-beta
- CHANGE: Rewritten in vanilla Javascript. No dependencies needed.
0.7.0
- CHANGE: Removed Twitter Count support due to Twitter: Read their blogpost here
0.6.0
- Added support for Reddit
- Renamed to Social JS since SimpleShareButtons already existed
0.5.0
- First real public release