jQuery Social Sharing Buttons

Jul 20, 2014 in Social & RSS 7121 views

Download

Overview
Documents

User Rating: 3.4/5 ( 3 votes)

Your Rating:

Simple jQuery social sharing buttons with shared count ajax lookups.

Features

Icon font
Ajax requests for number of times shared
Hide share count if 0
Built with Sass, exported to CSS

Limitations

Google+ doesn't let you get the number of shared with JavaScript. Try PHP.
Fancy does not have a way to get number of shares
Only meant for one set of share buttons per page

Source: labs.carsonshold.com

1. INCLUDE JS FILES

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="social-buttons.js"></script>

2. HTML

<h3>Default Buttons</h3>
<div class="social-sharing" data-permalink="http://labs.carsonshold.com/social-sharing-buttons">

	<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
	<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://labs.carsonshold.com/social-sharing-buttons" class="share-facebook">
	  <span class="icon icon-facebook"></span>
	  <span class="share-title">Share</span>
	  <span class="share-count">0</span>
	</a>

	<!-- https://dev.twitter.com/docs/intents -->
	<a target="_blank" href="http://twitter.com/share?url=http://labs.carsonshold.com/social-sharing-buttons&amp;text=jQuery%20social%20media%20buttons%20with%20share%20counts%20on%20GitHub&amp;via=cshold" class="share-twitter">
	  <span class="icon icon-twitter"></span>
	  <span class="share-title">Tweet</span>
	  <span class="share-count">0</span>
	</a>

	<!--
	  https://developers.pinterest.com/pin_it/
	  Pinterest get data from the same Open Graph meta tags Facebook uses
	-->
	<a target="_blank" href="http://pinterest.com/pin/create/button/?url=http://labs.carsonshold.com/social-sharing-buttons&amp;media=http://photos-c.ak.instagram.com/hphotos-ak-xfp1/10369404_682591538475746_1724734234_n.jpg&amp;description=Tina%20the%20dachsund" class="share-pinterest">
	  <span class="icon icon-pinterest"></span>
	  <span class="share-title">Pin it</span>
	  <span class="share-count">0</span>
	</a>

	<!-- https://developers.google.com/+/web/share/ -->
	<a target="_blank" href="http://plus.google.com/share?url=http://labs.carsonshold.com/social-sharing-buttons" class="share-google">
	  <!-- Cannot get Google+ share count with JS yet -->
	  <span class="icon icon-google"></span>
	  <span class="share-count">+1</span>
	</a>

	<!-- http://fancy.com/help/button -->
	<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL=http://labs.carsonshold.com/social-sharing-buttons&amp;Title=Tina%20the%20dachsund&amp;Category=Other&amp;ImageURL=http://distilleryimage3.ak.instagram.com/6477684ac48d11e19ab222000a1e8819_7.jpg" class="share-fancy">
	  <span class="icon icon-fancy"></span>
	  <span class="share-title">Fancy</span>
	</a>

</div>

