如何创建自定义的微信“群聊邀请”链接

开发调优
1

如何创建自定义的微信“群聊邀请”链接

你是否曾想过给朋友发一个看起来是群聊邀请，但点开却是其他有趣内容的链接？本教程将详细介绍如何通过一个简单的HTML文件，利用微信的链接预览机制，实现这个效果。

声明： 本教程仅供技术学习和娱乐目的。请勿用于任何恶意用途，如网络钓鱼、诈骗或传播不良信息。滥用此技术可能导致您的微信账号受限，并可能产生法律后果。请 responsibly 使用。

效果预览

当你将制作好的链接分享到微信时，它会显示为一个标准的群聊邀请卡片，包含群头像、群名称和邀请人信息。但当用户点击时，他们不会进入群聊，而是会跳转到你预设的任何网站。

CA2C579F-F3C5-4477-B55A-0CF9DC2688E2
CA2C579F-F3C5-4477-B55A-0CF9DC2688E2640×338 40.9 KB

事实上这个链接会跳转到KFC网站

原理揭秘

这个效果的核心在于利用了开放图谱协议（Open Graph Protocol）和JavaScript 跳转。

  1. 开放图谱协议 (Open Graph)：当你在微信中分享一个链接时，微信的服务器会抓取这个网页的元数据（meta tags），特别是og:title（标题）、og:description（描述）和og:image（图片）这几个标签，并用它们来生成一个精美的预览卡片。我们可以通过自定义这些标签，让链接预览看起来像一个群聊邀请。

  2. JavaScript 跳转：在网页的 <body> 部分，我们嵌入了一段简单的 JavaScript 代码。这段代码的作用是，当任何用户通过点击预览卡片访问这个网页时，浏览器会立即执行指令，将用户重定向到另一个指定的网址。

结合这两点，用户看到的是一个“群聊邀请”（由Open Graph元数据生成），但实际点击后触发的是网页的跳转动作。

详细步骤

第一步：准备 HTML 代码

首先，这是我们的基础HTML代码。你可以将它复制并保存为一个名为 index.html 的文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta property="og:title" content="邀请你加入群聊”吉大女同交流群“，点击查看详情">
    <meta property="og:image" content="http://wx.qlogo.cn/mmcrhead/PiajxSqBRaEJ4UnsZgXPGwah6FmInDCxibeuVFw8XwXZxBbVQyhFIfCG91grETccQMvJZvq9wbL3Pjp5DxSY3GuaMvUghCgRCP/0">
    <meta property="og:description" content="“hsad”邀请你加入群聊”吉大女同交流群“，点击查看详情">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <script>
        // 将下面的网址替换成你希望用户最终访问的地址
        window.location.href = "https://www.kfc.com.cn/";
    </script>
    页面加载中...
</body>
</html>

第二步：自定义你的“邀请”

现在，你可以根据自己的需求修改HTML文件中的内容。

  1. 修改群聊名称：

    • 找到 <meta property="og:title" ...> 这一行。
    • 将 content 属性中的 吉大女同交流群 修改为你想要的任何群聊名称。
    • 例如：content="邀请你加入群聊”宇宙无敌吃货群“，点击查看详情"

  2. 修改邀请人昵称：

    • 找到 <meta property="og:description" ...> 这一行。
    • 将 content 属性中的 “hsad” 修改为邀请人的昵称。
    • 同时，也需要同步修改这里的群聊名称以保持一致。
    • 例如：content="“张三”邀请你加入群聊”宇宙无敌吃货群“，点击查看详情"

  3. 修改跳转目标网址：

    • 找到 <script> 标签内的 window.location.href。
    • 将 "https://www.kfc.com.cn/" 替换为你希望用户点击后跳转到的任何有效网址。
    • 例如，可以换成一个搞笑视频、一篇有趣的文章，或者你的个人主页。
    • 例如：window.location.href = "https://www.bilibili.com/";

  4. （可选）修改群头像：

    • 找到 <meta property="og:image" ...> 这一行。
    • content 中的链接是一个微信群聊头像的图片地址。你可以保留这个默认的，或者替换成其他图片的URL。请确保链接是公网可以访问的。

第三步：将网页部署到服务器

为了让微信能够访问到你的网页，你需要将这个修改后的 index.html 文件上传到一个公共的服务器上。如果你没有自己的服务器，可以使用以下免费的静态网页托管服务：

  • GitHub Pages (推荐，免费且稳定)
  • Netlify
  • Vercel

以 GitHub Pages 为例的简易教程：

  1. 创建GitHub账户：如果你还没有，先注册一个 GitHub 账户。
  2. 创建新仓库：登录后，创建一个新的公开（Public）仓库（Repository），例如命名为 wechat-invite。
  3. 上传文件：在新仓库页面，点击 Add file -> Create new file。
  4. 粘贴代码：将文件名命名为 index.html，然后将你修改好的全部HTML代码粘贴到文件内容区域。
  5. 提交文件：滚动到底部，点击 Commit new file 按钮。
  6. 开启 Pages 服务：
    • 进入你的仓库主页，点击 Settings 标签页。
    • 在左侧菜单中，选择 Pages。
    • 在 Branch 部分，选择 main 分支，然后点击 Save。
  7. 获取链接：稍等一两分钟，页面顶部会显示 “Your site is live at https://你的用户名.github.io/你的仓库名/”。这个链接就是你的最终网址。

第四步：分享到微信

  1. 在手机浏览器中打开：在你的 iPhone 上，使用 Safari 浏览器打开上一步中获得的链接。
  2. 使用分享功能：点击 Safari 浏览器底部的分享按钮。
  3. 选择微信：在分享选项中，找到并点击“微信”图标。
  4. 发送给朋友或群聊：选择一个联系人或群聊，点击发送。

发送后，你的朋友就会在聊天窗口中看到一个逼真的“群聊邀请”卡片了！当他们好奇地点进来时，就会被直接带到你精心准备的网站。尽情享受朋友们惊讶的表情吧！

2

此话题已在最后回复的 30 天后被自动关闭。不再允许新回复。