人人API 分享到人人功能 修改版
最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人API, 然后根据自己需要修改了一下.
首先得有一个人人给的js文件, 如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var Renren = Renren || {};
2 if(!Renren.share){
3 Renren.share = function() {
4 var isIE = navigator.userAgent.match(/(msie) ([\w.]+)/i);
5 var hl = location.href.indexOf('#');
6 var resUrl = (hl == -1 ? location.href : location.href.substr(0, hl));
7 var shareImgs = "";
8 var sl = function(str) {
9 var placeholder = new Array(23).join('x');
10 str = str
11 .replace(
12 /(https?|ftp|gopher|telnet|prospero|wais|nntp){1}:\/\/\w*[\u4E00-\u9FA5]*((?![\"| |\t|\r|\n]).)+/ig,
13 function(match) {
14 return placeholder + match.substr(171);
15 }).replace(/[^\u0000-\u00ff]/g, "xx");
16 return Math.ceil(str.length / 2);
17 };
18 var cssImport = function(){
19 var static_url = 'http://xnimg.cn/xnapp/share/css/v2/rrshare.css';
20 var b = document.createElement("link");
21 b.rel = "stylesheet";
22 b.type = "text/css";
23 b.href = static_url;
24 (document.getElementsByTagName("head")[0] || document.body).appendChild(b)
25 };
26 var getShareType = function (dom) {
27 return dom.getAttribute("type") || "button"
28 };
29 var opts = {};
30 if(typeof(imgMinWidth)!='undefined'){
31 opts.imgMinWidth = imgMinWidth || 60;
32 } else {
33 opts.imgMinWidth = 60;
34 }
35 if(typeof(imgMinHeight)!='undefined'){
36 opts.imgMinHeight = imgMinHeight || 60;
37 } else {
38 opts.imgMinHeight = 60;
39 }
40 var renderShareButton = function (btn,index) {
41 if(btn.rendered){
42 return;
43 }
44 btn.paramIndex = index;
45 var shareType = getShareType(btn).split("_");
46 var showType = shareType[0] == "icon" ? "icon" : "button";
47 var size = shareType[1] || "small";
48 var shs = "xn_share_"+showType+"_"+size;
49 var innerHtml = [
50 '<span class="xn_share_wrapper ',shs,'"></span>'
51 ];
52 btn.innerHTML = innerHtml.join("");
53 btn.rendered = true;
54 };
55 var postTarget = function(opts) {
56 var form = document.createElement('form');
57 form.action = opts.url;
58 form.target = opts.target;
59 form.method = 'POST';
60 form.acceptCharset = "UTF-8";
61 for (var key in opts.params) {
62 var val = opts.params[key];
63 if (val !== null && val !== undefined) {
64 var input = document.createElement('textarea');
65 input.name = key;
66 input.value = val;
67 form.appendChild(input);
68 }
69 }
70 var hidR = document.getElementById('renren-root-hidden');
71 if (!hidR) {
72 hidR = document.createElement('div'), syl = hidR.style;
73 syl.positon = 'absolute';
74 syl.top = '-10000px';
75 syl.width = syl.height = '0px';
76 hidR.id = 'renren-root-hidden';
77 (document.body || document.getElementsByTagName('body')[0])
78 .appendChild(hidR);
79 }
80 hidR.appendChild(form);
81 try {
82 var cst = null;
83 if (isIE && document.charset.toUpperCase() != 'UTF-8') {
84 cst = document.charset;
85 document.charset = 'UTF-8';
86 }
87 form.submit();
88 } finally {
89 form.parentNode.removeChild(form);
90 if (cst) {
91 document.charset = cst;
92 }
93 }
94 };
95 var getCharSet = function(){
96 if(document.charset){
97 return document.charset.toUpperCase();
98 } else {
99 var metas = document.getElementsByTagName("meta");
100 for(var i=0;i < metas.length;i++){
101 var meta = metas[i];
102 var metaCharset = meta.getAttribute('charset');
103 if(metaCharset){
104 return meta.getAttribute('charset');
105 }
106 var metaContent = meta.getAttribute('content');
107 if(metaContent){
108 var contenxt = metaContent.toLowerCase();
109 var begin = contenxt.indexOf("charset=");
110 if(begin!=-1){
111 var end = contenxt.indexOf(";",begin+"charset=".length);
112 if(end != -1){
113 return contenxt.substring(begin+"charset=".length,end);
114 }
115 return contenxt.substring(begin+"charset=".length);
116 }
117 }
118 }
119 }
120 return '';
121 }
122 var charset = getCharSet();
123 var getParam = function (param){
124 param = param || {};
125 param.api_key = param.api_key || '';
126 param.resourceUrl = param.resourceUrl || resUrl;
127 param.title = param.title || '';
128 param.pic = param.pic || '';
129 param.description = param.description || '';
130 if(resUrl == param.resourceUrl){
131 param.images = param.images || shareImgs;//一般就是当前页面的分享,因此取当前页面的img
132 }
133 param.charset = param.charset || charset || '';
134 return param;
135 }
136 var onclick = function(data) {
137 var submitUrl = 'http://widget.renren.com/dialog/share';
138 var p = getParam(data);
139 var prm = [];
140 for (var i in p) {
141 if (p[i])
142 prm.push(i + '=' + encodeURIComponent(p[i]));
143 }
144 var url = submitUrl+"?" + prm.join('&'), maxLgh = (isIE
145 ? 2048
146 : 4100), wa = 'width=700,height=650,left=0,top=0,resizable=yes,scrollbars=1';
147 if (url.length > maxLgh) {
148 window.open('about:blank', 'fwd', wa);
149 postTarget({
150 url : submitUrl,
151 target : 'fwd',
152 params : p
153 });
154 } else {
155 window.open(url, 'fwd', wa);
156 }
157 return false;
158 };
159 window["rrShareOnclick"] = onclick;
160 var init = function() {
161 if (Renren.share.isReady || document.readyState !== 'complete')
162 return;
163 var imgs = document.getElementsByTagName('img'), imga = [];
164 for (var i = 0; i < imgs.length; i++) {
165 if (imgs[i].width >= opts.imgMinWidth
166 && imgs[i].height >= opts.imgMinHeight) {
167 imga.push(imgs[i].src);
168 }
169 }
170 window["rrShareImgs"] = imga;
171 if (imga.length > 0)
172 shareImgs = imga.join('|');
173 if (document.addEventListener) {
174 document.removeEventListener('DOMContentLoaded', init, false);
175 } else {
176 document.detachEvent('onreadystatechange', init);
177 }
178 cssImport();
179 var shareBtn = document.getElementsByName("xn_share");
180 var len = shareBtn?shareBtn.length:0;
181 for (var b = 0; b < len; b++) {
182 var a = shareBtn[b];
183 renderShareButton(a,b);
184 }
185 Renren.share.isReady = true;
186 };
187 if (document.readyState === 'complete') {
188 init();
189 } else if (document.addEventListener) {
190 document.addEventListener('DOMContentLoaded', init, false);
191 window.addEventListener('load', init, false);
192 } else {
193 document.attachEvent('onreadystatechange', init);
194 window.attachEvent('onload', init);
195 }
196 };
197 Renren.share();
198 }
将上面的代码保存为renrenShare.js文件.
下面再给我的html测试代码:
1 <html>
2 <head>
3 <title>
4 分享到人人
5 </title>
6 <script type="text/javascript" src="renrenShare.js"></script>
7
8 <script type="text/javascript">
9 function shareClick() {
11 var txt = document.getElementById("content").value;
12 var rrShareParam = {
13 resourceUrl: 'http://mm.oureda.cn/', //那这个是什么?
14 srcUrl: 'http://www.163.com/', //这个是其中三个的链接的url
pic: 'http://img.yiyuanyi.org/2010/3/11/129127450453593750.jpg', //这个是要分享的图片
15 title: '我正在使用某某日历, 天呐, 今天的日程太值得分享了~',
16 description: txt
17 };
18 rrShareOnclick(rrShareParam);
19 }
20 </script>
21 </head>
22 <body>
23 <textarea id="content" style="overflow:auto;" rows="4" cols="100">
24 8:30 上学
25 10:00 放学
26 </textarea>
27 <br />
28 <br />
29 <a name="xn_share" onclick="shareClick()" type="button_large" href="javascript:;"></a>
30 </body>
31 </html>
下面对代码稍加注释:
1.首先是shareClick里的txt变量. 用这个是为了实现分享时自动读取网页中的一段文本(我这里是读取日程信息), 然后日程我是模拟放在了id='content'的textarea里面. 得到日程信息后, 这个信息会在分享时自动加载到"分享理由"栏里. 这对应上面代码的"description: txt" .
2.倒数第三行是一个按钮状的分享链接, 关于这个链接的样式是可以自己选择的, 这个在人人API官网可以找到.
3.shareClick()函数里, 有三个链接, 就是那三个后面跟了注释的三行.
pic是你要分享的图片, 其url我是随便在网上找的一张(这个不能是本地路径, 必须放在云端), 实际使用时, 我将用js代码读取我网站里要分享的图片的url再赋值给'pic'.
关于srcUrl 和resourceUrl 就是我的困惑了, 希望路过的大神能稍作停留解答一下:
分享后有三个可点的链接, 但其地址都是srcUrl的值. 所以我有两点疑惑:
1. resourceUrl的作用是什么?
2. 我想要的是点击三个链接中的图片链接时打开图片(因为我打算分享时将信息展示在图片上), 点击另外的打开我想分享的网站. 可是现在三个链接都是指向同一个地址, 我想请教下是否可以将那三个链接的URL区别开.