更改分享功能的默认图标为自定义的图标

2015-05-07 10:36:23

我们经常在网站上采用百度分享或者是jiathis分享功能，但是他提供了默认的图标，这些传统的图标看的久了就会感觉它不舒服，希望能够使自己网站的分享图标与众不同，下面我来介绍一下实现方法。

很明显，尝试通过修改css样式的方法来修改他的图标是不可能的了。但是当你点击他的默认分享图标时你会发现地址栏里的地址非常的长，放在网址解码器里你会发现里面的是一些必要参数，也就是说我们只需要修改这些参数，然后为我们自己的图片添加click事件即可实现更改分享功能的默认图标，而且代码也非常简单。下面我来给出一个例子让大家参考一下。

下面这行代码是用来定义自己的图标，通过点击图标来分享网页内容。

 <img class="center" onclick="fenxiangxinlang()" src="images/xinlangweibo.png" style="margin-top:96%;left:34%;width:4%;cursor:pointer;">

下面这段代码是js代码，来设置分享的参数，这个例子是分享到新浪微博里，更多例子可以查看下面的演示。

function fenxiangxinlang(){
		window.open("http://s.jiathis.com/?webid=tsina&url=https://www.oecom.cn?&title=落帆亭博客&uid=1&jtss=1&summary=欢迎大家访问我的博客，博客内容涉及到web前端知识，欢迎大家前来&su=1");
	}

如果你想分享你的网站，只需要将http://lofanting.com.cn更改为你想分享的网页地址即可。