admin管理员组

文章数量:1130349

手机QQ访问时，html页面在QQ中自定义预览和自定义分享　　　　　　　　　　　　　　　　

有一天，产品说要做个自定义预览和分享功能，于是很快在微信上实现了，可是不知道在QQ上怎么实现，查看了很多网站，最后才找到了解决方案，于是想和大家分享一下。

一、首先来看看效果。

1.预览效果图

使用手机QQ客户端或者PC版的QQ发送http链接给别人后，在手机QQ端看到的并不是http链接，而是自己定义的图片和标题以及描述。

这样做的好处就是可以马上让对方了解这个页面的大概内容。

2.打开页面分享给朋友

打开的地址：http://3.wxcarlsvn.sinaapp/shareTest.html

预览效果如下图：

 

二、那么这种效果是怎么实现的呢？

本来我以为会像微信一样，腾讯提供了什么特别的接口（如微信官网文档：http://mp.weixin.qq/wiki/7/1c97470084b73f8e224fe6d9bab1625b.html）。

但是经过查找资料发现QQ并没有提供前端的接口，只有PC端和移动端app的接口。

找了好久才发现，只需要在html页面中head标签中加入如下代码即可。

<meta name="description" itemprop="description" content="这里是自定义分享的描述---Carl Zhang">
    <meta itemprop="name" content="这里是标题">
    <meta itemprop="image" content="http://static.acg12/uploads/2015/08/d338720078a8177c2ca568e91f36e4e7-192x192.png"><!-- 图片 -->


手机QQ访问时，html页面在QQ中自定义预览和自定义分享　　　　　　　　　　　　　　　　

有一天，产品说要做个自定义预览和分享功能，于是很快在微信上实现了，可是不知道在QQ上怎么实现，查看了很多网站，最后才找到了解决方案，于是想和大家分享一下。

一、首先来看看效果。

1.预览效果图

使用手机QQ客户端或者PC版的QQ发送http链接给别人后，在手机QQ端看到的并不是http链接，而是自己定义的图片和标题以及描述。

这样做的好处就是可以马上让对方了解这个页面的大概内容。

2.打开页面分享给朋友

打开的地址：http://3.wxcarlsvn.sinaapp/shareTest.html

预览效果如下图：

 

二、那么这种效果是怎么实现的呢？

本来我以为会像微信一样，腾讯提供了什么特别的接口（如微信官网文档：http://mp.weixin.qq/wiki/7/1c97470084b73f8e224fe6d9bab1625b.html）。

但是经过查找资料发现QQ并没有提供前端的接口，只有PC端和移动端app的接口。

找了好久才发现，只需要在html页面中head标签中加入如下代码即可。

<meta name="description" itemprop="description" content="这里是自定义分享的描述---Carl Zhang">
    <meta itemprop="name" content="这里是标题">
    <meta itemprop="image" content="http://static.acg12/uploads/2015/08/d338720078a8177c2ca568e91f36e4e7-192x192.png"><!-- 图片 -->


本文标签： 自定义页面手机HTMLQQ

版权声明：本文标题：手机QQ访问时，html页面在QQ中自定义预览和自定义分享 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1763771734a2962098.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。