微信

初始化

调用微信JSSDK需要先做公众账号配置,简单来说有以下步骤:

  1. 在认证的公众账号上绑定一个已备案的域名
  2. 根据appId和appSecret在服务器上设置签名获取的方法
  3. 在该认证域名下的页面获取服务器签名,得到appId、timestamp、nonceStr、signature值

然后执行以下几步:

  1. 注入http://res.wx.qq.com/open/js/jweixin-1.0.0.js
  2. 调用wx.config();
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名
        jsApiList: [] // 必填,需要使用的JS接口列表
    });
  3. 调用wx.ready();
    wx.ready(function(){
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        var config = {
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: url, // 分享链接
            imgUrl: img, // 分享图标
            success: function(){
              console.log('wx config success');
            },
            cancel: function(){
              console.log('wx config cancel');
            }
        };
        wx.onMenuShareTimeline(config);
        wx.onMenuShareAppMessage(config);
        wx.onMenuShareQQ(config);
        wx.onMenuShareQZone(config);
        wx.onMenuShareWeibo(config);
    });

分享到微信好友

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

分享到朋友圈

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
   cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

分享到QQ

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});

分享到空间

wx.onMenuShareQZone({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});

手机QQ

初始化

引入QQ API需要先引用JS:http://pub.idqqimg.com/qqmobile/qqapi.js?_bid=152
(注:_bid=152表示调用手Q离线包)

手Q同时支持通过meta标签或api的方式。
两者的不同:meta是固定静态的,api可以动态更改分享的信息。

设置meta标签

手Q支持meta标签自动拉取,请设置好meta标签。

<meta itemprop="name" content="分享的标题">
<meta name="description" itemprop="description" content="分享的摘要">
<meta itemprop="image" content="分享的缩略图">
(注:手Q的meta方法需要在白名单域名下才生效,建议采用接口或组件。)

设置分享方法

mqq.ui.setOnShareHandler

监听分享点击,设置web页面分享的监听事件,用户点击右上角分享菜单后通知页面。

mqq.ui.setOnShareHandler(function(type){
  /*
  type = 3 : 微信朋友圈;
  type = 2 : 微信好友;
  type = 1 : QQ空间;
  type = 0 : QQ好友.
  */	
});

mqq.ui.shareMessage

执行分享方法,调用客户端的分享接口,分享内容给好友/群,调用后会弹出联系人选择列表,一般是接着setOnShareHandler方法在回调中使用。

mqq.data.shareMessage({
    share_url : 分享的url,
    title : 分享的标题,
    desc : 分享的摘要,
    image_url: 分享的图片地址(支持外域名),
    share_type : 分享的目标类型,[0]QQ好友,[1]QQ空间,[2]微信好友,[3]微信朋友圈,默认0,
    back : 发送消息之后是否返回到web页面,默认为false,支队share_type=0有效,
    shareElement : 分享的类型,news/audio/video,默认news(图文),
    flash_url : 流媒体url(音频、视频),
    puin : 公众账号uin,只在公众账号分享时写,
    appid : 来源appid,
    sourceName : 消息来源名称,优先读取appid,没有则读取puin,
    toUin : 分享给指定的好友或群,若有该参数则不呼起好友选择器,
    uinType : 分享给指定好友类型的类型,[0]好友,[1]群
},callback);

mqq.data.setShareInfo

设置分享出去的url,图片,文字等。(callback在ios不支持)

mqq.data.setShareInfo({
    share_url : 分享的url,
    title : 分享的标题,
    desc : 分享的摘要,
    image_url: 分享的图片地址(支持外域名)
},callback);

mqq.data.setShareURL

设置分享的URL。

mqq.data.setShareURL({
    url : 分享的url
},callback);

*一般只需要使用mqq.ui.setOnShareHandler和mqq.ui.shareMessage方法配合。

QQ空间

初始化

空间支持jsBridge,引入:
http://qzs.qq.com/qzone/phone/m/v4/widget/mobile/jsbridge.js
(注:空间在分享信息中的shareURL必须跟当前页面时同域,否则会失败。)

