人人API 分享到人人功能 修改版

 

最近在搞一个日程管理网站, 需要实现分享到人人功能, 所以找了一下人人API, 然后根据自己需要修改了一下.

首先得有一个人人给的js文件, 如下:

  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 }

View Code

将上面的代码保存为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区别开.

 

 

 

转载于:https://www.cnblogs.com/tiny-rogue/p/3282511.html