首頁  >  文章  >  後端開發  >  javascript - QQ分享的网页如何显示旁边缩略图呀

javascript - QQ分享的网页如何显示旁边缩略图呀

WBOY
WBOY原創
2016-06-06 20:14:521423瀏覽

javascript - QQ分享的网页如何显示旁边缩略图呀

像微信是默认

标签后面的第一个img
QQ里打开分享到QQ空间,网页HTML要怎么写才能显示这个图片呢

我是用手机QQ直接打开网页链接,然后点击右上角分享。
微信可以很方便分享出去,自动捕获第一张Img的图,QQ空间就不行了。

___补充

发现一件有趣的事情,通过
坑人的手机QQ打开网页URL分享到空间,不能自动捕获图片!
通过微信打开网页URL转发到 QQ空间,完全OK的!

当然,前提是你的网页HTML文件中默认捕获第一个IMG标签
网页中

紧接着加一个

javascript - QQ分享的网页如何显示旁边缩略图呀

图片宽高大于400px,最好是一个正方形的图片

作者:张煊
链接:https://www.zhihu.com/question/21668601/answer/77707210
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

坑人的手机QQ呀,靠 干脆从微信发出分享更好~

回复内容:

javascript - QQ分享的网页如何显示旁边缩略图呀

像微信是默认

标签后面的第一个img
QQ里打开分享到QQ空间,网页HTML要怎么写才能显示这个图片呢

我是用手机QQ直接打开网页链接,然后点击右上角分享。
微信可以很方便分享出去,自动捕获第一张Img的图,QQ空间就不行了。

___补充

发现一件有趣的事情,通过
坑人的手机QQ打开网页URL分享到空间,不能自动捕获图片!
通过微信打开网页URL转发到 QQ空间,完全OK的!

当然,前提是你的网页HTML文件中默认捕获第一个IMG标签
网页中

紧接着加一个

javascript - QQ分享的网页如何显示旁边缩略图呀

图片宽高大于400px,最好是一个正方形的图片

作者:张煊
链接:https://www.zhihu.com/question/21668601/answer/77707210
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

坑人的手机QQ呀,靠 干脆从微信发出分享更好~

手机QQ也有相应的JS SDK:

http://open.mobile.qq.com/api/component/share

第一种方法:用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。
SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。

<code><meta property="og:site_name" content="Funny hours">
<meta property="og:description" content="百度一下">
<meta property="og:image" content="https://www.baidu.com/img/bd_logo1.png">
<meta property="og:title" content="百度一下就能骗你">
<meta property="og:url" content="https://www.baidu.com/"></code>

第二种方法:网页中有图片即可获取到
第三种方法:`获取“分享到QQ”按钮点击状态及自定义分享内容接口

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

对了加一个获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

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

JS-SDK说明文档

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E8.8E.B7.E5.8F.96.E2.80.9C.E5.88.86.E4.BA.AB.E5.88.B0QQ.E2.80.9D.E6.8C.89.E9.92.AE.E7.82.B9.E5.87.BB.E7.8A.B6.E6.80.81.E5.8F.8A.E8.87.AA.E5.AE.9A.E4.B9.89.E5.88.86.E4.BA.AB.E5.86.85.E5.AE.B9.E6.8E.A5.E5.8F.A3

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn