轻松实现将网页“分享到”多个网站空间的悬浮按钮框
2015-10-21 14:55
603 查看
最近总看到一些朋友的空间、博客或某些网站上挂着一个悬浮框工具条,里面有一系列按钮,用于将当前网址分享到QQ空间、飞信空间、腾讯微博、新浪微博、开心网等社区。而这个悬浮框是由一个第三方网站提供的插件,悬浮框上有一个醒目的第三方网站标志,就像一个广告牌。这些挂着这个悬浮框的网站,无疑是在免费给这个第三方网站做广告,而且在做免费外链和免费流量。做网站的朋友肯定知道,这是一种很大的资源浪费(这种资源都可以换钱的)。
而且它需要下载好几个较大的js文件,对性能会有所影响,让用户产生网站慢的不好印象。
其实我们完全可以自己做这个“分享到”悬浮工具条,而不必借助第三方的插件。这个悬浮框的实现原理很简单,无非就是根据当前网页的网址和用户希望分享到的网站,来生成一个新的链接地址并跳转。
比如,当前网址是:http://www.918Le.com,而用户希望分享到“QQ空间”。则形成一个新的网址就是:http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=(escape编码后的当前网址),也就是http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http%3A%2F%2Fwww.918Le.com,我们只需要生成并跳转到这个地址即可。而之前所说的那个第三方网站所做的也只是将这些功能进行了整理封装,并做成js插件供大家引用而已。
知道了这个原理,我们可以稍加整理就做成自己的“分享到”工具条。只要把需要“分享到”的网站列出来,找到其分享地址格式,加上logo图标,稍加封装就搞定了。
有兴趣的朋友,可以看一下这个示例的代码:http://www.918Le.com/js/share.js。它兼容多种浏览器,你只要将这个文件右键另存为然后放到你的网站中,再在页面上加上<scriptsrc="js/share.js"charset="utf-8"></script>
引用它即可。你也可以根据你的需要对它加以修改,添加或删除需要分享到的网站。这个文件很小,连3K都不到,完全不会影响网站性能。 如果你希望先预览一下它的效果,可以进入这个介绍网络赚钱的网站看一下:http://www.918Le.com/,右边悬浮的就是。比较简约一些,如果你的懂js和ps,完全可以稍加改装就做的和别的网站毫不逊色。
而且它需要下载好几个较大的js文件,对性能会有所影响,让用户产生网站慢的不好印象。
其实我们完全可以自己做这个“分享到”悬浮工具条,而不必借助第三方的插件。这个悬浮框的实现原理很简单,无非就是根据当前网页的网址和用户希望分享到的网站,来生成一个新的链接地址并跳转。
比如,当前网址是:http://www.918Le.com,而用户希望分享到“QQ空间”。则形成一个新的网址就是:http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=(escape编码后的当前网址),也就是http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http%3A%2F%2Fwww.918Le.com,我们只需要生成并跳转到这个地址即可。而之前所说的那个第三方网站所做的也只是将这些功能进行了整理封装,并做成js插件供大家引用而已。
知道了这个原理,我们可以稍加整理就做成自己的“分享到”工具条。只要把需要“分享到”的网站列出来,找到其分享地址格式,加上logo图标,稍加封装就搞定了。
有兴趣的朋友,可以看一下这个示例的代码:http://www.918Le.com/js/share.js。它兼容多种浏览器,你只要将这个文件右键另存为然后放到你的网站中,再在页面上加上<scriptsrc="js/share.js"charset="utf-8"></script>
引用它即可。你也可以根据你的需要对它加以修改,添加或删除需要分享到的网站。这个文件很小,连3K都不到,完全不会影响网站性能。 如果你希望先预览一下它的效果,可以进入这个介绍网络赚钱的网站看一下:http://www.918Le.com/,右边悬浮的就是。比较简约一些,如果你的懂js和ps,完全可以稍加改装就做的和别的网站毫不逊色。
相关文章推荐
- 使用corosync+pacemaker构建高可用集群
- IIS绑定Active Directory账号自动登录网站的方法
- php获取网站根目录
- 网站集成第三方登录--sina
- dubbo_URL分析
- dubbo_URL分析
- dubbo_初识DUBBO
- dubbo_初识DUBBO
- 提升网站性能开发的10个技巧
- 设计不错的网站
- 去哪儿网代理网站机票价格采集方案
- 网站统计中的数据收集原理及实现
- [架构师]我要怎么做才能成为一名架构师
- 提升网站性能开发的10个技巧
- [架构师]怎么成为一个软件架构师
- 网站集成第三方登录--QQ
- 网站的关键!教你13步打造漂亮的WEB字体
- 18个配色(色彩搭配)资源网站——设计师福利
- 学习资料汇总(会持续更新)
- 全球知名图像研究机构网站