js分享功能实现

分享功能初步测试,title为当前页面的title。 其他详见注释!!!

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
    <title>分享代码测试</title>
    <meta name="author" content="rainna" />
    <meta name="keywords" content="rainna‘s js lib" />
    <meta name="description" content="js" />
    <style>
        *{margin:0;padding:0;}
        img{border:0 none;}
        body{background:#eee;}
        .m-box{width:800px;margin:0 auto;padding:20px;background:#fff;}
        .m-box p{margin:0 0 10px;}
        .m-box .icn a{display:block;width:55px;height:35px;background:url(‘http://l.bst.126.net/rsc/img/weibo.png?035‘) no-repeat;}
        .m-box .icn .wb1{background-position:10px -216px;}
        .m-box .icn .wb2{background-position:-190px -216px;}
        .m-box .icn .wb3{background:url(http://l.bst.126.net/rsc/img/postshare/tieba24.png) 15px 0 no-repeat;}
        .m-box .icn .wb4{background-position:-88px -215px;}
        .m-box .icn .wb5{background-position:-138px -216px;}
        .m-box .icn .wb6{background-position:-245px -216px;}
        .m-box .icn .wb7{background-position:-300px -216px;}
        .m-box .icn .wb8{background-position:-355px -216px;}
        .m-box .icn .wb9{background-position:-415px -215px;}
    </style>
</head>
<body>
    <div class="m-box">
        <p>分享到微信,易信:</p>
        <div class="icn"><img width="200" src="https://qr.api.cli.im/qr?data=http%253A%252F%252Fwww.cnblogs.com%252FCooLLYP%252F&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=280&kid=cliim&key=6b3febe84f9780fb193f9d8f9d189e4f" /></div>
    </div>
    <div class="m-box">
        <p>分享到新浪微博:<a href="http://open.weibo.com/wiki/ShareCode" target="_blank">http://open.weibo.com/wiki/ShareCode</a></p>
        <div class="icn"><a href="#" class="wb1" onclick="shareToSinaWB(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到QQ空间:<a href="http://connect.qq.com/intro/share/" target="_blank">http://connect.qq.com/intro/share/</a></p>
        <div class="icn"><a href="#" class="wb2" onclick="shareToQzone(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到百度贴吧:<a href="http://share.baidu.com/code/advance" target="_blank">http://share.baidu.com/code/advance</a></p>
        <div class="icn"><a href="#" class="wb3" onclick="shareToTieba(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到豆瓣:</p>
        <div class="icn"><a href="#" class="wb4" onclick="shareToDouban(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到腾迅微博:<a href="http://dev.t.qq.com/websites/share/" target="_blank">http://dev.t.qq.com/websites/share/</a></p>
        <div class="icn"><a href="#" class="wb5"  onclick="shareToQQwb(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到开心网:<a href="http://open.kaixin001.com/document.php?type=records#code" target="_blank">http://open.kaixin001.com/document.php?type=records#code</a></p>
        <div class="icn"><a href="#" class="wb7" onclick="shareToKaixin(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到facebook:</p>
        <div class="icn"><a href="#" class="wb8" onclick="shareToFacebook(event)"></a></div>
    </div>
    <div class="m-box">
        <p>分享到Twitter:</p>
        <div class="icn"><a href="#" class="wb9" onclick="shareToTwitter(event)"></a></div>
    </div>
    <script>
        var _title,_source,_sourceUrl,_pic,_showcount,_desc,_summary,_site,
            _width = 600,
            _height = 600,
            _top = (screen.height-_height)/2,
            _left = (screen.width-_width)/2,
            _url = ‘http://www.cnblogs.com/CooLLYP/‘,
            _pic = ‘https://pic.cnblogs.com/avatar/1035330/20160929170744.png‘;
        //分享到新浪微博
        function shareToSinaWB(event){
            event.preventDefault();
            var _shareUrl = ‘http://v.t.sina.com.cn/share/share.php?&appkey=895033136‘;     //真实的appkey,必选参数
            _shareUrl += ‘&url=‘+ encodeURIComponent(_url||document.location);     //参数url设置分享的内容链接|默认当前页location,可选参数
            _shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title);    //参数title设置分享的标题|默认当前页标题,可选参数
            _shareUrl += ‘&source=‘ + encodeURIComponent(_source||‘‘);
            _shareUrl += ‘&sourceUrl=‘ + encodeURIComponent(_sourceUrl||‘‘);
            _shareUrl += ‘&content=‘ + ‘utf-8‘;   //参数content设置页面编码gb2312|utf-8,可选参数
            _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);  //参数pic设置图片链接|默认为空,可选参数
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,top=‘+_top+‘,left=‘+_left+‘,toolbar=no,menubar=no,scrollbars=no, resizable=1,location=no,status=0‘);
        }
        //分享到QQ空间
        function shareToQzone(event){
            event.preventDefault();
            var _shareUrl = ‘http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?‘;
            _shareUrl += ‘url=‘ + encodeURIComponent(_url||document.location);   //参数url设置分享的内容链接|默认当前页location
            _shareUrl += ‘&showcount=‘ + _showcount||0;      //参数showcount是否显示分享总数,显示:‘1‘,不显示:‘0‘,默认不显示
            _shareUrl += ‘&desc=‘ + encodeURIComponent(_desc||‘分享的描述‘);    //参数desc设置分享的描述,可选参数
            _shareUrl += ‘&summary=‘ + encodeURIComponent(_summary||‘分享摘要‘);    //参数summary设置分享摘要,可选参数
            _shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title);    //参数title设置分享标题,可选参数
            _shareUrl += ‘&site=‘ + encodeURIComponent(_site||‘‘);   //参数site设置分享来源,可选参数
            _shareUrl += ‘&pics=‘ + encodeURIComponent(_pic||‘‘);   //参数pics设置分享图片的路径,多张图片以"|"隔开,可选参数
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,top=‘+_top+‘,left=‘+_left+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        //分享到百度贴吧
        function shareToTieba(event){
            event.preventDefault();
            var _shareUrl = ‘http://tieba.baidu.com/f/commit/share/openShareApi?‘;
            _shareUrl += ‘title=‘ + encodeURIComponent(_title||document.title);  //分享的标题
            _shareUrl += ‘&url=‘ + encodeURIComponent(_url||document.location);  //分享的链接
            _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);    //分享的图片
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        //分享到豆瓣
        function shareToDouban(event){
            event.preventDefault();
            var _shareUrl = ‘http://shuo.douban.com/!service/share?‘;
            _shareUrl += ‘href=‘ + encodeURIComponent(_url||location.href);    //分享的链接
            _shareUrl += ‘&name=‘ + encodeURIComponent(_title||document.title);    //分享的标题
            _shareUrl += ‘&image=‘ + encodeURIComponent(_pic||‘‘);    //分享的图片
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        //分享到腾迅微博
        function shareToQQwb(event){
            event.preventDefault();
            var _shareUrl = ‘http://v.t.qq.com/share/share.php?‘;
            _shareUrl += ‘title=‘ + encodeURIComponent(_title||document.title);    //分享的标题
            _shareUrl += ‘&url=‘ + encodeURIComponent(_url||location.href);    //分享的链接
            _shareUrl += ‘&appkey=5bd32d6f1dff4725ba40338b233ff155‘;    //在腾迅微博平台创建应用获取微博AppKey
            _shareUrl += ‘&site=‘ + encodeURIComponent(_site||‘‘);   //分享来源
            _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);    //分享的图片,如果是多张图片,则定义var _pic=‘图片url1|图片url2|图片url3....‘
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        //分享到开心网
        function shareToKaixin(event){
            event.preventDefault();
            var _shareUrl = ‘http://www.kaixin001.com/rest/records.php?‘;
            _shareUrl += ‘url=‘ + encodeURIComponent(_url||location.href);    //分享的链接
            _shareUrl += ‘&content=‘ + encodeURIComponent(‘分享的文字‘);    //需要分享的文字,当文字为空时,自动抓取分享网址的title
            _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);     //分享的图片,多个使用半角逗号分隔
            _shareUrl += ‘&showcount=0‘;    //是否显示分享数,显示:‘1‘,不显示:‘0‘
            _shareUrl += ‘&style=11‘;      //显示的样式,必选参数
            _shareUrl += ‘&aid=‘ + encodeURIComponent(_site||‘‘);    //显示分享来源
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        function shareToKaixin2(event){
            event.preventDefault();
            var _shareUrl = ‘http://www.kaixin001.com/repaste/share.php?‘;
            _shareUrl += ‘rtitle=‘ + encodeURIComponent(_title||document.title);   //分享的标题
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        //分享到facebook
        function shareToFacebook(event){
            event.preventDefault();
            var _shareUrl = ‘http://www.facebook.com/sharer/sharer.php?‘;
            _shareUrl += ‘u=‘ + encodeURIComponent(_url||location.href);    //分享的链接
            _shareUrl += ‘&t=‘ + encodeURIComponent(_title||document.title);    //分享的标题
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
        //分享到Twitter
        function shareToTwitter(event){
            event.preventDefault();
            var _shareUrl = ‘http://twitter.com/intent/tweet?‘;
            _shareUrl += ‘url=‘ + encodeURIComponent(_url||location.href);    //分享的链接
            _shareUrl += ‘&text=‘ + encodeURIComponent(_title||document.title);    //分享的标题
            window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
        }
    </script>
</body>
</html>
时间: 2024-10-09 15:49:31

js分享功能实现的相关文章

关于js分享功能的一些心得

1:微信js-sdk http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html# 在签名config一系列操作正确的情况下,检测手机端是否支持接口状况,关于微信提供的各种接口大概分成几种情况,一种是不需要严格用户信息的,换言之,就是你调用文档里的接口就可以使用了,比如预览图片之类:一种需要用户信息的,比如授权地理位置之类,这种就比较常见,通常得配置好官方文档需要的资源.最后一种我用到的就是分享功能了,微信sdk提供

微信的分享功能(针对web手机站页面进行的分享功能)

把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){ var lujing=$("#logimg").attr("src");  //分享中带有的图片 var url=window.location.href;         //分享页的地址 var title=document.title;             //分享内容的标题 weixin("http://m.e-iot.com/images/b

实现分享功能插件2---jiathis分享插件应用

博主原创:未经博主允许,不得转载 在上一篇的博文中分享了如何用百度分享插件实现分享功能,现在展示用jiathis进行实现分享功能: 主要代码如下: <body> <div class="jiathis_style_32x32"> <a class="jiathis_button_qzone"></a> <a class="jiathis_button_tsina"></a>

自己封装的一个JS分享组件

因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. 这次的核心就是:JS只负责事件+结构,也就是把功能实现出来,具体的外观样式,则使用者自己进行定义. 以下是新版分享插件的代码: 1 (function(root){ 2 'use strict'; 3 function share(params){ 4 5 this.params = params;

调用新浪微博接口,实现“分享”功能——代码实现

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <p>点击下面的按钮可以将这段文字和图片分享到新浪微博哦!@独行冰海</p> <img src='http://t.cn/zRxMzZE' title='独

【微信开发】【Asp.net MVC】-- 微信分享功能

内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口安全域名 这需要使用微信的jssdk,先需要在微信公众号后台进行设置:公众号设置-->功能设置-->JS接口安全域名.打开这个页面之后你会看到下面的提示.需要先下载这个文件并上传到指定域名的根目录. 这个文件里面是一个字符串,从名称看是用来校验用的.先上传了这个文件,你才能保存成功.这样你就可以使

实现分享功能插件一---百度分享插件应用

博主原创:未经博主允许,不得转载 在做项目的时候,碰到实现分享的功能,在网上搜了很多的资料,实现分享主要有两种插件. 一种插件是百度分享的插件,另一种是jiathis进行实现分享. 先展示用百度分享插件如何实现,具体代码如下,其实现的功能为实现视频分享,并带视频图片: <body> <div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_weixin&qu

整理简易分享功能

在做一个新项目时,需要一个新浪和微信的分享功能,起初看到这个需求,感觉没有什么,直接使用第三方比较成熟的分享组件就可以的,比如:jiathis.百度分享组件,这些都可以很轻松并且方便的完成所需要的分享任务.一般情况下,在介绍这么多之后,总要有一个但是.这次也不例外,考虑到某种原因,公司不能使用第三方的分享组件,此时就有了我现在的做的事情.做一个比较基础的分享功能,并且只提供了四新浪微博.腾讯微博.腾讯空间.微信.人人的分享功能,实现特别简单,这里只做整理. 说明: 原生JS实现,可以任何框架完美

微信分享功能不可用+不能产生回调

之前微信分享一直正常可用,可最近报出微信分享后不能按规定的图片描述链接分享,而且不能产生回调导致不能通过分享增加用户参与活动次数,老代码如下: document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { window.shareData = { "imgUrl": "{$shareimg}", "timeLineLink": "{$shareli