我们经常会有分享到大网站的需求来满足用户吸引。常用的有分享到新浪/腾讯/人人网等。那么如何实现这些分享呢?今天就来探究一下,,首先了解一下第三方登录。
1.常用的第三方登陆 我们想要在自己的网站上提供第三方平台登录,类似这样的:
这样的需求我们是要到腾讯QQ或者新浪开发者平台申请appkey权限才能接入的第三方平台的用户数据,获取用户的昵称,头像,性别,id等信息,可以写入数据库作为本站登录的一种方式。或者用百度的开放平台,已经集成了。具体这方面的操作还是有点复杂,需要一定的耐心,大家可以到相应的平台看API文档学习。
2.常用的分享链接 现在的营销手段中,经常会让用户参与活动并分享给好友才能获得奖励。这样的情况下就需要一个分享功能了,现在最常用的就是分享到新浪微博,微信等。那么我们该如何完成呢?
方式一:通过插件代码实现 比如jiaThis插件,它提供了形式多样的功能强大的分享。 <!-- JiaThis Button BEGIN --> <div class="jiathis_style_32x32"> <a class="jiathis_button_qzone"></a> <a class="jiathis_button_tsina"></a> <a class="jiathis_button_tqq"></a> <a class="jiathis_button_weixin"></a> <a class="jiathis_button_renren"></a> <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a> <a class="jiathis_counter_style"></a> </div> <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script> <!-- JiaThis Button END --> 只要引入jia.js这个文件,通过相应的类名,即可实现分享。对于样式还提供可配置操作。 总结:通过这种方式分享,功能齐全,但是不稳定,例如我用的时候jia.js文件报错,导致请求浪费好多时间。而且功能强大有时候并不全是好事,我们只需要新浪分享的时候,加载这样一个插件未免大材小用。其实新浪微博还提供了简洁的分享方式。
方式二:百度分享 只需复制以下代码,即可获取如下图所示常见分享效果。 <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
方式三:通过链接分享(推荐) $(".weib-share").click(function(){ var shareContent="我的速度打败了全国"+$("#rank").html()+"的人,@华企商学院,快快赐我一份大奖吧,不服来战!!!"; var shareText = 'http://v.t.sina.com.cn/share/share.php?url=http://www.shao-ming.com&title=' + shareContent; $(this).attr("href",shareText); }); }); ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures;">其中 ingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 22px; color: rgb(199, 37, 78); background-color: rgb(249, 242, 244); border-radius: 2px; padding: 2px 4px;">.weib-share是一个a元素。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures;">这是我自己写的,其实灵感是来自下面的内容。网页常用分享代码:
1、新浪微博 <a href="http://v.t.sina.com.cn/share/share.php?url=http://www.shao-ming.com&title='分享内容'" target="_blank">新浪微博</a>
2、腾讯微博 <a href="http://v.t.qq.com/share/share.php?url=http://www.shao-ming.com&title='分享内容'" target="_blank">腾讯微博</a>
3、开心网 <a href="javascript:window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent(document.title)+'&rurl='+encodeURIComponent(document.location.href)+'&rcontent=');void(0)">开心网</a> 或者用 <a href="http://www.kaixin001.com/repaste/share.php?rurl=http://www.shao-ming.com&rcontent=http://www.baidu.com&rtitle=kaixin" target="_blank">开心网</a>
4、豆瓣网 <a href="javascript:window.open('http://www.douban.com/recommend/?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">豆瓣</a>
或者用 <a href="http://www.douban.com/recommend/?url=http://www.shao-ming.com&title=douban" target="_blank">豆瓣</a>
5、人人网 <a href="javascript:window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">人人网</a> 或者用 <a href="http://share.renren.com/share/buttonshare.do?link=http://www.shao-ming.com" target="_blank">人人网</a>
6、百度贴吧 <a href="http://tieba.baidu.com/f/commit/share/openShareApi?url=http://www.shao-ming.com&title=hello&desc=&pic=" target="_blank">百度贴吧</a>
7、QQ好友 <a href="http://connect.qq.com/widget/shareqq/index.html?title=qqhaoyou&url=http://www.shao-ming.com&desc=还不错哦&pics=&site=优酷" target="_blank">QQ好友</a>
8、QQ空间 <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.shao-ming.com" target="_blank">QQ空间</a>
9、腾讯朋友 <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=http://www.shao-ming.com" target="_blank">腾讯朋友</a>
10、百度收藏 <a href="javascript:window.open('http://cang.baidu.com/do/add?it='+encodeURIComponent(document.title.substring(0,76))+'&iu='+encodeURIComponent(location.href)+'&fr=ien#nw=1','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes'); void 0">百度搜藏</a>
11、优酷空间 <a href="http://i.youku.com/u/share/?url=http://www.shao-ming.com&content='分享内容'" target="_blank">优酷空间</a>
12、搜狐微博 <a href="http://t.sohu.com/third/post.jsp?content=utf-8&url=http://www.shao-ming.com&title=souhu" target="_blank">搜狐微博</a>
13、MSN <a href="http://profile.live.com/badge/?url=http://www.shao-ming.com&Title=msn" target="_blank">MSN</a>
14、猫扑 <a href="http://tt.mop.com/share/shareV.jsp?title=moptietie&pageUrl=http://www.shao-ming.com" target="_blank">MOP贴贴</a>
15、网易微博 <a href="http://t.163.com/article/user/checkLogin.do?link=http://www.shao-ming.com" target="_blank">网易微博</a>
16、QQ书签
<a href="javascript:window.open('http://shuqian.qq.com/post?from=3&title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=930,height=470,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)">QQ书签</a>
17、GOOGLE书签: <a href="javascript:window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">Google</a>
18、Twitter <a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title));void(0)">Twitter</a>
19、Facebook <a class="fav_facebook" rel="nofollow" href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title));void(0)">Facebook</a>
20、Delicious书签:
<a href="javascript:window.open('http://del.icio.us/post?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+'¬es=');void(0)">Delicious</a> ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">还可以自己封装一下方法: ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;"> var ShareTip = function(){} //分享到腾讯微博 ShareTip.prototype.sharetoqq=function(content,url,picurl) { var shareqqstring='http://v.t.qq.com/share/share.php?title='+content+'&url='+url+'&pic='+picurl; window.open(shareqqstring,'newwindow','height=100,width=100,top=100,left=100'); } //分享到新浪微博 ShareTip.prototype.sharetosina=function(title,url,picurl) { var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='+picurl; window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100'); } //分享到QQ空间 ShareTip.prototype.sharetoqqzone=function(title,url,picurl) { var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='+title+'&url='+url+'&pics='+picurl; window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=100'); } 以上的函数分别具有三个参数,内容,网址,以及 图片,也就是我们想要分享的内容,测试代码如下(我们可以写在一个按钮的单击事件里,关于按钮的长相,这个自己定义)var share1=new ShareTip(); share1.sharetoqqzone("这是一本关于地图故事的集锦,以一本书的形式来展示地图故事,我们可以使用鼠标拖动来翻页,或者点击翻页按钮,点击 马上体验,可以体验故事,同时在触屏上也有很好的体验效果奥,地图故事,尽在书中,赶快体验吧,建议使用对 HTML5支持较好的浏览器","http://tm.arcgisonline.cn:8038/App101/MapstoryBook/Default.html","http://tm.arcgisonline.cn:8038/App101/MapstoryBook/css/Img/ShareBook.jpg"); 好了,希望对你有用。
|