使用Jquery获取Facebook Share Count网站的所有链接

时间:2015-10-15 13:07:53

标签: javascript jquery facebook

我正在使用此脚本获取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的实际份额但是当我向我的网站添加更多像这样的脚本时,它将无法正常工作

以下是演示 - 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>

有些人可以给我解决方案或我在此脚本中缺少的内容

1 个答案:

答案 0 :(得分:0)

您不需要(也不应该)定义具有相同名称的多个方法。您已经将方法设置为将URL作为参数,因此您可以开始使用它来制作单个可重用的方法(无论如何都是这一点)。让我们改变一下,只包含它所说的内容:“获取FB计数”:

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准备就绪时,您可以运行一个小脚本,遍历它找到的所有跨度,从自定义data-url属性中提取URL,执行getfbcount方法和更新结果的跨度。

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。这对于减少页面请求的数量来说是理想的。