Using a share counter in Webflow CMS ⛽

Hello guys,

I am trying to create a share counter for my blog on Webflow.
I would like to make it like the one that appear on Mashable.

I find the plugin Sharrre on Github but I don’t know how to integrate it on Webflow.
Could you help me build it ? If you think it’s the best plugin to use.
I’m sure it will be very useful for the entire Webflow community.
Thanks in advance.
Antoine

Rough steps (use on collection template page only):

  1. Add class total-shares to an element:

     <div class="total-shares">0</div>
    
  2. Go to the collection template Page Settings > Custom Code. Paste this in the Footer Code.

     <script>
     var Webflow = Webflow || [];
     Webflow.push(function() {
       $.getScript('https://cdn.rawgit.com/Julienh/Sharrre/master/jquery.sharrre.min.js', function() {
         $('.total-shares')
           .sharrre({
             title: '',
             url: window.location,
             share: {
               facebook: true,
               digg: true,
               delicious: true,
               linkedin: true,
             },
             buttons: {
               facebook: true,
               digg: true,
               delicious: true,
               linkedin: true,
             },
             render: function (api, options) {
               $(api.element).text(options.total);
             },
           });
         setInterval(function() { $('.total-shares .buttons').remove(); }, 200);
       });
     });
     </script>
    
  3. Publish site

Demo: Is Your Child Sleeping Enough? | Singapore's Child

Hello Samuel !

Thanks a lot for your quick response !
Unfortunately it doesn’t work… Here is what I did :

  1. Add a text block element inside a div with the text : “0 shares”
    Add text span on the “0” with the class “total-shares”
  2. Paste the code you give me in the footer
  3. Publish site

Do I have to paste my url in the script to make it work ?
Antoine

Please provide the following when asking for help:

  1. Public share link for designer

  2. Published URL link

Edited code above. Replace your code.

Thanks a lot Samuel, it’s working !
It was displaying share boxes when the mouse was on the counter zone but I used the style fonction style="pointer-events: none!important;" to make it disappear.
Cheers

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.