百度分享代码
<div class="blockcode"><blockquote><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><br><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')||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script></blockquote></div>】展示<p></p><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><div>我们经常会有分享到大网站的需求来满足用户吸引。常用的有分享到新浪/腾讯/人人网等。那么如何实现这些分享呢？今天就来探究一下，，首先了解一下第三方登录。</div><div><br></div><div>1.常用的第三方登陆</div><div>我们想要在自己的网站上提供第三方平台登录，类似这样的：</div><div><br></div><div><br></div><div>这样的需求我们是要到腾讯QQ或者新浪开发者平台申请appkey权限才能接入的第三方平台的用户数据，获取用户的昵称，头像，性别，id等信息，可以写入数据库作为本站登录的一种方式。或者用百度的开放平台，已经集成了。具体这方面的操作还是有点复杂，需要一定的耐心，大家可以到相应的平台看API文档学习。</div><div><br></div><div>2.常用的分享链接</div><div>现在的营销手段中，经常会让用户参与活动并分享给好友才能获得奖励。这样的情况下就需要一个分享功能了，现在最常用的就是分享到新浪微博，微信等。那么我们该如何完成呢？</div><div><br></div><div>方式一：通过插件代码实现</div><div><img src="https://img-blog.csdn.net/20161025222654773" border="0"><br></div><div>比如jiaThis插件，它提供了形式多样的功能强大的分享。</div><div><div class="blockcode"><blockquote><!-- JiaThis Button BEGIN --><br><div class="jiathis_style_32x32"><br> <a class="jiathis_button_qzone"></a><br> <a class="jiathis_button_tsina"></a><br> <a class="jiathis_button_tqq"></a><br> <a class="jiathis_button_weixin"></a><br> <a class="jiathis_button_renren"></a><br> <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a><br> <a class="jiathis_counter_style"></a><br></div><br><script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script><br><!-- JiaThis Button END --></blockquote></div><br></div><div>只要引入jia.js这个文件，通过相应的类名，即可实现分享。对于样式还提供可配置操作。</div><div><img src="https://img-blog.csdn.net/20161025223105153"><br></div><div>总结：通过这种方式分享，功能齐全，但是不稳定，例如我用的时候jia.js文件报错，导致请求浪费好多时间。而且功能强大有时候并不全是好事，我们只需要新浪分享的时候，加载这样一个插件未免大材小用。其实新浪微博还提供了简洁的分享方式。</div><div><br></div><div>方式二：百度分享</div><div>只需复制以下代码，即可获取如下图所示常见分享效果。</div><div><div class="blockcode"><blockquote><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><br><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')||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script></blockquote></div><br></div><div><br></div><div><br></div><div>方式三：通过链接分享（推荐）</div><div><div class="blockcode"><blockquote>$(".weib-share").click(function(){<br> var shareContent="我的速度打败了全国"+$("#rank").html()+"的人,@华企商学院,快快赐我一份大奖吧，不服来战！！！";<br> var shareText = 'http://v.t.sina.com.cn/share/share.php?url=http://www.shao-ming.com&title=' + shareContent;<br> $(this).attr("href",shareText);<br> });<br> });</blockquote></div></div><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; font-size: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden; font-family: -apple-system, "SF UI Text", Arial, ";PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures;">其中<code style="box-sizing: border-box; outline: 0px; font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, ";PingFang 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</code>是一个<span style="box-sizing: border-box; outline: 0px; font-weight: 700;">a</span>元素。</p><p style="box-sizing: border-box; outline: 0px; margin-bottom: 16px; font-size: 16px; color: rgb(77, 77, 77); line-height: 26px; overflow: auto hidden; font-family: -apple-system, "SF UI Text", Arial, ";PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-variant-ligatures: no-common-ligatures;">这是我自己写的，其实灵感是来自下面的内容。</p><div><div class="blockcode"><blockquote>网页常用分享代码：<br><br>1、新浪微博<br><a href="http://v.t.sina.com.cn/share/share.php?url=http://www.shao-ming.com&title='分享内容'" target="_blank">新浪微博</a><br><br>2、腾讯微博<br><a href="http://v.t.qq.com/share/share.php?url=http://www.shao-ming.com&title='分享内容'" target="_blank">腾讯微博</a><br><br>3、开心网<br><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><br>或者用<br><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><br><br>4、豆瓣网<br><a href="javascript:window.open('http://www.douban.com/recommend/?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">豆瓣</a><br><br>或者用<br><a href="http://www.douban.com/recommend/?url=http://www.shao-ming.com&title=douban" target="_blank">豆瓣</a><br><br>5、人人网<br><a href="javascript:window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">人人网</a><br>或者用<br><a href="http://share.renren.com/share/buttonshare.do?link=http://www.shao-ming.com" target="_blank">人人网</a><br><br>6、百度贴吧<br><a href="http://tieba.baidu.com/f/commit/share/openShareApi?url=http://www.shao-ming.com&title=hello&desc=&pic=" target="_blank">百度贴吧</a><br><br>7、QQ好友<br><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><br><br>8、QQ空间<br><a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.shao-ming.com" target="_blank">QQ空间</a><br><br>9、腾讯朋友<br><a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=http://www.shao-ming.com" target="_blank">腾讯朋友</a><br><br><br>10、百度收藏<br><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><br><br>11、优酷空间<br><a href="http://i.youku.com/u/share/?url=http://www.shao-ming.com&content='分享内容'" target="_blank">优酷空间</a><br><br>12、搜狐微博<br><a href="http://t.sohu.com/third/post.jsp?content=utf-8&url=http://www.shao-ming.com&title=souhu" target="_blank">搜狐微博</a><br><br>13、MSN<br><a href="http://profile.live.com/badge/?url=http://www.shao-ming.com&Title=msn" target="_blank">MSN</a><br><br>14、猫扑<br><a href="http://tt.mop.com/share/shareV.jsp?title=moptietie&pageUrl=http://www.shao-ming.com" target="_blank">MOP贴贴</a><br><br>15、网易微博<br><a href="http://t.163.com/article/user/checkLogin.do?link=http://www.shao-ming.com" target="_blank">网易微博</a><br><br>16、QQ书签<br><br><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><br><br>17、GOOGLE书签：<br><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><br><br>18、Twitter<br><a href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title));void(0)">Twitter</a><br><br>19、Facebook<br><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><br><br>20、Delicious书签：<br><br><a href="javascript:window.open('http://del.icio.us/post?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+'&notes=');void(0)">Delicious</a></blockquote></div><span style="box-sizing: border-box; outline: 0px; font-weight: 700; color: rgb(77, 77, 77); font-family: -apple-system, "SF UI Text", Arial, ";PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">还可以自己封装一下方法：</span><br></div><div><span style="box-sizing: border-box; outline: 0px; font-weight: 700; color: rgb(77, 77, 77); font-family: -apple-system, "SF UI Text", Arial, ";PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;"><div class="blockcode"><blockquote>var ShareTip = function(){}<br>//分享到腾讯微博<br>ShareTip.prototype.sharetoqq=function(content,url,picurl)<br>{<br> var shareqqstring='http://v.t.qq.com/share/share.php?title='+content+'&url='+url+'&pic='+picurl;<br> window.open(shareqqstring,'newwindow','height=100,width=100,top=100,left=100');<br>}<br>//分享到新浪微博<br>ShareTip.prototype.sharetosina=function(title,url,picurl)<br>{<br> var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='+picurl;<br> window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');<br>}<br>//分享到QQ空间<br>ShareTip.prototype.sharetoqqzone=function(title,url,picurl)<br>{<br> var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='+title+'&url='+url+'&pics='+picurl;<br> window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=100');<br>}</blockquote></div><span style="font-weight: 400;">以上的函数分别具有三个参数，内容，网址，以及 图片，也就是我们想要分享的内容，测试代码如下（我们可以写在一个按钮的单击事件里，关于按钮的长相，这个自己定义）</span></span></div><div><div class="blockcode"><blockquote>var share1=new ShareTip();<br>share1.sharetoqqzone("这是一本关于地图故事的集锦，以一本书的形式来展示地图故事，我们可以使用鼠标拖动来翻页，或者点击翻页按钮，点击 马上体验，可以体验故事，同时在触屏上也有很好的体验效果奥，地图故事，尽在书中，赶快体验吧，建议使用对 HTML5支持较好的浏览器","http://tm.arcgisonline.cn:8038/App101/MapstoryBook/Default.html","http://tm.arcgisonline.cn:8038/App101/MapstoryBook/css/Img/ShareBook.jpg");</blockquote></div><br></div><div>好了，希望对你有用。</div><div><br></div>
页:
[1]