欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

使用Javascript 实现 分享到 新浪微博 QQ 空间等 自己亲自做的 有大用


下面是自己亲自做的 肯定有用

    <div class="sl_qq_qq" >
                <a href="http://service.weibo.com/share/share.php?url=http://wap.4000512126.com/dspzq/&title=制版理论课堂实录&pic=http://wap.4000512126.com//uploads/shiping/dspzq/zblrktsl.jpg" target="_blank">新浪微博</a>
 
                <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=制版理论课堂实录&title=制版理论课堂实录&url=http://wap.4000512126.com/dspzq/&desc=制版理论课堂实录&site=苏州服装学校_服装设计学校_服装制版学校_苏州吴中服装学校&pics=http://wap.4000512126.com/uploads/shiping/dspzq/zblrktsl.jpg" target="_blank">Qzone</a>
 
                <a href="http://connect.qq.com/widget/shareqq/index.html?url=http://wap.4000512126.com/dspzq&desc=%E5%88%B6%E7%89%88%E7%90%86%E8%AE%BA%E8%AF%BE%E5%A0%82%E5%AE%9E%E5%BD%95&title=%E5%88%B6%E7%89%88%E7%90%86%E8%AE%BA%E8%AF%BE%E5%A0%82%E5%AE%9E%E5%BD%95&summary=%20&pics=http://wap.4000512126.com/uploads/shiping/dspzq/zblrktsl.jpg&flash=&site=%E8%8B%8F%E5%B7%9E%E6%9C%8D%E8%A3%85%E5%AD%A6%E6%A0%A1_%E6%9C%8D%E8%A3%85%E8%AE%BE%E8%AE%A1%E5%AD%A6%E6%A0%A1_%E6%9C%8D%E8%A3%85%E5%88%B6%E7%89%88%E5%AD%A6%E6%A0%A1_%E8%8B%8F%E5%B7%9E%E5%90%B4%E4%B8%AD%E6%9C%8D%E8%A3%85%E5%AD%A6%E6%A0%A1&style=201&width=32&height=32" target="_blank">QQ好友</a>
 
<!--面的 http://sns.qzone.qq.com 和 http://connect.qq.com/  中文一定要用 urldecode() 进行 url 编码,并且要注意是 utf-8的url编码,如果是GBK就有问题  -->
//$title = urlencode(iconv('GBK','UTF-8',$arr['title']));  // 如果是GBK就转换成 UTF-8的形式 ,切记
//$webname = urlencode(iconv('GBK','UTF-8',$GLOBALS['cfg_webname'])); // 如果是GBK就转换成 UTF-8的形式 ,切记
   


我们阅读博客的时候经常会用到这样功能,当然有时候也会想把自己的网站上也加入类似的分享功能,各大厂商已经给出了相应的API,点击一个按钮即可弹出窗口进入分享,我们事先可以设置一些参数,一般常用的就是 网站的网址,图片还有一些内容描述。这里我写了三个方法,分别分享到 新浪微博,Q空间,以及腾讯微博

 

[javascript] view plain copy 
  1. <span style="font-size:24px;">var ShareTip = function()  

  2. {  

  3.     

  4. }  

  5. //分享到腾讯微博  

  6. ShareTip.prototype.sharetoqq=function(content,url,picurl)  

  7. {  

  8.  var shareqqstring='http://v.t.qq.com/share/share.php?title='+content+'&url='+url+'&pic='+picurl;  

  9.  window.open(shareqqstring,'newwindow','height=100,width=100,top=100,left=100');  

  10. }  

  11. //分享到新浪微博  

  12. ShareTip.prototype.sharetosina=function(title,url,picurl)  

  13. {  

  14.  var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='+picurl;  

  15.  window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');  

  16. }  

  17. //分享到QQ空间  

  18. ShareTip.prototype.sharetoqqzone=function(title,url,picurl)  

  19. {  

  20.  var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='+title+'&url='+url+'&pics='+picurl;  

  21.  window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=100');  

  22. }  

  23. </span>  


 

 以上的函数分别具有三个参数,内容,网址,以及 图片,也就是我们想要分享的内容

 

