JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">Social Share Buttons Counter</a>
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>

</nav>
<br>
<h5>Social share count for: <em id="thisurl"></em></h5>
<!-- SOCIAL BUTTON -->
<div class="col m6 social-buttons">
<!-- EX: class= col m6 for Materalize col-sm-4 for Bootstrap -->

	<h5>Share button with counter:</h5>

  <a class="btn btn-block btn-social btn-facebook share s_facebook">
    <span class="fa fa-facebook"></span>Facebook (<span class="counter c_facebook"></span>)
  </a>
  <a class="btn btn-block btn-social btn-google share s_plus">
    <span class="fa fa-google"></span>Google (<span class="counter c_plus"></span>)
  </a>
  <a class="btn btn-block btn-social btn-linkedin share s_linkedin">
    <span class="fa fa-linkedin"></span>LinkedIn (<span class="counter c_linkedin"></span>)
  </a>
  <a class="btn btn-block btn-social btn-pinterest share s_pinterest">
    <span class="fa fa-pinterest"></span>Pinterest (<span class="counter c_pinterest"></span>)
  </a>
  <a class="btn btn-block btn-social btn-twitter share s_twitter">
    <span class="fa fa-twitter"></span>Twitter
  </a>
  <a class="btn btn-block btn-social btn-odnoklassniki share s_odnoklassniki">
    <span class="fa fa-odnoklassniki"></span>Odnoklassniki (<span class="counter c_odnoklassniki"></span>)
  </a>
  <a class="btn btn-block btn-social btn-vk share s_vk">
    <span class="fa fa-vk"></span>VK (<span class="counter c_vk"></span>)
  </a>
	<a class="btn btn-block btn-social btn-reddit share s_reddit">
    <span class="fa fa-reddit"></span>Reddit
  </a>
	
	<h5>Social share no counter:</h5>
	
  <a class="btn btn-block btn-social btn-adn">
    <span class="fa fa-adn"></span>App.net
  </a>
  <a class="btn btn-block btn-social btn-bitbucket">
   ...

CSS

body {
  margin: 5px
}

.counter {
  margin-left: 16px padding-right: 1rem;
  font-weight: bold
}

.btn {
  padding-right: 1rem;
}

.btn-social,
.btn-social-icon {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 2px;
}

JavaScript

//var thisurl = window.location.href ;
var thisurl = "http://github.com/";
$('#thisurl').text(thisurl);
/********************/

$(document).ready(function() {

  $('.share').ShareLink({
    url: thisurl, // link on shared page
    //class_prefix: 's_', // optional class prefix for share elements (buttons or links or everything), default: 's_'
    width: 640, // optional popup initial width
    height: 480 // optional popup initial height
  })

  $('.counter').ShareCounter({
    //url: 'http://google.com/',
    url: thisurl, // url for which you want show like counter
    //class_prefix: 'c_', // optional class prefix for counter elements, default: 'c_'
    display_counter_from: 0, // optional to set when counter is display, default: 0
    increment: false // Optional. If this option is true you can summarize counters from different sources just using multiple classes for one container.
  })

});