How can I get number of clicks on a facebook share button per user using javascript

Question

I don't know whether this is possible but i want to count number of clicks on the facebook share button per person.Here is my code for a button

<div id="tryf" class="fb-share-button" data-href="http://grey.com/?  grey_try+points" data-layout="button"></div>

THIS IS WERE I Output number CLICKS

   <div id='output'>10</div>

my javascript

 <script>
    $('#tryf').click(function() {
    $('#output').html(function(i, val) { return val*1+1 });
   });
  </script>

Thanks in advance

Answer 1

You need to store the click count somewhere. If it really is per person, it could be stored on the client PC in the browsers localStorage . This would display the number of clicks on the share button made from that specific PC and browser.

var shareButton = document.querySelector( '.fb-share-button' ),
    counterDisplay = document.querySelector( '#output' ),
    storageKey = 'fb-share-button-click-count',
    /* read the current click count from the localStorage (on page load) */
    clickCount = parseInt( localStorage.getItem( storageKey ) );

/* update UI */
counterDisplay.innerHtml = clickCount;

if( shareButton instanceof Element ) {
    shareButton.addEventListener( 'click', function() {
        /* increase click count and set it into the localStorage */
        localStorage.setItem( storageKey, ++clickCount );

        /* update UI */
        counterDisplay.innerHtml = clickCount;
    }, false );
}

See also: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

You probably also want to send the click count to some server backend to store it in a database, but to do so, you also need a session handling to identify different users. But using a proper session handling or even a login to identify users, allows for switching the PC or browser. (Which does not work using localStorage alone).