添加此/共享此 VS “手动”添加每个按钮

发布于 2024-12-21 21:58:20 字数 149 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

再浓的妆也掩不了殇 2024-12-28 21:58:20

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

我更喜欢异步加载所有需要的库，并仅在我确实需要它们时才注入必要的标记，就像这样

$(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 的脚本元素（以便我确信没有其他脚本可以将它们注入两次）

The inclusion via addthis is not my preferred way to include social buttons. In fact as you noticed, sometimes some errors are thrown and if the addthis library fails (e.g. javascript error, server timeout...) all buttons could fail, since they depend by a unique library. Beside, for a simple matter of performance, addthis is a script who loads other scripts (it's 33kb gzipped) so it can be avoided and I can take full control of social buttons inclusion.

I prefer load asynchronously all the needed libraries and inject the necessary markup only if I really need them, like this

$(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');
    }

})

(for the sake of performance, cache a reference to .socialshare)
loadscript is a simple script loader function like this

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);
};

basically if my template contains the element with social button (the .socialshare element) I inject the script element with an id (so that I'm sure no other script can inject them twice)

回复收藏 0 原文

~没有更多了~