web内容分享JiaThis

阅读:441
作者:majingjing
发布:2018-01-03 10:26:53

最近网站在做web分享的时候首先考虑到百度的分享插件。

在使用的时候非常的费劲,这里说下使用的问题

  1. 页面的兼容性很不友好,自定义图标后还得重写它本身的样式文件
  2. 对分享的链接也有限制,比如分享给QQ好友的时候链接地址复杂的情况下导致好友列表加载不出来
  3. 无法直接通过api来发送分享请求
  4. 唯一的优点就是提供了几个函数来动态修改分享的配置参数

最后因为链接带有推荐码很复杂时出现上述2情况,导致无法完成要求,最终换用了JiaThis插件来完成

1.png

这里简单记录下分享示例

本示例采用的是 直接通过JiaThis API接口分享 因为需要使用我们自定义好的分享图标,所以采用此种方式非常简单。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<body>
<h2>网页分享!</h2>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<a href="#" data-cmd="weixin" target="_blank">weixin</a> 
<a href="#" data-cmd="cqq" target="_blank">cqq</a>
<a href="#" data-cmd="tsina" target="_blank">tsina</a>
<a href="#" data-cmd="qzone" target="_blank">qzone</a> 

<script "text/javascript">

$(function(){
	var tm_share_config = {
		url: "https://www.majingjing.cn/tmblog/web/blogs", 
		title: "TMBlog技术文章分享", 
		summary:"搭建这个网站主要的目的是记录一些自己在项目开发过程中积累的经验和一些问题的解决方案。希望可以帮助到更多的小伙伴们。同时也希望和小伙伴们一起交流技术。",
		pic:"https://www.majingjing.cn/tmblog/resources/web/tmblog/images/head.png",
		uid:"2131062"
	}
	$('a[data-cmd]').each(function(){
		var webid = $(this).attr('data-cmd');
		
		var url = 'http://www.jiathis.com/send/?webid='+webid;
		for(var a in tm_share_config){
			url = url + '&'+a+'='+tm_share_config[a];
		}
		$(this).attr('href',url);
	});
});

</script> 

</body>

</html>