*在空间5.5+版本(20150708更新)开始使用mqq接口,详情见mqq用例,旧接口也会兼容保留。

设置分享

QZAppExternal.setShare(
	function(data){
		alert(JSON.stringify(data));
	},{
       	'type' : "share",
       	'image':image_url,//分享的缩略图
	    'title':title,//分享的标题
	    'summary':desc,//分享的摘要
	    'shareURL':share_url//分享的链接
    }
)

//5.5+以后新接口
mqq.invoke('share','setShare',
{
   	'type' : "share",
   	'image':imageArr,
	'title':titleArr,
	'summary':summaryArr,
	'shareURL':shareURLArr
},function(){
	that.showTips('空间分享接口设置成功!');
});

呼出分享窗口

QZAppExternal.qzoneGameBar(
	function(data){
		alert(JSON.stringify(data));
	},
	{
       	'type' : "share",
       	'image':image_url,//分享的缩略图
	    'title':title,//分享的标题
	    'summary':desc,//分享的摘要
	    'shareURL':share_url//分享的链接
    }
)

//5.5+以后新接口
mqq.invoke('ui','showShareMenu',null,function(){
	that.showTips('分享窗口弹出');
});

FACEBOOK

初始化

FB的分享接口比较简单,主要使用一种OG标记语言(Open Graph Markup )。
配合META标签进行分享信息配置,配置文档在这里:
https://developers.facebook.com/docs/sharing/webmasters

设置meta标签

FACEBOOK的所有分享信息都通过og来配置,自由度十分高。分为网站图片分享或视频源分享定制,如下:

//分享的是网页
<meta property="og:url" content="分享内容的链接" />
<meta property="og:title" content="标题" />
<meta property="og:site_name" content="网站名" />
<meta property="og:type" content="类型" />
<meta property="og:description" content="分享描述" />
<meta property="og:image" content="图片url" />
<meta property="og:image:url" content="同上,图片url" />
<meta property="og:image:secure_url" content="https图片url" />
<meta property="og:image:type" content="图片类型" />
<meta property="og:image:width" content="图片宽度" />
<meta property="og:image:height" content="图片高度" />
<meta property="og:app_id" content="页面对应appid" />
<meta property="og:locale" content="语言属性" />

//分享的是视频
<meta property="og:video" content="视频url" />
<meta property="og:video:url" content="同上,视频url" />
<meta property="og:video:secure_url" content="https视频url" />
<meta property="og:video:type" content="视频类型" />
<meta property="og:video:width" content="视频宽度" />
<meta property="og:video:height" content="视频高度" />

如上,只需要在head标签内设置好合适的meta标签,分享就能成功拉取。

官方检测工具

与此同时,FACEBOOK官方推出了分享检测组件,能用于模拟分享信息,检验抓取的内容是否正确,带给开发十分便利,地址如下:
https://developers.facebook.com/tools/debug/og/object/

附录

接口调用失败的问题

若接口调用失败,各平台会使用默认的拉取信息方法来获取分享信息。一般如下:

  • 分享标题:获取页面title标签的值或第一个h1标签的值
  • 分享正文:获取页面meta:description的值或第一个p标签的值
  • 分享图片:获取页面第一张大于250x250的图片

因此,为了避免分享接口调用失败时也能保证信息基本正确,可以这样规范结构:

<title>什么鬼万圣节</title>
<meta itemprop="name" content="什么鬼万圣节"/>
<meta itemprop="description" name="description"  content="万圣节手贱了,摇一摇,结果摇出个XX鬼!"/>
<meta itemprop="image" content="http://qzonestyle.gtimg.cn/aoi/sola/20151027103316_Gk1d6MwQqq.jpg" />

并在body下第一个位置插入以下标签:

<div style="position: absolute; opacity: 0; z-index: -1;">
    <h1 style="display:none">什么鬼万圣节-QQ空间</h1>
    <p style="display:none">万圣节手贱了,摇一摇,结果摇出个XX鬼!</p>
    <img src="http://qzonestyle.gtimg.cn/aoi/sola/20151027103327_uIVPXp1Tnc.jpg" alt="share_img">
</div>

组件&文档

第三方分享组件:

分享接口文档API: