网站网页分享功能的实现

标签：

分享功能实现

分类：网站功能开发主流技术

目前主流的、比较热门的分享对象有：新浪微博、QQ空间、腾讯博客、百度空间等；实现分享功能其实还是比较简单的，只需在页面代码中具体位置加入分享代码即可，一般都是加在/《body》

标签前面，一个网页打开时是由上往下逐次加载代码的.所以在做完以上优化后，“工具样式代码”部分先被加载，而“功能代码”部分是在整个页面全部显示完毕后最后加载的,这样就减小了分享代码最初的加载量，工具显示速度更快，同时也避免了因“功能代码”加载速度影响到整体网页打开速度.
下面展示几种常见的分享功能效果及代码：

 

*由于博客会自行解析部分代码，导致代码缺失或不显示，所以用EditPlus将<>替换为《》，如果想拷贝代码的朋友请自己转换回，代码即可用。

 





横向图片形式，代码：

 

《!-- 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 --》





加入文字形式的分享栏，代码：

 

《div class="bshare-custom"》《a title="分享到"href="http://www.bShare.cn/"id="bshare-shareto" class="bshare-more"》分享到《/a》《a
title="分享到QQ空间"class="bshare-qzone"》QQ空间《/a》《a title="分享到新浪微博"class="bshare-sinaminiblog"》新浪微博《/a》《a title="分享到人人网"class="bshare-renren"》人人网《/a》《a title="分享到腾讯微博"class="bshare-qqmb"》腾讯微博《/a》《a title="分享到网易微博"class="bshare-neteasemb"》网易微博《/a》《a title="更多平台"
class="bshare-morebshare-more-icon more-style-addthis"》《/a》《span class="BSHARE_COUNTbshare-share-count"》0《/span》《/div》《script type="text/javascript"charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"》《/script》《scripttype="text/javascript"
charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"》《/script》







侧边栏形式，碰触时会有动态效果，代码：

《!-- Baidu Button BEGIN --》

《script type="text/javascript" id="bdshare_js"data="type=slide&img=1&uid=668204"》《/script》

《script type="text/javascript" id="bdshell_js"》《/script》

《script type="text/javascript"》

   document.getElementByIdx_x("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion="+ new Date().getHours();

《/script》

《!-- Baidu Button END --》

大家可以放入自己项目中试一试，希望能帮助到大家。

文章相关网址http://wangzhanjianshe.baike.com/article-72220.html

功能相关网址http://www.jiathis.com/，如果感觉转换 "<" "《"麻烦的朋友可以进这个网址进行拷贝。