社交网站分享js插件

这几天闲来无事,给博客做了些小优化。

1,减少http请求数量:css合并,js合并,图片合并。

2,减少代码里的空白以及无用代码:css采取一行的格式,js也大幅简化,减少不必要的div嵌套,不过这样一来也彻底的不支持ie6了(ie6快快消失吧!)。

写了个社交网站分享的小插件,其实网上这种插件很多,不过基本都有广告,而且也太臃肿,毕竟咱服务器在美国,硬件上没办法,只好在代码上动手脚了。

具体效果参看此文章底部,没事你可以点击分享下哈。

源文件下载:社交网站分享插件

具体参数介绍:

1
2
3
4
5
6
7
8
9
10
$('#shareC').share(
  	{
  		showIndex:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
   		liMargin:15,
  		bigImg:false,
  		showFont:true,
  		imgUrl:'images/',
  		share:[{title:'twitter',click:'twitter'},{title:'新浪微薄',click:'tsina'},{title:'qq微博',click:'tqq'},{title:'搜狐微博',click:'tsohu'},{title:'网易微博',click:'t163'},{title:'facebook',click:'fbook'},{title:'豆瓣',click:'douban'},{title:'人人网',click:'renren'},{title:'开心网',click:'kaixin001'},{title:'Qzone',click:'qzone'},{title:'百度搜藏',click:'baidu'},{title:'鲜果',click:'xianguo'},{title:'抓虾',click:'zhuaxia'},{title:'delicious',click:'delicious'},{title:'qq书签',click:'qq'},{title:'雅虎收藏',click:'yahoo'}]
	}
);

这是share的默认参数,也就是说假如你只写了个 $(‘#shareC’).share() 的话就相当于上面那一大段,要修改那个参数的话直接覆盖就ok啦。

先来介绍各参数的作用:

shareC:你的容器id,熟悉jquery的话很容易理解啦。不熟悉的话就死记硬背下来往哪放就写那容器的id就行啦。

showIndex:显示图标的坐标,0~15各对应一个图标,想要哪个就写哪个,不写就是全有。

liMargin:各个图标之间的间距,以像素为单位。

bigImg:false是小图标,true是大图标,就此文章底下那套。

showFont:是否显示 分享到:3个字(不要较真说还有个冒号),也是true和false。

imgUrl:这个是关键,能不能显示图标就看你图片url能不能设对,下载包里就两张图片,把它们放到哪里随你的便,别盗我的链就好,图片上传好后记得把这个参数设置为那两张图片所在文件夹的路径,记得加 /

share:这个别动啦,非要想动自己看源文件吧。

比如说我现在想写一个图标间距16像素,大图标,只显示前5个,不显示文字,图片放在 http://yu123.me/theme/images/文件夹下的分享代码,就像下面

1
2
3
4
5
6
7
8
9
$('#shareC').share(
  	{
  		showIndex:[0,1,2,3,4],
   		liMargin:16,
  		bigImg:true,
  		showFont:false,
  		imgUrl:'http://yu123.me/theme/images/'
        }
);

全部显示,间距默认,显示文字,图片放在 http://yu123.me/images/ 的代码就是

1
2
3
4
5
$('#shareC').share(
  	{
  		imgUrl:'http://yu123.me/theme/images/'
        }
);

明白了吧,默认的就不写,想修改哪个再写哪个,还有,使用前记得导入jquery,不会导的自己Google去。

代码很简单,不过为了省事,我大部分都写了行内样式,有折腾精神的同学自己研究下,很容易理解的。

再放一遍下载链接,源文件下载:社交网站分享插件

16 条评论在 “社交网站分享js插件

  1. 怎么在我的网页上实现你这个js插件分享这个效果,单独打开你那个能实现 嵌入自己网页就出现缺少元素的提示 该怎么处理才好 :c4

    • 首先你要在head导入share.js,其次需要一个容器来存放这个分享,上文的$(‘#shareC’)里的shareC就是存放类的id,替换即可,另外,你网站到期啦 :b5

    • 假如要在文章页面加的话就在你的single.php里加,
      假如要在全站加的话就在你的footer.php里添加一段javascript;
      比如$(‘body’).append(‘<div id=shareC><div>’),将shareC添加入body里,然后再接$(‘#shareC’).share();
      另外你也可以在侧边栏加入,小工具里拖拽一个文本,输入'<div id=shareC></div>’后面接代码,
      <div id=shareC></div>就是它的定位,你只要能想办法把它放到你想要的部位就可以了

    • showIndex 参数里把2放在最前面就可以,例如:
      $('#shareC').share(
      {
      showIndex:[2,0,1,3,4,5,6,7,8,9,10,11,12,13,14,15]
      }
      );

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据