移动端未装LinkedIn App时「Add to profile」按钮失效问题求助

一、移动端未安装App时的备用跳转方案 #

直接使用原URL在未装App的移动端浏览器中会跳转到App下载页，无法打开网页版预填表单。可以通过深度链接唤起+网页版兜底的方式处理：

1. 构造LinkedIn App的深度链接：使用LinkedIn的自定义URL Scheme linkedin://，将原证书参数拼接在后面，格式为linkedin://profile/add?[原URL的查询参数]
2. 点击按钮时先尝试唤起App，若超时未成功，则自动跳转到网页版的证书添加URL

示例代码 #

<a id="linkedin-add-cert" href="javascript:void(0)">
  <img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png" alt="LinkedIn Add to Profile button">
</a>

<script>
document.getElementById('linkedin-add-cert').addEventListener('click', function(e) {
  e.preventDefault();
  
  // 原证书添加URL
  const webUrl = 'https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=Test%20Certificate&organizationId=1337&issueYear=2018&issueMonth=2&expirationYear=2020&expirationMonth=5&certUrl=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fcertifications%2Fd365-functional-consultant-sales&certId=1234';
  // 构造App深度链接
  const queryParams = webUrl.split('?')[1];
  const appUrl = `linkedin://profile/add?${queryParams}`;
  
  // 尝试唤起App
  const tempLink = document.createElement('a');
  tempLink.href = appUrl;
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  
  // 1秒后未唤起则跳转到网页版
  setTimeout(() => {
    window.location.href = webUrl;
  }, 1000);
});
</script>

二、检测设备是否安装LinkedIn App的方法 #

移动端无法直接通过JavaScript检测App是否安装，只能通过尝试唤起+超时判断的间接方式：

• 原理：点击按钮时先触发App深度链接唤起，若设备已安装App，系统会切换到App；若未安装，唤起操作会失败，此时通过超时回调执行网页版跳转
• 注意事项：不同浏览器对自定义Scheme的支持有差异，超时时间建议设置在800-1200ms之间，避免误判

额外说明 #

• LinkedIn官方文档未提供专门的移动端无App适配方案，上述方法是基于通用深度链接机制的实践方案
• 若用户在网页版登录LinkedIn，跳转后的网页版URL会直接打开预填的证书添加表单；若未登录，会先引导登录再进入表单

内容的提问来源于stack exchange，提问作者Наталья Ахмедова