Streaming live at 10am (PST)

Using a share counter in Webflow CMS ⛽


#1

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


#3

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: http://singaporeschild.com.sg/is-your-sleeping-enough/


#4

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


#5

Please provide the following when asking for help:

  1. Public share link for designer

  2. Published URL link


#7

Edited code above. Replace your code.


#8

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


#9

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