如何在单个页面中创建多个共享按钮

Question

我正在使用一个自定义按钮进行共享按钮，其中一个按钮的计数器位于页面中，但是如果我使用多个共享按钮，则计数器显示其余的第一个按钮计数。请帮帮我。

代码供您参考

Html

<div class="social-sharing is-clean" data-permalink="My Post link">

<!-- https://developers.facebook.com/docs/plugins/share-button/ -->
<a target="_blank" href="http://www.facebook.com/sharer.php?u=my post link" class="share-facebook">
  <span class="icon"></span>
  <span class="share-count">0</span>
</a>


<a target="_blank" href="http://www.facebook.com/sharer.php?u=my post link" class="share-facebook">
  <span class="icon icon-facebook"></span>
  <span class="share-count">0</span>
</a>

的js

window.CSbuttons = window.CSbuttons || {};
CSbuttons.cache = {
    shareButtons: $('.social-sharing')
}
CSbuttons.init = function() {
    CSbuttons.socialSharing();
}
CSbuttons.socialSharing = function() {
    var buttons = CSbuttons.cache.shareButtons,
        permalink = buttons.attr('data-permalink'),
        shareLinks = buttons.find('a').addClass('tester'),
        socialCounts = buttons.find('span.share-count');
    // Get share stats from respective APIs
    var fbLink = $('.share-facebook'),


    if (fbLink.length) {
        $.getJSON('https://graph.facebook.com/?id=' + permalink + '&callback=?', function(data) {
            if (data.shares) {
                fbLink.find('.share-count').text(data.shares).addClass('is-loaded');
            }
            /*else {
                    fbLink.find('.share-count').remove();
                  }*/
        });
    };

帮我解决我需要添加的内容..

Answer 1

我在这里编写了一段代码：http://jsfiddle.net/u5rw04qv/1/

我注意到有一个语法错误，我通过更改修复：

twitLink = $('.share-twitter'),

为：

twitLink = $('.share-twitter');

修复此语法错误会使您的代码有效吗？除了

之外，我认为这是正确的

修改

根据我如何理解这个问题来解决它：

带有2个facebook按钮的HTML示例

<a target="_blank" href="http://www.facebook.com/sharer.php?u=my post link" class="share-facebook" id="facebookLink1" data-permalink="permalink1">
  <span class="icon"></span>
  <span class="share-count">0</span>
</a>

<a target="_blank" href="http://www.facebook.com/sharer.php?u=my other post link" class="share-facebook" id="facebookLink2" data-permalink="permalink2">
  <span class="icon"></span>
  <span class="share-count">0</span>
</a>

对应的JavaScript：

window.CSbuttons = window.CSbuttons || {};
CSbuttons.cache = {
    shareButtons: $('.social-sharing')
}
CSbuttons.init = function() {
    CSbuttons.socialSharing();
}
CSbuttons.socialSharing = function() {
    var buttons = CSbuttons.cache.shareButtons,
        permalink = buttons.attr('data-permalink'),
        shareLinks = buttons.find('a').addClass('tester'),
        socialCounts = buttons.find('span.share-count');
    // Get share stats from respective APIs
    var fbLink1 = $('#facebookLink1'),
    fbLink2 = $('#facebookLink2');


    if (fbLink1.length) {
        $.getJSON('https://graph.facebook.com/?id=' + fbLink1.attr("data-permalink") + '&callback=?', function(data) {
            if (data.shares) {
                fbLink1.find('.share-count').text(data.shares).addClass('is-loaded');
            }
            /*else {
                    fbLink.find('.share-count').remove();
                  }*/
        });
    }

    if (fbLink2.length) {
        $.getJSON('https://graph.facebook.com/?id=' + fbLink2.attr("data-permalink") + '&callback=?', function(data) {
            if (data.shares) {
                fbLink2.find('.share-count').text(data.shares).addClass('is-loaded');
            }
            /*else {
                    fbLink.find('.share-count').remove();
                  }*/
        });
    }
};

通过在2个facebook按钮中添加id，我可以区分它们并以不同方式处理它们的情况。

简化版：

window.CSbuttons = window.CSbuttons || {};
CSbuttons.cache = {
    shareButtons: $('.social-sharing')
}
CSbuttons.init = function() {
    CSbuttons.socialSharing();
}
CSbuttons.socialSharing = function() {
    var buttons = CSbuttons.cache.shareButtons,
        shareLinks = buttons.find('a').addClass('tester'),
        socialCounts = buttons.find('span.share-count');

    // Get share stats from respective APIs
    $(".share-facebook").each(function(i, e){
        $.getJSON('https://graph.facebook.com/?id=' + $(e).attr("data-permalink") + '&callback=?', function(data) {
            if (data.shares) {
                $(e).find('.share-count').text(data.shares).addClass('is-loaded');
            }
        });
    });
};