微信实现分享链接的缩略图和标题

本文主要和大家分享微信实现分享链接的缩略图标题,希望能帮助到大家。

一、微信内分享

在微信内打开链接后,点右上角【…】选择【发送给朋友】或【分享到朋友圈】,这种分享方式获取缩略图的方法:

方法一:在页面 body 最上方添加 300*300 像素的 img

如该图片不需要显示,可以用 css 隐藏,但不能直接对 img 设置 display: none;。

可以在父层 p 上设置 display: none; 或者对 img 设置 position: absolute; visibility: hidden;。

微信实现分享链接的缩略图和标题

登录后复制

方法二:通过微信 JS-SDK 的分享接口

这种方法需要一个微信公众号的 app_id,同时需要一个后端服务生成 signature。好处是可以定制分享的标题、缩略图、描述。

二、从浏览器分享

在浏览器打开链接后,点分享图标,选择【微信】,这种分享方式获取缩略图的方法:

在页面的 head 部分添加 Open Graph Metadata:


登录后复制

其中 og:image 影响浏览器分享时的图标,需要指定图片的完整路径。

以上就是微信实现分享链接的缩略图和标题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/1517959.html

(0)
上一篇 2025年2月18日 05:33:00
下一篇 2025年2月18日 05:33:15

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js怎么修改页面标题

    vue.js修改页面标题的方法:1、在路由文件index.js中给需要的路由添加title;2、在路由的beforeEach拦截器中进行处理即可。 本文操作环境:windows10系统、vue.js 2.9、thinkpad t480电脑。…

    2025年4月5日
    100
  • HTML基础总结推荐(标题)

    html: 标题 标题(Heading)是通过 – 等标签进行定义的。 定义最大的标题。 定义最小的标题。 This is a heading This is a heading This is a heading 提示:浏览器…

    编程技术 2025年4月4日
    200
  • vue怎么添加标题

    vue添加标题的方法:1、在“main.js”文件里添加“document.title = el.dataset.title”语句;2、在需要组件的标签中设置“v-title data-title=”登录””属性即可…

    2025年4月1日
    200
  • Imageready蝶恋花 动画制作教程

    今天让我们用Imageready来做一个蝴蝶飞过鲜花的动态图,先看下效果吧:  制作步骤: 1、打开一张荷花图片做背景。副标题2、打开一张蝴蝶图片,用魔棒工具在白色区域点一下选中背景,Ctrl Shift I反选,就选出了蝴蝶。  #今天让…

    2025年4月1日 编程技术
    200
  • photoshop绘制中国古典木质浮雕花纹屏障

    本教程介绍中国古典风格屏障的制作方法。思路:先用滤镜效果制作出木质纹理,然后再用慢慢制作浮雕的花纹及其它装饰。制作方法不是很难,不过创意及效果非常不错。最终效果1、首先新建文件,再新建一层,设置前后景色本教程介绍中国古典风格屏障的制作方法。…

    2025年4月1日 编程技术
    200
  • Photoshop教程:墙壁上随意写字

    本Photoshop教程介绍墙壁涂鸦效果的制作方法。思路:找好相关的墙壁素材,然后自己就可以任意的的去涂鸦,可以加字或者文字,也可以适当的给图形加点阴影等样式。作品越夸张越好!最终效果素材副标题1、打开图像,新建图层,用画笔或者椭本Phot…

    2025年4月1日 编程技术
    100
  • Photoshop转矢量素材为一块玉

    本Photoshop教程主要是利用一些简单的花纹素材图片制作漂亮的玉雕效果。制作的时候需要一点美术功底,能够表现玉的浮雕效果,新手可能比较费时间!最终效果素材副标题1.首先当然是启动PS,哈。 2.执行:文件-〉新建 如图。 3.打本Pho…

    2025年4月1日 编程技术
    100
  • Photoshop制作酷劲十足的三维空间特效

    在这个教程中我将教你如何用PS来创建一个方法简单,但酷劲十足的3维空间特效……先看一下最终效果: 1.建立一个新文档,这里我用600*600像素。建立一个新图层并用白色填充,命名为“Blocks”。然后执行滤镜-风格化-凸出,设置如下所示:…

    2025年4月1日 编程技术
    200
  • Photoshop基础教程:简单水波动画

    效果: 一.先定义图案1. 50×50 填充黑色 全选(ctrl a) 拷贝(ctrl c) 2. 另开新档 50×100 贴上(ctrl v)黑色对齐上方 3. 编辑—>定义图案二.制作位移图1. 5…

    2025年4月1日 编程技术
    200
  • Photoshop CS3教程:飘逸的纱巾

      使用工具:Photoshop CS3   注:文中所使用快捷方式,均在英文输入法状态下有效。   小编曾经把《飘逸的纱巾》发到了我们学院论坛的【Photoshop专区】,有位网友看到了,很是喜欢,并要求我做一个教程。小编本着“好东西,大…

    2025年4月1日 编程技术
    300

发表回复

登录后才能评论