【抖音卡片】在抖音私信的时候给对方发送抖音卡片链接

最新推荐文章于 2024-11-01 11:12:37 发布

学前端的小朱

最新推荐文章于 2024-11-01 11:12:37 发布

阅读量1.6k

点赞数 10

文章标签：抖音消息卡片

本文链接：https://blog.csdn.net/qq_45569925/article/details/140930307

版权

效果展示

效果说明

在默认情况下，给对方发送连接的时候是以文本的形式展示的可点击的超链接，但是经过处理之后可以将你发送的连接一样卡片的形式展示。

实现步骤

第一步：打开微信云托管

微信云托管 (qq.com)https://cloud.weixin.qq.com/cloudrun

第二步：微信扫码登录

选择项目进行部署【自己的】，此处我选择的是这一个，其实只要选一个就行。

第三步：对项目进行快速部署，只需要选择ThinkPhp（Apache）即可，然后等待部署

第四步：部署完成后，就能够在服务列表中看到刚才所部署的项目

第五步：将封面图和写好的页面上传到对象存储当中

第六步：点击上传的页面的详情按钮，然后复制下载地址，发送给对方即可

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI工具资料包</title>
  <!-- 添加Open Graph (OG) 标签 -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="AI工具资料包">
  <meta property="og:description" content="这是关于AI工具的资料包，包含各种有用的资源。">
  <!-- <meta property="og:url" content="https://yourdomain.com/path/to/this/page"> -->
  <meta property="og:image" content="https://7072-prod-0grhs8soe4597496-1328499642.tcb.qcloud.la/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240805152200.jpg?sign=66359676f856f4e311ff302a671d1ca0&t=1722845251">

  <!-- 可选: 添加Twitter Card标签 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="AI工具资料包">
  <meta name="twitter:description" content="这是关于AI工具的资料包，包含各种有用的资源。">
  <meta name="twitter:image" content="https://7072-prod-0grhs8soe4597496-1328499642.tcb.qcloud.la/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240805152200.jpg?sign=66359676f856f4e311ff302a671d1ca0&t=1722845251">
</head>
<body>
  <div>
    <img src="https://7072-prod-0grhs8soe4597496-1328499642.tcb.qcloud.la/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240805145534.jpg?sign=2dbb8555e12d0aa856b1bd8eb38b6d64&t=1722840992" alt="个人照片" style="max-width: 100%; height: auto;">
  </div>
</body>
</html>

代码说明

Open Graph (OG) 标签：

og:type: 定义页面类型，这里设为website。
og:title: 页面的标题。
og:description: 页面的描述。
og:url: 页面的URL地址。
og:image: 封面图片的URL地址。

Twitter Card 标签（可选）：

twitter:card: 设置为summary_large_image表示大图像摘要卡。
twitter:title: 页面的标题。
twitter:description: 页面的描述。
twitter:image: 封面图片的URL地址。