网页文章共享转发html+css+javascript实现

    现在不少网页为了更好的展示和推荐自己的优秀作品，采用了与常见社交网络相结合的方式。

    这方面做得比较专业的可以参考网站http://tj.see-say.com/，该网站对该功能进行了封装，可以直接引入其提供的js插件。

    但是对于想通过简单方式并不引用第三方文件的情况下，我们可以自己很方便的实现，今天我给大家奉献该功能实现代码，谢谢大家的关注（转载请注明来自ocean ocl）：

 1 <html>
 2     <head>
 3         <title>Share my paper</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5         <meta name="author" content="ocean ocl">
 6         <style type="text/css">
 7             a{
 8                 text-decoration:none;/*去除超链接下划线*/
 9             }
10             img{
11                 border: 0;;/*去除超链接图片蓝色边框*/
12             }
13         </style>
14     </head>
15     <body>
16         <div>文章主内容块</div>
17         
18         <!--共享代码片段-->
19         <div class="share_block">
20             <div id="sns">
21                 <script type="text/javascript">
22                     var thisTitle=document.title;
23                     var thisUrl=document.location.href;
24                     //分享转发地址
25                     var sinaUrl="http://v.t.sina.com.cn/share/share.php?title="+encodeURIComponent(thisTitle)+"&url="+encodeURIComponent(thisUrl);
26                     var qqBlogUrl='http://v.t.qq.com/share/share.php?title='+encodeURIComponent(thisTitle)+'&url='+encodeURIComponent(thisUrl);
27                     var qqZoneUrl='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title='+encodeURIComponent(thisTitle)+'&url='+encodeURIComponent(thisUrl);
28                     var renrenUrl='http://share.renren.com/share/buttonshare?title='+encodeURIComponent(thisTitle)+'&link='+encodeURIComponent(thisUrl);
29                     var kaixinUrl='http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent(thisTitle)+'&rurl='+encodeURIComponent(thisUrl);
30                 </script>
31                 <span>
32                     <img src="images/icon_link.png" />
33                 </span>
34                 <span>
35                     <a href="javascript:void(window.open(sinaUrl));" title="分享到新浪">
36                         <img src="images/weibo.png" />
37                     </a>
38                 </span>
39         
40                 <span>
41                     <a href="javascript:void(window.open(qqBlogUrl));" title="分享到腾讯微博">
42                         <img src="images/qq.png" />
43                     </a>
44                 </span>
45         
46                 <span>
47                     <a href="javascript:void(window.open(qqZoneUrl));" title="分享到QQ空间">
48                         <img src="images/qzone.png" />
49                     </a>
50                 </span>
51         
52                 <span>
53                     <a href="javascript:void(window.open(renrenUrl));" title="分享到人人网">
54                         <img src="images/renren.png" />
55                     </a>
56                 </span>
57         
58                 <span>
59                     <a href="javascript:void(window.open(kaixinUrl));" title="分享到开心网">
60                         <img src="images/kaixin.png" />
61                     </a>
62                 </span>
63         
64                 <span>
65                     <script type="text/javascript">
66                         (function(){
67                             var postMsg = {
68                                 url:location.href,
69                                 to:'qqmail',
70                                 desc:'',
71                                 summary:'',
72                                 title:'',
73                                 site:'',
74                                 pics:''
75                             };
76                             var str = [];
77                             for(var i in postMsg){
78                                 str.push(i + '=' + encodeURIComponent(postMsg[i]||''));
79                             }
80                             var qqmailHtml=["<a target='_blank' title='分享给邮箱好友'",'href="http://mail.qq.com/cgi-bin/qm_share?', str.join("&"),'"><img src="images/qqmail.png"/></a>'].join("");
81                             document.write(qqmailHtml);
82                         })();
83                     </script>
84                 </span>
85             </div>
86         </div><!--end share-->
87     </body>
88 </html>

效果如下：

 

 以下是许多网站常用的分享实现代码：

 <!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare" style="padding-top:3px; padding-left: 7px; float:left; height:16px; line-height:16px; vertical-align:bottom;">
<span class="bds_more" style="color:#fff;">分享到：</span>
<a class="bds_tsina"></a>
<a class="bds_tqq"></a>
<a class="bds_tfh"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=553433" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->
</div>
分享到：

 

posted @ 2013-04-07 11:36  心梦缘  阅读(1508)  评论(0)    收藏  举报