使用Jquery获取网站Facebook份额计数的所有链接

Get All links of website Facebook Share Count using Jquery

本文关键字：链接 获取 Jquery 网站 Facebook 使用      更新时间：2023-09-26

我使用这个脚本来获取Facebook分享

<h2>
    Facebook Share of Bing 
</h2>
<span class="mod-share-nota-count likes">0</span>

<script>
    getfbcount(url);
    //Facebook
    function getfbcount(url){
        var url = 'http://www.bing.com';
        $.getJSON('http://graph.facebook.com/?ids=' + url, function(data){;
            $(".mod-share-nota-count.likes").text(data[url].shares);
        });
    }    
</script>

并获得bing的实际份额但是当我在我的网站上添加更多像这样的脚本时它就不能完美地工作了

下面是demo- Fiddle

<!-- Twitter Share -->
<h2>
    Facebook Share of Twitter 
</h2>
<span class="mod-share-nota-count likes">0</span>

<script>
    getfbcount(url);
    //Facebook
    function getfbcount(url){
        var url = 'http://www.twitter.com';
        $.getJSON('http://graph.facebook.com/?ids=' + url, function(data){;
            $(".mod-share-nota-count.likes").text(data[url].shares);
        });
    }    
</script>

<!-- Facebook Share -->
<h2>
    Facebook Share of Facebook
</h2>
<span class="mod-share-nota-count likes">0</span>

<script>
    getfbcount(url);
    //Facebook
    function getfbcount(url){
        var url = 'http://www.facebook.com';
        $.getJSON('http://graph.facebook.com/?ids=' + url, function(data){;
            $(".mod-share-nota-count.likes").text(data[url].shares);
        });
    }    
</script>

<!-- Google Share Share -->
<h2>
    Facebook Share of Google
</h2>
<span class="mod-share-nota-count likes">0</span>

<script>
    getfbcount(url);
    //Facebook
    function getfbcount(url){
        var url = 'http://www.goolge.com';
        $.getJSON('http://graph.facebook.com/?ids=' + url, function(data){;
            $(".mod-share-nota-count.likes").text(data[url].shares);
        });
    }    
</script>

<!-- Bing Share Share -->
<h2>
    Facebook Share of Bing 
</h2>
<span class="mod-share-nota-count likes">0</span>

<script>
    getfbcount(url);
    //Facebook
    function getfbcount(url){
        var url = 'http://www.bing.com';
        $.getJSON('http://graph.facebook.com/?ids=' + url, function(data){;
            $(".mod-share-nota-count.likes").text(data[url].shares);
        });
    }    
</script>

有些人可以给我解决方案，或者我在这个脚本中缺少什么

您不需要(也不应该)使用相同的名称定义多个方法。您已经设置了将URL作为参数的方法，因此您可以开始使用它来创建单个可重用的方法(无论如何，这是它们的全部意义所在)。让我们稍微改变一下，只包含它所说的内容:"Get FB Count":

function getfbcount(url, callback) {
    $.getJSON('http://graph.facebook.com/?ids=' + url, callback);
}

现在我们有一个简单的方法，它接受一个URL，但有一个回调，因为$.getJSON是异步的，我们不知道它什么时候会返回。我们使用它来传递请求完成后需要发生的事情。

你也可以简化你的标记。首先，我会将您的标记更改为如下所示。这使你需要的数据就在那里，它的结果将显示出来，并使添加额外的网站非常容易。

<span data-url="http://www.facebook.com" class="mod-share-nota-count likes">0</span>
<span data-url="http://www.twitter.com" class="mod-share-nota-count likes">0</span>
<span data-url="http://www.google.com" class="mod-share-nota-count likes">0</span>

现在，当DOM准备好时，您可以运行一个小脚本，循环遍历它找到的所有span，从自定义data-url属性提取URL，执行getfbcount方法，并使用结果更新span。

function getfbcount(url, callback) {
    $.getJSON('http://graph.facebook.com/?ids=' + url, callback);
}
$(function() {
    $('.mod-share-nota-count.likes').each(function() {
        var url = $(this).data('url');
        getfbcount(url, function(result) {
            $(this).text(result[url].shares);
        };
    });
});

jsFiddle

现在你需要做的就是添加更多的HTML标记。最后我要补充一点，我从未使用过FB图形系统——也许有更好的方式，你可以一次向它发送多个url。这将是理想的，以减少请求的数量您的页面。

相关文章：