截图：
微博：
新浪开放平台虽然有分享按钮的组件（http://open.weibo.com/sharebutton）并且提供了两种格式的应用方法：WBML和JS，但还是无法据自己的需求做到自定义样式。
为了解决该问题，我们首先来看下新浪所生成的JS代码：
<script type="text/javascript" charset="utf-8">
(function(){
var _w = 32 , _h = 32;
var param = {
url:location.href,
type:'1',
count:'', /**是否显示分享数，1显示(可选)*/
appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
title:'', /**分享的文字内容(可选，默认为所在页面的title)*/
pic:'', /**分享图片的路径(可选)*/
ralateUid:'', /**关联用户的UID，分享微博会@该用户(可选)*/
language:'zh_cn', /**设置语言，zh_cn|zh_tw(可选)*/
dpc:1
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://service.weibo.com/staticjs/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
</script>
|
在这里，可以看到新浪允许参数的自定义：
count:'' 表示是否显示当前页面被分享数量(1显示)(可选，允许为空)
url:'' 将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)
appkey:'' 用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)
title:'' 分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)
pic:'' 自定义图片地址，作为微博配图(可选，允许为空)
ralateUid:'' 转发时会@相关的微博账号(可选，允许为空)
language:'' 语言设置(zh_cn|zh_tw)(可选)
附：
AppKey申请地址：http://open.weibo.com/webmaster/add
新浪微博用户UID/数字ID查看方法：
1. 进入到用户微博主页，点击其关注和粉丝的连接，便能在地址栏中看用户的UID/数字ID。例（http://weibo.com/用户用户UID/myfllow）
2. 打开http://open.weibo.com/sharebutton，在关联账号中输入微博ID，便能在下方获得代码区域出现相关的ralateUid内容。
此时你有没发现，当单击分享以后，能够看到如带有相关参数的动态链接地址：http://service.weibo.com/share/share.php?url=&appkey=&title=&pic=&ralateUid=&language=zh_cn
如此一来，我们可以通过变量自己来创建动态链接地址，那么样式和各种细节就全由我们自己所掌控。
/* weiboShare */
function weiboShare(){
var wb_shareBtn = document.getElementById("shareBtn")
wb_url = document.URL, //获取当前页面地址，也可自定义例：wb_url = "http://www.bluesdream.com"
wb_appkey = "",
wb_title = "【蓝色梦想 BluesDream.com】自定义新浪微博分享按钮样式",
wb_ralateUid = "1654619591",
wb_pic = "http://file.bluesdream.com/wp-content/uploads/2013/01/CSS3-3D%E5%9B%BE%E4%B9%A6%E5%B1%95%E7%A4%BA-3D-Book-Showcase.jpg",
wb_language = "zh_cn";
wb_shareBtn.setAttribute("href","http://service.weibo.com/share/share.php?url="+wb_url+"&appkey="+wb_appkey+"&title="+wb_title+"&pic="+wb_pic+"&ralateUid="+wb_ralateUid+"&language="+wb_language+"");
}
weiboShare()
|
QQ：
//Qzone 分享qq时，url后面的参数一定要写对，否则打开的qq界面回是空白，或者显示"分享失败，，因为share_pic图片的路径没有写对，就可能会出现错误"
functionshare(zlpath,zlname,zlid){
//.....中间写数据样式
share_html +=
'</ul></div>'
;
$(
'body'
).prepend(share_html);
$(
'.share'
).SmohanPopLayer({Shade :
true
,Event:
'click'
,Content :
'Share'
, Title :
'分享到各大社区'
});
$(
'#Share li'
).each(
function
() {
$(
this
).hover(
function
(e) {
$(
this
).find(
'a'
).animate({ marginTop: 2},
'easeInOutExpo'
);
$(
this
).find(
'span'
).animate({opacity:0.2},
'easeInOutExpo'
);
},
function
(){
$(
this
).find(
'a'
).animate({ marginTop: 12},
'easeInOutExpo'
);
$(
this
).find(
'span'
).animate({opacity:1},
'easeInOutExpo'
);
});
});
var
share_url = encodeURIComponent(location.href);
var
share_title= encodeURIComponent(document.title);
var
share_pic =
"images/smohan.png"
;
//默认的分享图片
var
share_from = encodeURIComponent(
"毛线头知识库管理系统"
);
//分享自（仅用于QQ空间和朋友网，新浪的只需更改appkey 和 ralateUid就行）
name=zlname;
url=zlpath;
zlid1=zlid;
var
i=zlpath.lastIndexOf(
'.'
);
ext=zlpath.substr(i+1,zlpath.length);
//Qzone 分享qq时，url后面的参数一定要写对，否则打开的qq界面回是空白，或者显示"分享失败，，因为share_pic图片的路径没有写对，就可能会出现错误"
$(
'#Share li a.share1'
).click(
function
(e) {
window.open(
"http://connect.qq.com/widget/shareqq/index.html?url="
+url+
"&title="
+name+
"&pics="
+share_pic+
"&site="
+share_from+
""
,
"newwindow"
);
$(
".Smohan_Layer_box"
).hide();
});