<div class="social-sharing" data-permalink="http://labs.carsonshold.com/social-sharing-buttons">

	<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
	<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://labs.carsonshold.com/social-sharing-buttons" class="share-facebook">
	  <span class="icon icon-facebook"></span>
	  <span class="share-title">Share</span>
	</a>

	<!-- https://dev.twitter.com/docs/intents -->
	<a target="_blank" href="http://twitter.com/share?url=http://labs.carsonshold.com/social-sharing-buttons&amp;text=jQuery%20social%20media%20buttons%20with%20share%20counts%20on%20GitHub&amp;via=cshold" class="share-twitter">
	  <span class="icon icon-twitter"></span>
	  <span class="share-title">Tweet</span>
	</a>

	<!--
	  https://developers.pinterest.com/pin_it/
	  Pinterest get data from the same Open Graph meta tags Facebook uses
	-->
	<a target="_blank" href="http://pinterest.com/pin/create/button/?url=http://labs.carsonshold.com/social-sharing-buttons&amp;media=http://photos-c.ak.instagram.com/hphotos-ak-xfp1/10369404_682591538475746_1724734234_n.jpg&amp;description=Tina%20the%20dachsund" class="share-pinterest">
	  <span class="icon icon-pinterest"></span>
	  <span class="share-title">Pin it</span>
	</a>

	<!-- https://developers.google.com/+/web/share/ -->
	<a target="_blank" href="http://plus.google.com/share?url=http://labs.carsonshold.com/social-sharing-buttons" class="share-google">
	  <!-- Cannot get Google+ share count with JS yet -->
	  <span class="icon icon-google"></span>
	  <span class="share-title">+1</span>
	</a>

	<!-- http://fancy.com/help/button -->
	<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL=http://labs.carsonshold.com/social-sharing-buttons&amp;Title=Tina%20the%20dachsund&amp;Category=Other&amp;ImageURL=http://distilleryimage3.ak.instagram.com/6477684ac48d11e19ab222000a1e8819_7.jpg" class="share-fancy">
	  <span class="icon icon-fancy"></span>
	  <span class="share-title">Fancy</span>
	</a>

</div>

<h3>Large Buttons</h3>
<div class="social-sharing is-large" data-permalink="http://labs.carsonshold.com/social-sharing-buttons">

	<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
	<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://labs.carsonshold.com/social-sharing-buttons" class="share-facebook">
	  <span class="icon icon-facebook"></span>
	  <span class="share-title">Share</span>
	  <span class="share-count">0</span>
	</a>

	<!-- https://dev.twitter.com/docs/intents -->
	<a target="_blank" href="http://twitter.com/share?url=http://labs.carsonshold.com/social-sharing-buttons&amp;text=jQuery%20social%20media%20buttons%20with%20share%20counts%20on%20GitHub&amp;via=cshold" class="share-twitter">
	  <span class="icon icon-twitter"></span>
	  <span class="share-title">Tweet</span>
	  <span class="share-count">0</span>
	</a>

	<!--
	  https://developers.pinterest.com/pin_it/
	  Pinterest get data from the same Open Graph meta tags Facebook uses
	-->
	<a target="_blank" href="http://pinterest.com/pin/create/button/?url=http://labs.carsonshold.com/social-sharing-buttons&amp;media=http://photos-c.ak.instagram.com/hphotos-ak-xfp1/10369404_682591538475746_1724734234_n.jpg&amp;description=Tina%20the%20dachsund" class="share-pinterest">
	  <span class="icon icon-pinterest"></span>
	  <span class="share-title">Pin it</span>
	  <span class="share-count">0</span>
	</a>

	<!-- https://developers.google.com/+/web/share/ -->
	<a target="_blank" href="http://plus.google.com/share?url=http://labs.carsonshold.com/social-sharing-buttons" class="share-google">
	  <!-- Cannot get Google+ share count with JS yet -->
	  <span class="icon icon-google"></span>
	  <span class="share-count">+1</span>
	</a>

	<!-- http://fancy.com/help/button -->
	<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL=http://labs.carsonshold.com/social-sharing-buttons&amp;Title=Tina%20the%20dachsund&amp;Category=Other&amp;ImageURL=http://distilleryimage3.ak.instagram.com/6477684ac48d11e19ab222000a1e8819_7.jpg" class="share-fancy">
	  <span class="icon icon-fancy"></span>
	  <span class="share-title">Fancy</span>
	</a>

</div>

