前端之网页分享

 提高网页浏览量是提高网站信息影响的前提,提高网页浏览量的方式是多种多样的,其中向特定页面添加网页分享是一个很好的主意,网页分享实现方式很多,这里介绍一下百度分享的应用:

        一、百度分享之图标式:

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";  
  4. %>  
  5.   
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  7. <html>  
  8.     <head>  
  9.         <title>图标式</title>  
  10.     </head>  
  11.     
  12.     <body>  
  13.         <!-- Baidu Button BEGIN -->  
  14.             <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">  
  15.                 <a class="bds_qzone"></a>  
  16.                 <a class="bds_tsina"></a>  
  17.                 <a class="bds_tqq"></a>  
  18.                 <a class="bds_renren"></a>  
  19.                 <span class="bds_more">更多</span>  
  20.             </div>  
  21.             <script type="text/javascript" id="bdshare_js" data="type=tools&mini=1" ></script>   
  22.             <script type="text/javascript" id="bdshell_js"></script>   
  23.             <script type="text/javascript">  
  24.                 var bds_config = {  
  25.                     'bdText':'分享内容',  
  26.                     'bdComment':'分享评论',  
  27.                     'bdPic':'http://avatar.csdn.net/E/A/D/1_wangshuxuncom.jpg'  
  28.                 };  
  29.                 document.getElementById('bdshell_js').src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);  
  30.             </script>  
  31.         <!-- Baidu Button END -->  
  32.     </body>  
  33. </html>  

        二、百度分享之文字式:

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";  
  4.     String skinId = request.getParameter("skinId");  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.     <head>  
  10.         <title>文字式</title>  
  11.         <style type="text/css">  
  12.             a{  
  13.                 text-decoration: none;  
  14.             }  
  15.         </style>  
  16.     </head>  
  17.     
  18.     <body>  
  19.         <div class="bdsharebuttonbox">  
  20.             <a href="#" class="bds_more" data-cmd="more">分享到:</a>  
  21.             <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>  
  22.             <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>  
  23.             <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>  
  24.             <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>  
  25.             <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>  
  26.         </div>  
  27.         <script type="text/javascript">  
  28.             window._bd_share_config={  
  29.                 "common":{"bdText":"分享内容","bdComment":"分享评论","bdMini":"2","bdMiniList":false,"bdPic":"http://avatar.csdn.net/E/A/D/1_wangshuxuncom.jpg","bdStyle":"0","bdSize":"16"},  
  30.                 "share":{"bdSize":16},  
  31.                 "image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},  
  32.                 "selectShare":{"bdContainerClass":"bdsharebuttonbox","bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}  
  33.             };  
  34.             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)];  
  35.             </script>  
  36.     </body>  
  37. </html>  

        三、百度分享之浮窗式

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";  
  4. %>  
  5.   
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  7. <html>  
  8.     <head>  
  9.         <title>浮窗式</title>  
  10.         <script type="text/javascript">  
  11.             window._bd_share_config={  
  12.                 "common":{"bdText":"分享内容","bdComment":"分享评论","bdMini":"2","bdMiniList":false,"bdPic":"http://avatar.csdn.net/E/A/D/1_wangshuxuncom.jpg","bdStyle":"0","bdSize":"16"},  
  13.                 "slide":{"type":"slide","bdImg":"6","bdPos":"right","bdTop":"250"},  
  14.                 "image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},  
  15.                 "selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}  
  16.             };  
  17.             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)];  
  18.         </script>  
  19.     </head>  
  20.       
  21.     <body>  
  22.       
  23.     </body>  
  24. </html>  

        四、遇到的问题及其解决方法:

       (1)我的工程名为shareDemo,项目通过Tomcat发布,http输入http://localhost:8080/share/index.html,然后选择并点击“分享到QQ空间”,可是出来的界面不能显示分享内容(如下图),但是其它分享好用:


图片4-1-1

        解决方法:这种问题并不是你的代码写错了,而是QQ做了限制——如果http请求中为localhost,那么是不会返回结果的,可以通过将localhost改为计算机IP地址或者改为127.0.0.1解决这个问题。

        (2)使用浮窗式百度分享时,用IE打开相应的页面,没有发现所谓的“浮窗”啊,其它浏览器(譬如火狐、谷歌或者Safari)都好用?

        解决方法:嗯嗯嗯,这个问题我也曾经遇到过,几经研究发现是页面文档类型搞的鬼——研究发现如果为“<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">”,则在IE或者360浏览器中浮窗式的百度分享会不好用——显示不出来;如果为“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”则在IE或者360浏览器中浮窗式的百度分享会比较好的显示出来;上面列出的三个例子是最简单的例子,要弄清每个参数什么意思以及其它的一些配置,请访问官方网站。

更多网址:点击打开链接

展开阅读全文

没有更多推荐了,返回首页