Skip to content

rshl/jquery.kyco.easyshare

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

kyco.easyShare

####Version: 1.2.2

The simplest way to handle your social media buttons. All you need is one script!

Forget loading those clunky SDKs for Facebook, Twitter and Google+. This plugin loads your social media buttons in the background, unobtrusively and simultaneously. And the best part, you get to fully customise the styling.

Take a look at the demo.

Note: The v1.0.2 API has been discontinued. Users of v1.0.2 will have to migrate to the latest version.

How to install

Bower: bower install jquery.kyco.easyshare --save-dev

Include the minified JS file after including jQuery (preferably before the closing BODY tag).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.kyco.easyshare.min.js"></script>

Optionally include Font Awesome and the provided CSS in the HEAD.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="jquery.kyco.easyshare.css">

Now, copy the easyshare.php file to your server and remember the path. Open jquery.kyco.easyshare.min.js and replace kyco.API_PATH with the path to where you copied the file, e.g. //my.website.com/path/to/easyshare.php.

Replace kyco.apiPath to make sure you connect to the API

Finally copy & paste the markup below to fire it up.

<div data-easyshare data-easyshare-url="https://www.kycosoftware.com/">
	<!-- Total -->
	<button data-easyshare-button="total">
		<span>Total</span>
	</button>
	<span data-easyshare-total-count>0</span>

	<!-- Facebook -->
	<button data-easyshare-button="facebook">
		<span class="fa fa-facebook"></span>
		<span>Share</span>
	</button>
	<span data-easyshare-button-count="facebook">0</span>

	<!-- Twitter -->
	<button data-easyshare-button="twitter" data-easyshare-tweet-text="">
		<span class="fa fa-twitter"></span>
		<span>Tweet</span>
	</button>
	<span data-easyshare-button-count="twitter">0</span>

	<!-- Google+ -->
	<button data-easyshare-button="google">
		<span class="fa fa-google-plus"></span>
		<span>+1</span>
	</button>
	<span data-easyshare-button-count="google">0</span>

	<div data-easyshare-loader>Loading...</div>
</div>

#####Tips:

  1. Leave data-easyshare-url empty or completely remove it to get share counts for the current URL.
  2. For twitter, use data-easyshare-tweet-text to pre-populate the tweet.
  3. In api/easyshare.php change header('Access-Control-Allow-Origin: *'); to header('Access-Control-Allow-Origin: http://your.domain.here'); for better security.

#####HTTP vs HTTPS:

  1. By default the plugin retrieves share counts for both HTTP and HTTPS.
  2. Increase plugin speed by explicitly setting data-easyshare-http or data-easyshare-https on the main div to force getting share counts for the specified protocol only.
  3. If your site is running HTTP then it is a good idea to add data-easyshare-http.
  4. If your site has always been running on HTTPS then add data-easyshare-https.
  5. If your site has migrated from HTTP to HTTPS then ignore or add both.

Support

For bugs or improvements please use the issues tab or email support@kycosoftware.com.

About

The simplest way to manage custom social media buttons for Facebook, Twitter and Google+.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 42.3%
  • PHP 24.9%
  • HTML 18.7%
  • CSS 14.1%