社交网站分享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来减少垃圾评论。了解我们如何处理您的评论数据。