一键分享:所有内容的原生分享功能

本周早些时候,我想与 Olya 分享一篇文章。我打开文章,选中 URL,复制它,切换到消息应用,粘贴。本应一步完成的事情需要五步。

今天,这种摩擦消失了。

改变了什么

每个品牌档案、创始人故事和洞察文章现在都有原生分享按钮。一键打开设备的分享菜单——发消息、发邮件、保存,或发送到任何你使用的应用。

桌面浏览器:标准分享菜单,包含复制链接、电子邮件选项 移动设备:完整的 iOS/Android 分享菜单,包含所有应用 无需登录:对所有访客即时生效

分享按钮位于文章元数据行,紧挨阅读时间指示器。低调、可访问,正好在你需要的地方。

为什么重要

移动优先分享

我们的大部分流量来自移动设备。Web Share API 为移动用户提供与原生应用相同的分享体验——他们熟悉的分享菜单,包含微信、Telegram、WhatsApp、电子邮件、消息,以及任何他们实际使用的应用。

没有笨重的社交媒体按钮模态框。无需手动复制 URL。只需轻触 → 分享 → 完成。

桌面便利

桌面浏览器获得智能分享菜单,包含复制链接、电子邮件选项和已安装应用(如 Slack 或 Microsoft Teams)。一些浏览器甚至显示最近联系人。

体验适应你的平台。这就是原生 API 的作用。

策展零摩擦

Brandmine 照亮卓越品牌。我们的用户——投资者、合作伙伴、记者、研究人员——发现值得分享的档案。让这种分享无摩擦意味着更多人看到优质品牌。

当我发现一个具有有趣垂直整合模式的品牌时,我想立即发送给我们的研究团队。不是五步。而是一步。

技术选择

我们使用 Web Share API 实现了这一功能,这是一个所有现代移动浏览器和大多数桌面浏览器都支持的浏览器标准。

降级行为:如果浏览器不支持原生分享(罕见但可能),按钮会自动将 URL 复制到剪贴板。

实现:纯原生 JavaScript,无依赖。约 30 行代码。与我们现有的 Alpine.js 设置无冲突运行。

渐进增强:如果 JavaScript 加载失败,页面保持完全功能——分享按钮只是不出现。内容永不被阻止。

在哪里工作

品牌档案:与合作伙伴或投资组合团队分享卓越的创始人主导企业 创始人故事:与你的网络分享韧性叙事 洞察文章:分享市场情报和战略分析 更新帖子:分享这篇文章(试试上面的按钮!)

每种值得传播的内容类型现在都有无摩擦分享。

移动分享菜单示例

iOS:轻触分享打开熟悉的 iOS 菜单,包含消息、邮件、微信、Telegram、复制链接、添加到阅读列表等。

Android:原生 Android 分享菜单,包含已安装应用和最近联系人。

桌面 Safari/Chrome:智能菜单,包含复制链接、电子邮件和已安装应用。

为什么不用社交媒体按钮?

你可能想知道为什么我们没有添加传统的社交媒体图标行(Facebook、Twitter/X、LinkedIn)。三个原因:

1. 平台锁定

社交媒体按钮假设每个人都使用相同的平台。事实并非如此。我们的受众包括中国用户(微信、微博)、俄罗斯用户(VK、Telegram)、印度用户(WhatsApp、ShareChat)以及其他数十个市场。

Web Share API 尊重用户选择。无论你有什么应用,都可以分享到。

2. 隐私与性能

传统社交按钮通常加载第三方脚本、跟踪像素和分析。这会拖慢页面加载并造成隐私问题。

我们的实现使用零外部资源。无跟踪。无膨胀。纯浏览器能力。

3. 移动现实

在移动设备上,社交按钮很笨拙。你点击"分享到微信",它打开微信网页版或尝试启动应用。Web Share API 专为此设计——它是浏览器分享内容的平台原生方式。

实现细节

位置:文章元数据行(阅读时间/发布日期部分) 图标:Lucide share-2 图标(与我们的设计系统一致) 行为:一键 → 原生分享菜单 → 完成 降级:如果 Web Share API 不可用,自动复制到剪贴板 文件:apps/hugo/assets/js/share.js + 模板中的部分集成

浏览器支持:

• ✅ iOS Safari(所有版本)
• ✅ Android Chrome(所有版本)
• ✅ 桌面 Safari(macOS)
• ✅ 桌面 Chrome(最新版本)
• ✅ Firefox(最新版本)
• ⚠️ 在旧版浏览器上降级为剪贴板复制

设计理念

默认极简:分享按钮小巧、低调,不与内容竞争 可访问:支持键盘导航、屏幕阅读器、触摸目标 一致:所有内容类型中位置相同 快速:零外部依赖,即时加载 尊重:无跟踪、无分析、无第三方脚本

这解锁了什么

团队协作

研究团队可以立即与同事分享档案。投资团队可以向合作伙伴发送品牌。记者可以收藏文章供日后参考。

网络效应

分享 Brandmine 内容越容易,发现优质全球南方品牌的人就越多。每次分享都是我们照亮的创始人的潜在新合作、投资或媒体机会。

移动工作流

移动用户现在拥有与桌面用户相同的分享能力。当我们 60% 以上的流量来自手机和平板电脑时,这很重要。

现在试试

这篇文章在上面的元数据行有分享按钮。点击它,查看你的原生分享菜单。发送给可能感兴趣的人。

这就是重点——让优质内容易于传播。

发现分享在某个浏览器中不起作用?告诉我们,以便我们测试和改进。