Sharrre icon indicating copy to clipboard operation
Sharrre copied to clipboard

Multi sharrre buttons without repeating using the same JS code

Open yuanzhou opened this issue 12 years ago • 6 comments

First off, thank you very much for creating the cool pulgin!

I was working on a web page that has many blog posts and each post will have the FB, Twitter, and G+ sharrre buttons. I could get them work no problem, but is there a way to just do not repeat the similar JS code for each post? For example, in example 6, it uses id to target the sharrre buttons, I don't want to create the very similar JS code with different ids each time.

Is there a better solution?

yuanzhou avatar Dec 13 '12 21:12 yuanzhou

Replace $('#twitter').sharrre() by $('.twitter').sharrre() and in HTML :

:)

Julienh avatar Dec 14 '12 10:12 Julienh

Thx Julienh, I made it work last night by using the following:

<div id="twitter_1" class="twitter" data-url="" data-text=""></div>
<div id="twitter_2" class="twitter" data-url="" data-text=""></div>
<div id="twitter_3" class="twitter" data-url="" data-text=""></div>
...

Then attach sharrre to each share button

    $('.twitter').each(function(){
        var a = $(this).attr('id');
        var e_id = parseInt(a.split("_")[1]);

        $('#' + a).sharrre({
            share: {
                twitter: true
            },
            template: 'template html goes here',
            enableHover: false,
            enableTracking: true,
            click: function(api, options){
                api.simulateClick();
                api.openPopup('twitter');
            }
        });
    });

Your version seems easier and I'll try them out.

yuanzhou avatar Dec 14 '12 13:12 yuanzhou

An example : http://jsfiddle.net/JulienH/3Xamb/ :)

Julienh avatar Dec 14 '12 13:12 Julienh

Yes, it works, just tested. No need to apply each() for twitter and facebook button.

yuanzhou avatar Dec 14 '12 14:12 yuanzhou

thanks for this! i used this to share links on a page in a grid for a store.

  $('.linktoitem').append('<div class="sharebox"></div>');
  $('.sharebox').each(function(){
      var self = this;
      $link = $(this).closest('.linktoitem').attr('href');
      $(this).sharrre({
            share: {
              facebook: true,
              pinterest: true
            },
          url: $link

meelijane avatar Jun 25 '13 04:06 meelijane

Thanks guys! I got this working on my wordpress blog as well, documented the whole thing here: Custom Social Media Buttons for Wordpress!

danielset avatar Nov 15 '14 13:11 danielset