https://github.com/joe-watkins/ezshare

Create social shares with simple HTML and ezShare - Leverages Mustache.js and FontAwesome
https://github.com/joe-watkins/ezshare

Last synced: 10 days ago
JSON representation

Create social shares with simple HTML and ezShare - Leverages Mustache.js and FontAwesome

• Host: GitHub
• URL: https://github.com/joe-watkins/ezshare
• Owner: joe-watkins
• Created: 2014-03-09T00:29:53.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2014-03-09T01:49:33.000Z (almost 11 years ago)
• Last Synced: 2024-04-15T22:35:53.740Z (9 months ago)
• Language: CSS
• Size: 125 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Introducing ezShare.js

A very simple way to add social sharing to a page without having to code individual buttons for each social site. By adding some simple markup to the page with some special `data-attributes` we can let ezShare.js handle the rest. This type of share is useful for when a user fills out a form, makes a purchse or performs an action and is then taken to a landing page. From there you want them to share what they just did. Currently support Facebook, Twitter, and Google+

ezShare.js leverages FontAwesome for icon fonts and Mustache.js for templating.

You can reference external html template or use an inline html template.

It is helpful that the url you are wanting to share has proper og: data setup but not required.

Visit the [demo page](http://codepen.io/joe-watkins/debug/dJIjF)

## How Do I Use It?

Add this html to your page and edit the data attributes accordingly. 

```html





```


### Setup

Call CSS

```html

```

Requires jQuery 1.11+, Mustache.js, and ezShare.js - initialize the plugin by binding it to an element. Matchup the class with the html you added to the class eg. ezShare - Where you put that element is where the share will appear.

```html

 	

  

	

 	

  $(document).ready(function(){

    $('.ezShare').ezShare();

  });

 

```

### All Options

Below you can see all the options available. 

```html

	

	  $(document).ready(function(){

    	$('.ezShare').ezShare({

    		template : '#ezShareTemplate',

	      faceBookUrl : 'http://www.facebook.com/sharer.php',

			  twitterUrl : 'https://twitter.com/share',

			  googlePlusUrl : 'https://plus.google.com/share',

			  externalTemplate : true,

			  externalTemplateFile : 'js/ezShareTemplate.html'

    	});

  	});

	

```

### Why HTML Templates? Why FontAwesome

I like both of these tools :) You can tweak the CSS and HTML template to your liking and you don't have to use these services. Using HTML templates makes it very easy to tweak.

## Changelog

* v1.0.0 - 1kb

	* Initial release

## Credits

@_josephwatkins