轻松实现将网页“分享到”多个网站空间的悬浮按钮框

最近总看到一些朋友的空间、博客或某些网站上挂着一个悬浮框工具条,里面有一系列按钮,用于将当前网址分享到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,完全可以稍加改装就做的和别的网站毫不逊色。 

时间: 2024-09-29 04:08:21

轻松实现将网页“分享到”多个网站空间的悬浮按钮框的相关文章

android网页分享到朋友圈问题求助?

目前想要实现通过QQ将网页分享到微信好友或朋友圈,看见有些APP是直接分享出去左下角图标显示的是QQ.求助各位大牛提供下思路. 这种功能是怎么实现的.应该不是通过android的系统分享实现的吧?.查了几天的资料仍然没有思路,求助各位大牛 这种功能是怎么实现的.应该不是通过android的系统分享实现的吧?.查了几天的资料仍然没有思路,求助各位大牛 这种功能是怎么实现的.应该不是通过android的系统分享实现的吧?.查了几天的资料仍然没有思路,求助各位大牛 这种功能是怎么实现的.应该不是通过a

点击网页分享按钮,触发微信分享功能

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮. 我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信号等功能. 分享到朋友圈 function weixinShareTim

对网页分享技术的思考

提高网页浏览量是提高网站信息影响的前提,提高网页浏览量的方式是多种多样的,其中向特定页面添加网页分享是一个很好的主意,网页分享实现方式很多,这里介绍一下百度分享的应用: 一.百度分享相关网址: 获取代码:http://share.baidu.com/code 帮助文档:http://share.baidu.com/help 二.百度分享之图标式: <%@ page language="java" contentType="text/html; charset=UTF-8

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏

韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 分类: PHP 2012-12-12 15:01 4256人阅读 评论(0) 收藏 举报 文西马龙:http://blog.csdn.net/wenximalong/ 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键,来控制图片的位置 这个小游戏,用面向对象会很方便,不用面向对象会很麻烦很麻烦,比如以后要讲解的坦克大战的游戏,要是用纯的面向过程或

微信网页分享标题图片自定义设置(最新)

1 前言 刚好有微信网页分享标题图片自定义设置这个需求,然后查找文档,发现有两种方案[1],但是第一种方案已经失效了,只能走第二种方案,然后根据实战配置好了,本文会写上配置中遇到的问题和解决方案,也作为记录使用,方便自己也方便他人. 2 步骤 2.1 准备工作 2.1.1 微信JS-SDK说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 2.1.2 附录6-DEMO页面和示例代码:在JS-SDK说明文档中

微信网页分享

在微信中分享某个网页,如果不调用微信的接口,分享的网页会默认显示.默认的标题是网页的title,图片会默认选取网页中大于300*300的图片,如果图片小,取不到图片,在微信中会显示默认的灰色图案.网页的简介部分会默认为网页的链接.调用微信的接口以后,分享的标题.图片.简介都可以自定义设置.下面结合在项目中的开发实践,简要总结一下如何进行微信接口的调用,实现自定义网页分享. 调用微信接口,就是进行微信公众平台的开发,主要参考微信公众平台技术文档,https://mp.weixin.qq.com/w

自己动手写js分享插件 支持https QQ空间,微信,新浪微博

废话不多说,传送门:http://download.csdn.net/detail/cometwo/9620943 支持https:https://www.aishandian.com/news-631.html 参考文章:http://www.cnblogs.com/hooray/archive/2011/09/10/2172946.html 动画效果 $(document).on("click", ".msb_main", function() { if($(t

分享一个从国外网站看到的socket程序,程序并不强悍,但能从代码中看到老外是怎么写代码的,咱可以取长补短

原文:分享一个从国外网站看到的socket程序,程序并不强悍,但能从代码中看到老外是怎么写代码的,咱可以取长补短 源代码下载地址:http://www.zuidaima.com/share/1550463702764544.htm package com.zuidaima.xs; /**************************************************************** * Version : 1.0 * Date : 02/03/2007 * Autho

META标签之关键词、网页描述设置帮助SEO网站优化(转)

ASP.NET 4.0 Web Forms针对SEO改进措施中有一个是在Page类中加了2个新属性:MetaKeywords 和MetaDescription,它们使得在后台代码类中用编程的手法设置这些值更容易,也更干净. META标签之关键词.网页描述设置能改进所选择关键字的网页相关性,有利于引擎搜索优化工作.例如:<head runat="server"> <title>ASP.NET 4.0教程</title> <meta name=&q