Question

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

Answer 1

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

我更喜欢异步加载所有需要的库，并且只有在我真的需要它时才注入必要的标记，比如

$(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（这样我确定没有其他脚本可以注入两次）

Addthis / Sharethis VS添加每个按钮＆＃34;手动＆＃34;

1 个答案: