在社交媒体上分享链接的最简单（也是性能最好的）方法

去年夏天，我写了一篇关于开发人员如何准备网页以优化其在社交媒体上的共享外观的文章，名为 社交媒体的必备元标签。 但是，如何创建让用户分享这些网页的链接呢？Facebook、Twitter 和 LinkedIn 提供了多种方法来做到这一点，有些方法涉及按钮生成器，而另一些方法则需要外部 JavaScript。 然而，为了避免所有这些，您可以创建自己的链接来分享网页。 最棒的是，它很容易自己动手。 以下是如何操作。

基本概念：只是一个链接

使用链接分享网页时，您实际上是在向每个社交媒体服务提供的 URL 提交 GET 请求（即点击链接）。 然后，通过将一系列名称/值对（查询参数，如 ?title=Title）附加到此 URL 的末尾，您可以指定要分享的网页的 URL，有时还可以指定其他信息。

现在，某些在 GET 请求中被称为“保留字符”的符号需要进行适当编码，以避免干扰正常的浏览器功能。 这些字符会受到“百分比编码”的影响 - 也就是说，它们在查询参数中用“%”表示，后跟一个两位数的十六进制代码。 这些是保留字符及其百分比编码的等效项。

!	#	$	&	‘	(	)	*	+
%21	%23	%24	%26	%27	%28	%29	%2A	%2B

,	/	:	;	=	?	@	[	]
%2C	%2F	%3A	%3B	%3D	%3F	%40	%5B	%5D

注意：空格可以用“%20”或“+”表示。

当然，无需记住这些十六进制代码。 有许多资源提供转换（必应 在搜索引擎中内置了一个），正如您很快就会看到的那样，JavaScript 也可以在这方面承担重任。 让我们看一下一些更受欢迎的社交媒体服务，并了解如何通过它们分享网页。

Facebook

根据他们的 开发者指南，Facebook 指定了以下 URL 来提交在分享网页时发送 GET 请求。

https://#/dialog/share

虽然有四个查询参数可用，但只有两个是必需的：要分享的网页的 URL 和应用程序 ID，开发人员可以通过在 Facebook 注册来获取。 如果您没有应用程序 ID，注册过程并不繁琐，但在存在更简单的解决方案的情况下，无需为此费心。

Facebook 分享网页的原始方法（无需应用程序 ID）在其任何文档中均未提及，但仍然受支持。 事实上，由于无数网站使用这种方法，我无法想象它会在短期内被弃用。 此 URL 为

https://#/sharer.php

唯一可用的参数是“u”，用于指定要分享的网页的 URL。 以下示例在 Facebook 上分享 CSS-Tricks 的主页 - 请随意将其剪切并粘贴到浏览器中，以查看结果。

https://#/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

如前所述，共享的 URL 需要进行百分比编码。 此外，请注意“?”如何指定第一个查询参数的开头。 后续的查询参数用“&”分隔，这一点将在稍后看到。

Twitter

Twitter 将通过 URL 分享网页称为 Tweet 网页意图 - 要使用的 URL 为

https://twitter.com/intent/tweet

与 Facebook 不同的是，Facebook 只能指定要分享的网页，Twitter 允许您添加一些文本和任意数量的标签。 用户可以在发推文之前编辑所有这些内容，但这可以让他们在无法费心编辑的情况下有一个先机。 例如，假设您想发布以下信息

参数	值
url	https://openvpn-client.megasupersecretplace.com:5757/
text	使用级联样式表 (CSS) 的技巧、窍门和技术。
hashtags	css html

该 URL（查询参数经过百分比编码，并添加了换行符以提高清晰度）为

https://twitter.com/intent/tweet
?url=http%3A%2F%2Fcss-tricks.com%2F
&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&hashtags=css,html

这将为您提供

您会注意到，Twitter 预先选择了文本，这使得用户可以轻松地进行编辑。 并且，请记住，推文需要少于 140 个字符，因此最好不要提供任何过长的文字。 为了简化起见，我省略了对三个较少使用的参数的讨论，这些参数可以在 Twitter 的开发者文档 中找到详细说明。 这些附加参数允许您指定与推文关联的用户名、建议的关联用户名以及相关推文的 ID。

LinkedIn

在 LinkedIn 上分享时要使用的 URL 为

https://www.linkedin.com/sharing/share-offsite/?url=https://css-tricks.org.cn

总共有五个参数可用，如从 LinkedIn 的开发者文档 中摘录的此图表所示。

参数	描述	最大长度	必需
url	要分享的页面的 URL 编码 URL。	1024	是
mini	一个必需的参数，其值必须始终为：true	4	是
title	您希望使用的 URL 编码标题值。	200	否
summary	您希望使用的 URL 编码描述。	256	否
source	内容的 URL 编码源（例如，您的网站或应用程序名称）	200	否

除了要分享的网页的 URL 外，还需要另一个名为“mini”的查询参数。 但正如您所见，它的值永远不会改变，因此我们可以将其硬编码到 URL 中。 为了演示，让我们在 LinkedIn 上分享以下内容

参数	值
url	https://css-tricks.org.cn/
title	CSS-Tricks
summary	使用级联样式表 (CSS) 的技巧、窍门和技术。
source	CSS-Tricks

这将提供以下 URL - 再次添加换行符以提高清晰度

https://www.linkedin.com/shareArticle
?url=https%3A%2F%2Fwww.css-tricks.com%2F
&title=CSS-Tricks
&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.
&source=CSS-Tricks

虽然在他们的文档中没有明确提及，但如果省略了“title”参数，LinkedIn 将从共享页面的 Open Graph 标签 <meta property="og:title"> 中获取此内容。 同样，如果省略了“summary”参数，则使用 Open Graph 标签 <meta property="og:description">。 至于“source”参数，文档中没有任何内容指定在分享网页时此值如何使用或显示 - 看起来它可以安全地忽略。

了解所有这些后，如果要分享的网页具有适当的 Open Graph 标签补充，则只需指定 URL 即可，因为“title”和“summary”参数将被适当地填充。

综合起来

现在我们知道了在社交媒体上分享网页时要使用的语法，我们该如何实现这段代码？ 也许最常见的方法是简单地列出一组使用 CSS 适当地设置样式的分享链接

<ul>
  <li><a href="https://#/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li>
  <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li>
  <li><a href="https://www.linkedin.com/sharing/share-offsite/?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li>
</ul>

在锚标记中添加 target="_blank" 允许分享对话框出现在一个新窗口或标签页中，这在所有设备上（从台式机到移动设备）都能很好地工作。

但是，对这些链接进行硬编码（包含查询参数的百分比编码）可能会很繁琐且容易出错。 对于任何由 CMS 动态提供的网页，这将是让服务器端执行此数据处理并将结果插入 HTML 中所需位置的绝佳机会。

另一个选择是使用我在 CodePen 上创建的 社交媒体分享：HTML 链接生成器。 这允许您输入任何或所有必需的参数（我们刚刚回顾过），它将输出适当的 HTML 供您插入自己的代码中。

作为一名几乎只从事前端工作的自由网页开发者，我选择使用 JavaScript/jQuery 功能，这些功能在不进行自定义的情况下就可以作为我的项目的交钥匙解决方案。 这样，我可以确保所有分享链接都将得到妥善处理，无论我是在开发静态网站、自定义 WordPress 主题，还是将模板交付给 CMS 进行集成。

这是我使用的 HTML，其中类指定了特定的分享服务。 在 JavaScript 中，当文档对象模型 (DOM) 准备好时，将调用将 click 事件附加到分享按钮的函数 setShareLinks()

<ul>
  <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li>
  <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li>
  <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li>
</ul>

function socialWindow(url) {
    var left = (screen.width - 570) / 2;
    var top = (screen.height - 570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
    window.open(url,"NewWindow",params);
}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent(jQuery("meta[property='og:description']").attr("content"));
    
    jQuery(".social-share.facebook").on("click", function() {
        url = "https://#/sharer.php?u=" + pageUrl;
        socialWindow(url);
    });

    jQuery(".social-share.twitter").on("click", function() {
        url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
        socialWindow(url);
    });

    jQuery(".social-share.linkedin").on("click", function() {
        url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
        socialWindow(url);
    })
}

当前网页的 URL 可以通过读取 document 对象的属性轻松获得。 而且，对于 Twitter，Open Graph 标签 <meta property="og:description"> 方便地提供了适合作为默认推文的文本内容。

现在，应一些客户的要求，我通过使用window.open() 在一个专门大小的辅助（弹出）窗口中启动新形成的 URL。 在大多数台式机浏览器上，此窗口在屏幕上水平和垂直居中。 有趣的是，如果用户登录到他们的社交媒体帐户，Facebook 和 LinkedIn 会将此辅助窗口调整为必要的尺寸。 Twitter 不会，所以我使用一个默认的宽度和高度，为它提供足够的房地产。 就响应能力而言，平板电脑和移动设备将辅助窗口解释为一个新标签。 此功能的演示可以在 CodePen 上找到。

但是，使用弹出窗口，虽然曾经很常见，但现在由于可访问性原因而受到反对。 一个简单的解决方案是在上面的 JavaScript 中将变量params设置为一个空字符串。 这样做将在新的窗口或标签页中启动 URL，具体取决于用户的浏览器设置。

结论

正如那句令人毛骨悚然的格言所说，有很多方法可以剥皮。 以上技术只是我偏好的方法。 您可能有一个更好、更优化的方式。 也许在 HTML 中使用数据属性（例如，指定主题标签）可以让 JavaScript 读取并作为查询参数追加到需要的地方。 希望这至少可以激发您自己实现的灵感。