<h3>Clean Buttons</h3>
<div class="social-sharing is-clean" data-permalink="http://labs.carsonshold.com/social-sharing-buttons">

	<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
	<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://labs.carsonshold.com/social-sharing-buttons" class="share-facebook">
	  <span class="icon icon-facebook"></span>
	  <span class="share-title">Share</span>
	  <span class="share-count">0</span>
	</a>

	<!-- https://dev.twitter.com/docs/intents -->
	<a target="_blank" href="http://twitter.com/share?url=http://labs.carsonshold.com/social-sharing-buttons&amp;text=jQuery%20social%20media%20buttons%20with%20share%20counts%20on%20GitHub&amp;via=cshold" class="share-twitter">
	  <span class="icon icon-twitter"></span>
	  <span class="share-title">Tweet</span>
	  <span class="share-count">0</span>
	</a>

	<!--
	  https://developers.pinterest.com/pin_it/
	  Pinterest get data from the same Open Graph meta tags Facebook uses
	-->
	<a target="_blank" href="http://pinterest.com/pin/create/button/?url=http://labs.carsonshold.com/social-sharing-buttons&amp;media=http://photos-c.ak.instagram.com/hphotos-ak-xfp1/10369404_682591538475746_1724734234_n.jpg&amp;description=Tina%20the%20dachsund" class="share-pinterest">
	  <span class="icon icon-pinterest"></span>
	  <span class="share-title">Pin it</span>
	  <span class="share-count">0</span>
	</a>

	<!-- https://developers.google.com/+/web/share/ -->
	<a target="_blank" href="http://plus.google.com/share?url=http://labs.carsonshold.com/social-sharing-buttons" class="share-google">
	  <!-- Cannot get Google+ share count with JS yet -->
	  <span class="icon icon-google"></span>
	  <span class="share-count">+1</span>
	</a>

	<!-- http://fancy.com/help/button -->
	<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL=http://labs.carsonshold.com/social-sharing-buttons&amp;Title=Tina%20the%20dachsund&amp;Category=Other&amp;ImageURL=http://distilleryimage3.ak.instagram.com/6477684ac48d11e19ab222000a1e8819_7.jpg" class="share-fancy">
	  <span class="icon icon-fancy"></span>
	  <span class="share-title">Fancy</span>
	</a>

</div>

<div class="social-sharing is-clean" data-permalink="http://labs.carsonshold.com/social-sharing-buttons">

	<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
	<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://labs.carsonshold.com/social-sharing-buttons" class="share-facebook">
	  <span class="icon icon-facebook"></span>
	  <span class="share-title">Share</span>
	</a>

	<!-- https://dev.twitter.com/docs/intents -->
	<a target="_blank" href="http://twitter.com/share?url=http://labs.carsonshold.com/social-sharing-buttons&amp;text=jQuery%20social%20media%20buttons%20with%20share%20counts%20on%20GitHub&amp;via=cshold" class="share-twitter">
	  <span class="icon icon-twitter"></span>
	  <span class="share-title">Tweet</span>
	</a>

	<!--
	  https://developers.pinterest.com/pin_it/
	  Pinterest get data from the same Open Graph meta tags Facebook uses
	-->
	<a target="_blank" href="http://pinterest.com/pin/create/button/?url=http://labs.carsonshold.com/social-sharing-buttons&amp;media=http://photos-c.ak.instagram.com/hphotos-ak-xfp1/10369404_682591538475746_1724734234_n.jpg&amp;description=Tina%20the%20dachsund" class="share-pinterest">
	  <span class="icon icon-pinterest"></span>
	  <span class="share-title">Pin it</span>
	</a>

	<!-- https://developers.google.com/+/web/share/ -->
	<a target="_blank" href="http://plus.google.com/share?url=http://labs.carsonshold.com/social-sharing-buttons" class="share-google">
	  <!-- Cannot get Google+ share count with JS yet -->
	  <span class="icon icon-google"></span>
	  <span class="share-title">+1</span>
	</a>

	<!-- http://fancy.com/help/button -->
	<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL=http://labs.carsonshold.com/social-sharing-buttons&amp;Title=Tina%20the%20dachsund&amp;Category=Other&amp;ImageURL=http://distilleryimage3.ak.instagram.com/6477684ac48d11e19ab222000a1e8819_7.jpg" class="share-fancy">
	  <span class="icon icon-fancy"></span>
	  <span class="share-title">Fancy</span>
	</a>
</div>

JS Tutorial

jQuery Social Sharing Buttons

Features

Limitations

Related Articles