测试代码如下(我们可以写在一个按钮的单击事件里,关于按钮的长相,这个自己定义

 

[javascript] view plain copy 
  1. <span style="font-size:18px;">var share1=new ShareTip();  

  2.   share1.sharetoqqzone("这是一本关于地图故事的集锦,以一本书的形式来展示地图故事,我们可以使用鼠标拖动来翻页,或者点击翻页按钮,点击 马上体验,可以体验故事,同时在触屏上也有很好的体验效果奥,地图故事,尽在书中,赶快体验吧,建议使用对 HTML5支持较好的浏览器","http://tm.arcgisonline.cn:8038/App101/MapstoryBook/Default.html","http://tm.arcgisonline.cn:8038/App101/MapstoryBook/css/Img/ShareBook.jpg");</span>  


来自  http://blog.csdn.net/lowkeyway/article/details/7963603

分享到QQ空间和新浪微博


这里有2种方法来说明一下分享到QQ空间和新浪微博

html代码

<div class="one" onclick="one()">
分享到QQ空间
</div>

<div class="two" onclick="two()">
分享到新浪微博
</div>

 

 

方法一:

 

  1. <script type="text/javascript">  

  2.   

  3.         //分享到QQ空间    

  4.         function one(){  

  5.             var share1=new ShareTip();    

  6.             share1.sharetoqqzone(  

  7.                 "QQ空间测试",  

  8.                 "http://m.vickeynce.com",  

  9.                 "http://img.tiantianshangke.com/img/video/1470985253.jpg"  

  10.             );  

  11.         }  

  12.           

  13.         //新浪微博  

  14.         function two(){  

  15.             var share1=new ShareTip();    

  16.             share1.sharetosina(  

  17.                 "新浪微博测试,爱是极好的卡接收到看啦就是都好看就拉黑谁的框架安徽省电视剧和刚卡死的华国锋卡酒红色的购房款及航道",  

  18.                 "http://m.vickeynce.com",  

  19.                 "http://img.tiantianshangke.com/img/video/1470985253.jpg"  

  20.             );  

  21.         }  

  22.           

  23.   

  24.         var ShareTip = function()  {};  

  25.       

  26.             //分享到新浪微博    

  27.             ShareTip.prototype.sharetosina=function(title,url,picurl)    

  28.             {    

  29.              var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='+picurl;    

  30.              window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100');    

  31.             }    

  32.             //分享到QQ空间    

  33.             ShareTip.prototype.sharetoqqzone=function(title,url,picurl)    

  34.             {    

  35.              var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary='+title+'&url='+url+'&pics='+picurl;    

  36.              window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=100');    

  37.             }    

  38.     </script>  

 

 

 

方法二:

 

 

[javascript] view plain copy  print?在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  

  2.       

  3.           

  4.     //分享到QQ空间  

  5.         function one(){  

  6.             console.log('one')  

  7.             location.href= 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url =http://m.vickeynce.com&summary=我傻所以想要分享&site=来自于vickey新概念英语&pics=http://img.tiantianshangke.com/img/aq//h5_1470882133.jpg'  

  8.               

  9.         }  

  10.         //新浪微博  

  11.         function two(){  

  12.             console.log('two')  

  13.             location.href= 'http://service.weibo.com/share/share.php?url=http://m.vickeynce.com&appkey = 来自于vickey新概念英语&title=新浪微博分享测试&pic=http://img.tiantianshangke.com/img/aq//h5_1470882133.jpg';  

  14.               

  15.               

  16.         }  

  17.   

  18.         //QQ群和QQ好友  

  19.         function four(){  

  20.             console.log('four');  

  21.             window.open('http://connect.qq.com/widget/shareqq/index.html?url=http://www.sevenphp.com/test/test.html&desc=邀请详情&title=标题&summary=简介&pics=&flash=&site=邀请人或网站&callback="  title="QQ登')  

  22.         }  

  23.       

  24.     </script>  


参数说明:

 

 

1.新浪微博:
http://service.weibo.com/share/share.PHP?url=

count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空)
&url=将页面地址转成短域名,并显示在内容文字后面。(可选,允许为空)
&appkey=用于发布微博的来源显示,为空则分享的内容来源会显示来自互联网。(可选,允许为空)
&title=分享时所示的文字内容,为空则自动抓取分享页面的title值(可选,允许为空)
&pic=自定义图片地址,作为微博配图(可选,允许为空)
&ralateUid=转发时会@相关的微博账号(可选,允许为空)
&language=语言设置(zh_cn|zh_tw)(可选)


 

2.QQ空间:
http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?

url=分享的网址
&desc=默认分享理由(可选)
&summary=分享摘要(可选)
&title=分享标题(可选)
&site=分享来源 如:腾讯网(可选)
&pics=分享图片的路径(可选)


最后补充一个分享到QQ群,QQ好友。

这个打开的分享网页是web页面,所以不适合在移动端做分享。适合在pc端做分享

