分享到新浪腾讯人人等

admin管理员组

文章数量:1531475

我们经常会有分享到大网站的需求来满足用户吸引。常用的有分享到新浪/腾讯/人人网等。那么如何实现这些分享呢？今天就来探究一下，，首先了解一下第三方登录。

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/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/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/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/share/share.php?url=http://www.shao-ming&title=' + shareContent;
        $(this).attr("href",shareText);
        });
    });

其中.weib-share是一个a元素。

这是我自己写的，其实灵感是来自下面的内容。

网页常用分享代码：

1、新浪微博
<a href="http://v.t.sina/share/share.php?url=http://www.shao-ming&title='分享内容'" target="_blank">新浪微博</a>

2、腾讯微博
<a href="http://v.t.qq/share/share.php?url=http://www.shao-ming&title='分享内容'" target="_blank">腾讯微博</a>

3、开心网
<a href="javascript:window.open('http://www.kaixin001/repaste/share.php?rtitle='+encodeURIComponent(document.title)+'&rurl='+encodeURIComponent(document.location.href)+'&rcontent=');void(0)">开心网</a>
或者用
<a href="http://www.kaixin001/repaste/share.php?rurl=http://www.shao-ming&rcontent=http://www.baidu&rtitle=kaixin" target="_blank">开心网</a>

4、豆瓣网
<a href="javascript:window.open('http://www.douban/recommend/?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">豆瓣</a>

或者用
<a href="http://www.douban/recommend/?url=http://www.shao-ming&title=douban" target="_blank">豆瓣</a>

5、人人网
<a href="javascript:window.open('http://share.renren/share/buttonshare.do?link='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">人人网</a>
或者用
<a href="http://share.renren/share/buttonshare.do?link=http://www.shao-ming" target="_blank">人人网</a>

6、百度贴吧
<a href="http://tieba.baidu/f/commit/share/openShareApi?url=http://www.shao-ming&title=hello&desc=&pic=" target="_blank">百度贴吧</a>

7、QQ好友
<a href="http://connect.qq/widget/shareqq/index.html?title=qqhaoyou&url=http://www.shao-ming&desc=还不错哦&pics=&site=优酷" target="_blank">QQ好友</a>

8、QQ空间
<a href="http://sns.qzone.qq/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.shao-ming" target="_blank">QQ空间</a>

9、腾讯朋友
<a href="http://sns.qzone.qq/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=http://www.shao-ming" target="_blank">腾讯朋友</a>


10、百度收藏
<a href="javascript:window.open('http://cang.baidu/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/u/share/?url=http://www.shao-ming&content='分享内容'" target="_blank">优酷空间</a>

12、搜狐微博
<a href="http://t.sohu/third/post.jsp?content=utf-8&url=http://www.shao-ming&title=souhu" target="_blank">搜狐微博</a>

13、MSN
<a href="http://profile.live/badge/?url=http://www.shao-ming&Title=msn" target="_blank">MSN</a>

14、猫扑
<a href="http://tt.mop/share/shareV.jsp?title=moptietie&pageUrl=http://www.shao-ming" target="_blank">MOP贴贴</a>

15、网易微博
<a href="http://t.163/article/user/checkLogin.do?link=http://www.shao-ming" target="_blank">网易微博</a>

16、QQ书签

<a href="javascript:window.open('http://shuqian.qq/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/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/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/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)+'&notes=');void(0)">Delicious</a>

还可以自己封装一下方法：

var ShareTip = function(){}  
//分享到腾讯微博  
ShareTip.prototype.sharetoqq=function(content,url,picurl)  
{  
 var shareqqstring='http://v.t.qq/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/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/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:8038/App101/MapstoryBook/Default.html","http://tm.arcgisonline:8038/App101/MapstoryBook/css/Img/ShareBook.jpg");

好了，希望对你有用。

本文标签： 腾讯新浪