找回密码
立即注册
搜索
  • 双赢!火箭、篮网商讨6换1交易,布里奇斯取
  • 究竟|快递小哥三年收入超百万?如何实现的
  • 云南民歌 唱响春城
  • 韩媒:中国足球在卡塔尔丢人!我们何时有底
  • 新疆禾木:冬日里的“仙境”
发新帖

1372

积分

好友

主题
发表于 2024-2-27 09:11:26 | 查看: 65| 回复: 1
<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>
】展示

本站网友
本站网友  发表于 2024-2-27 09:23:43
我们经常会有分享到大网站的需求来满足用户吸引。常用的有分享到新浪/腾讯/人人网等。那么如何实现这些分享呢?今天就来探究一下,,首先了解一下第三方登录。

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)+'&notes=');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");

好了,希望对你有用。

您需要登录后才可以回帖 登录 | 立即注册

QQ|Archiver|手机版|小黑屋|美容仪器网 ( 蜀ICP备18029467号-1 )

GMT+8, 2024-11-23 08:17 , Processed in 0.336384 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表