[javascript] view plain copy  print?在CODE上查看代码片派生到我的代码片
  1. //QQ群和QQ好友  

  2.     function four(){  

  3.         console.log('four');  

  4.         window.open('http://connect.qq.com/widget/shareqq/index.html?url=http://www.sevenphp.com/test/test.html&desc=邀请详情&title=标题&summary=简介&pics=&flash=&site=邀请人或网站&callback="  title="QQ登')  

  5.     }  

 


 

最后在补充一个,方便自己记忆

调起手机的拨号

 

[html] view plain copy  print?在CODE上查看代码片派生到我的代码片
  1. <a href="tel:12312312312"></a>  

来自  http://blog.csdn.net/seven0404/article/details/52704266


<a title="转发至QQ空间" charset="400-03-8" id="s_qq" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网站地址" target="_blank"><img src="http://static.youku.com/v1.0.0691/v/img/ico_Qzone.gif" /></a>
<a title="转发至人人网" charset="400-03-7" id="s_renren" href=http://share.renren.com/share/buttonshare.do?link=你的网站地址&title=标题 target="_blank"><img src="http://static.youku.com/v1.0.0691/v/img/ico_renren.gif" /></a>
<a title="转发至新浪微博" charset="400-03-10" id="s_sina" href="http://v.t.sina.com.cn/share/share.php?appkey=2684493555&url=你的网站地址&title=Uid=&source=&sourceUrl=" target="_blank"><img src="http://static.youku.com/v1.0.0691/v/img/ico_sina.gif" /></a>
<a title="分享到腾讯朋友" charset="400-03-19" id="s_pengyou" href=http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=你的网站地址&title=%标题 target="_blank"><img src="http://static.youku.com/v1.0.0691/v/img/ico_pengyou.png" /></a>
<a title="推荐到豆瓣" charset="400-03-17" id="s_douban" href=http://www.douban.com/recommend/?url=你的网站地址&title=标题  target="_blank"><img src="http://static.youku.com/v1.0.0691/v/img/ico_dou_16x16.png" /></a>
<<a title="分享至百事渴望公社" charset="400-03-21" id="s_pepsi" href="http://www.pepsi.cn/share.html?link=你的网站地址" target="_blank"><img src="http://static.youku.com/v1.0.0691/v/img/ico_pepsi.jpg" /></a>

来自  
http://blog.csdn.net/wjh_monkey/article/details/6794018



分享到QQ空间或者朋友圈代码实现

<!DOCTYPE html>

<html xmlns:wb="http://open.weibo.com/wb">
<head>
<title></title>
<meta charset="UTF-8">
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> 
(function(){
var p = {
url:'',
to:'pengyou',
desc:'',/*默认分享理由(可选)*/
summary:document.title ,/*摘要(可选)*/
title:'',/*分享标题(可选)*/
site:'',/*分享来源 如:腾讯网(可选)*/
pics:'' /*分享图片的路径(可选)*/
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
(function(){
var p = {
url:location.href,
to:'pengyou',
desc:document.title ,/*默认分享理由(可选)*/
summary:document.title ,/*摘要(可选)*/
title:document.title ,/*分享标题(可选)*/
site:'',/*分享来源 如:腾讯网(可选)*/
pics:'' /*分享图片的路径(可选)*/
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank" title="分享到腾讯朋友">腾讯朋友</a>'].join(''));
})();
(function(){
var p = {
url:location.href,
desc:document.title ,/*默认分享理由(可选)*/
summary:document.title,/*摘要(可选)*/
title:document.title,/*分享标题(可选)*/
site:'',/*分享来源 如:腾讯网(可选)*/
pics:'' /*分享图片的路径(可选)*/
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank" title="分享到QQ空间">QQ空间</a>'].join(''));
})();
 
function weixinAddContact(name){
WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e) {
WeixinJSBridge.log(e.err_msg);
//e.err_msg:add_contact:added 已经添加
//e.err_msg:add_contact:cancel 取消添加
//e.err_msg:add_contact:ok 添加成功
if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
   //关注成功,或者已经关注过
}
})
alert("aaaaa")
}
 
</script>
</head>
<body>
<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://fj.qq.com/news/wm/wm019.htm&am..." target="_blank" title="分享到腾讯朋友">腾讯朋友</a>
 
<wb:share-button addition="number" type="button" ralateUid="3183319544"></wb:share-button>
 
<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">
    </a>
    <a href="#" class="bds_qzone" data-cmd="qzone">
    </a>
    <a href="#" class="bds_tsina" data-cmd="tsina">
    </a>
    <a href="#" class="bds_tqq" data-cmd="tqq">
    </a>
    <a href="#" class="bds_renren" data-cmd="renren">
    </a>
    <a href="#" class="bds_weixin" data-cmd="weixin">
    </a>
</div>
</body>


普通分类: