javascript-Addthis / Sharethis VS“手动”添加每个按钮

2019-11-01 23:37:01 阅读：327 来源： 互联网

标签：facebook-like google-plus sharethis html javascript

我想在我的新页面中添加类似fb的google 1,tweet按钮等(显示特定帖子时).我知道例如addthis默认提供此功能.但是缺点是您会得到一个较大的JavaScript文件,偶尔会引发一些错误.所以我的问题是：在类似的情况下,人们通常会选择哪种选择以及为什么选择它们？谢谢

解决方法:

通过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(这样我就可以确定其他脚本无法将它们两次注入)

标签：facebook-like,google-plus,sharethis,html,javascript
来源： https://codeday.me/bug/20191101/1987142.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Addthis / Sharethis VS“手动”添加每个按钮