一个页面添加多个/不同地址/QQ微博一键转播按钮-有趣的事

一个页面添加多个/不同地址/QQ微博一键转播按钮

2011-04-17 阅读 37

www.huilinwang.com的列表页中每篇文章都需要有一键分享的按钮，目前使用的是jiathis.com提供的公共函数。

不过目前还没有发现jiathis对于转播、分享中图片的处理方法。

查看了QQ的转播代码，提供了相应的功能。但是官方的代码直接获取了添加按钮的页面分享方式，并没有提供如何处理同一个添加多个转播按钮，同时需要转播不同内容的方法。

其实很简单，修改QQ微博官方提供的代码即可实现。

原始代码：

<pre class="brush:xml;">    ＜a href="javascript:void(0)" onclick="postToWb();" class="tmblog"＞＜img src="http://v.t.qq.com/share/images/s/b32.png" /＞＜/a＞
＜script type="text/javascript"＞
function postToWb(){
	var _t = encodeURI(document.title);
	var _url = encodeURIComponent(document.location);
	var _appkey = encodeURI('appkey');//你从腾讯获得的appkey
	var _pic = encodeURI('');//（例如：var _pic='图片url1|图片url2|图片url3....）
	var _site = '';//你的网站地址
	var _u = 'http://v.t.qq.com/share/share.php?url='+_url+'&amp;appkey='+_appkey+'&amp;site='+_site+'&amp;pic='+_pic+'&amp;title='+_t;
	window.open( _u,'', 'width=700, height=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no' );
}
＜/script＞
```
<p>
	分析：</p>
<ol><li>
		可以分为两部分：1，链接用于产生点击动作的部分；2，处理点击部分的代码，可以看到这里直接获取所在页面的地址进行了处理</li>
	<li>
		根据如此我们只需要将处理函数获取本页面地址的部分替换为传入参数即可；</li>
</ol><p>
	修改后代码：</p>
<p>
	第一部分，产生点击动作部分：</p>
<pre class="brush:xml;">    ＜a  title="分享到腾讯微博" onclick="javascript:postToQQWb('标题', '描述', '图片地址|分割');" href="javascript:;"＞＜/a＞
```
<p>
	第二部分，函数处理部分（ps：页面里面只需要包含一次即可）：</p>
<pre class="brush:jscript;">    function postToQQWb(in_t, in_url, in_pic){
	var _t = encodeURI(in_t);
	var _url = encodeURIComponent(in_url);
	var _appkey = encodeURI('f91c1dae2cbd4e46ba594dd9d3dcce72');//你从腾讯获得的appkey
	var _pic = encodeURI(in_pic);//（例如：var _pic='图片url1|图片url2|图片url3....）
	var _site = 'http://www.huilinwang.com';//你的网站地址
	var _u = 'http://v.t.qq.com/share/share.php?url='+_url+'&amp;appkey='+_appkey+'&amp;site='+_site+'&amp;pic='+_pic+'&amp;title='+_t;
	window.open( _u,'', 'width=700, height=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no' );
}
```