javascript - Addthis/Sharethis VS 添加每个按钮 "manually"

Question

我想在我的新页面(显示某个帖子时)添加类似 fb、google+1、tweet 的按钮等。我知道例如 addthis 默认提供这个。但缺点是你会得到一个有点大的 javascript 文件，偶尔会抛出一些错误。所以我的问题是:在类似的情况下，你们通常会选择哪个选项以及为什么？谢谢

Answer 1

通过 addthis 包含不是我首选的包含社交按钮的方式。事实上，正如您所注意到的，有时会抛出一些错误，如果 addthis 库失败(例如 javascript 错误、服务器超时...)所有 按钮都可能失败，因为它们依赖于一个独特的库。此外，为了一个简单的性能问题，addthis 是一个加载其他脚本的脚本(它是 33kb gzipped)所以它可以避免并且我可以完全控制社交按钮包含。

我更喜欢异步加载所有需要的库，只有在我真的需要它们时才注入(inject)必要的标记，就像这样

$(document).ready(function() {

    if (('.socialshare').length) {

       /* twitter button */      
       $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('.socialshare'));
       loadscript('//platform.twitter.com/widgets.js', 'twitter')

       /* Google +1 button */      
       $('<div class="g-plusone" data-size="medium" data-annotation="bubble"   data-expandTo="top"></div>').appendTo($('.socialshare'));
       loadscript('https://apis.google.com/js/plusone.js', 'google-plusone');
    }

})

(为了性能，缓存对.socialshare的引用) loadscript 是一个像这样的简单脚本加载器函数

function loadscript(url, id) {
    var js, fjs = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) { return; }
    js = document.createElement('script'); 
    js.id = id;
    js.charset = "utf-8";
    js.src = url;
    fjs.parentNode.insertBefore(js, fjs);
};

基本上，如果我的模板包含带有社交按钮的元素(.socialshare 元素)，我会用一个 id 注入(inject)脚本元素(这样我就可以确定没有其他脚本可以将它们注入(inject)两次)