提供社交媒体共享链接的最简单（也是性能最高）的方法

今天药忘吃喽~ 2023-10-11 16:11 42阅读 0赞

[去年][Link 1]夏天，我写[了社交媒体的基本元标记，][Link 1]内容涉及开发人员如何准备网页以在社交媒体上共享时优化其外观。 但是如何创建允许用户共享这些网页的链接呢？ Facebook，Twitter和LinkedIn提供了许多方法来实现此目的，其中一些涉及按钮生成器，而另一些则需要外部JavaScript。 但是，要避免所有这些情况，您可以创建自己的链接来共享网页。 最棒的是，做自己很简单。 这是如何做。

####  基本概念：只是一个链接 ####

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

现在，需要正确地对GET请求中的某些符号（称为“保留字符”）进行编码，以免干扰正常的浏览器功能。 这些字符受“ [百分比编码][Link 2] ”的约束，也就是说，它们在查询参数中以“％”表示，后跟两位十六进制代码。 这些是保留字符及其百分比编码的等效项。

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

当然，不需要记住这些十六进制代码。 提供转换的资源很多（ [Bing][]在搜索引擎中内置了一种资源），正如您将很快看到的那样，JavaScript在这方面也可以应付繁重的工作。 让我们看一些较流行的社交媒体服务，并了解如何通过它们共享网页。

####  脸书 ####

根据其[开发人员指南][Link 3] ，Facebook指定以下URL以在共享网页时提交GET请求：

https://www.facebook.com/dialog/share

尽管有四个查询参数可用，但仅需要两个参数：您要共享的网页的URL和一个应用程序ID，开发人员可以通过在Facebook上注册获得该ID。 如果您没有应用程序ID，则注册过程不会很繁琐，但是当存在更简单的解决方案时，也无需打扰。

没有任何必需的App ID的Facebook原始网页共享方法，在其任何文档中都不再提及，但仍受支持。 实际上，有无数使用此方法的网站，我无法想象它很快就会被弃用。 该URL是：

https://www.facebook.com/sharer.php

唯一可用的参数是“ u”，用于指定您要共享的网页的URL。 这是一个在Facebook上共享CSS-Tricks主页的示例-继续，剪切并粘贴到浏览器中以查看结果。

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

如前所述，共享的URL必须进行百分比编码。 另外，请注意如何“？” 指定第一个查询参数的开始。 后面的查询参数用“＆”分隔，这将很快出现。

####  推特 ####

Twitter指通过URL共享网页作为Tweet Web Intent –使用的URL是：

https://twitter.com/intent/tweet

与Facebook（只能指定要共享的网页）不同，Twitter与Twitter不同，Twitter允许您添加一些文本和任意数量的标签。 用户将有机会在发推文之前编辑所有这些内容，但是如果他们不被打扰，这将为他们提供一个领先的开端。 例如，假设您想发布以下信息：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>网址</td> 
   <td>https://openvpn-client.megasupersecretplace.com:5757/</td> 
  </tr> 
  <tr> 
   <td>文本</td> 
   <td>有关使用级联样式表的提示，技巧和技巧。</td> 
  </tr> 
  <tr> 
   <td>主题标签</td> 
   <td>CSS HTML</td> 
  </tr> 
 </tbody> 
</table>

带有查询参数百分比编码并添加了换行符的网址（为了清楚起见）为：

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

那给你：

您会注意到，Twitter预选择了文本，这使用户可以轻松进行编辑。 并且，请记住，该推文必须少于140个字符，因此最好不要提供太长的副本。 为了简单起见，我省略了讨论三个较少使用的参数的内容，有关这些参数的详细说明，请参见[Twitter的Developers Documentation][Twitter_Developers Documentation] 。 这些附加参数使您可以指定与推文关联的用户名，建议的相关用户名以及相关推文的ID。

####  领英 ####

在LinkedIn上共享时使用的URL是：

https://www.linkedin.com/shareArticle

总共有五个参数，详细信息如下表所示，该参数取自[LinkedIn的Developers文档][LinkedIn_Developers] ：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
   <th>最长长度</th> 
   <th>需要</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>网址</td> 
   <td>您希望共享的页面的URL编码URL。</td> 
   <td>1024</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>微型</td> 
   <td>必填参数，其值必须始终为：true</td> 
   <td>4</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>标题</td> 
   <td>您希望使用的URL编码标题值。</td> 
   <td>200</td> 
   <td>没有</td> 
  </tr> 
  <tr> 
   <td>摘要</td> 
   <td>您希望使用的URL编码的描述。</td> 
   <td>256</td> 
   <td>没有</td> 
  </tr> 
  <tr> 
   <td>资源</td> 
   <td>内容的url编码源（例如，您的网站或应用程序名称）</td> 
   <td>200</td> 
   <td>没有</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>网址</td> 
   <td>https://openvpn-client.megasupersecretplace.com:5757/</td> 
  </tr> 
  <tr> 
   <td>标题</td> 
   <td>CSS技巧</td> 
  </tr> 
  <tr> 
   <td>摘要</td> 
   <td>有关使用级联样式表的提示，技巧和技巧。</td> 
  </tr> 
  <tr> 
   <td>资源</td> 
   <td>CSS技巧</td> 
  </tr> 
 </tbody> 
</table>

这提供了以下URL-再次为清晰起见添加了换行符：

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

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

知道所有这些，如果共享的网页具有适当的Open Graph标签补充，只需指定URL就足够了，因为“ title”和“ summary”参数将被适当地填充。

####  放在一起 ####

既然我们知道在社交媒体上共享网页时使用的语法，那么我们究竟如何实现此代码？ 也许最常见的方法是简单地列出一组使用CSS样式合适的共享链接：

1.  `<ul>`
2.  `<li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li>`
3.  `<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>`
4.  `<li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li>`
5.  `</ul>`

在定位标记中添加`target="_blank"`可使共享对话框显示在新窗口或新标签中，该新窗口或新标签在从台式机到移动设备的所有设备上均能正常工作。

但是，使用查询参数的百分比编码对这些链接进行硬编码可能是乏味且容易出错的。 对于由CMS动态提供服务的任何网页，这都是在服务器端执行数据整理并将其插入HTML所需位置的绝佳机会。

另一个选择是使用[社交媒体共享：][Link 4]我在CodePen上创建的[HTML链接生成器][Link 4] 。 这使您可以输入我们刚刚查看过的任何或所有必要参数，并将输出适当HTML供您插入自己的代码中。

见笔[社交媒体共享：HTML链接发电机][HTML]由亚当·科蒂（ [@adamcoti][adamcoti] ）上[CodePen][] 。

作为一个几乎完全在前端工作的自由网络开发人员，我选择使用JavaScript / jQuery功能，该功能无需定制即可用作我项目的交钥匙解决方案。 这样，无论我是在静态网站上工作，自定义WordPress主题还是将模板集成到CMS中，我都可以放心地处理所有共享链接。

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

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

1.  `function socialWindow(url) {`
2.  `var left = (screen.width - 570) / 2;`
3.  `var top = (screen.height - 570) / 2;`
4.  `var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;`
5.  `window.open(url,"NewWindow",params);`
6.  `}`
7.  
8.  `function setShareLinks() {`
9.  `var pageUrl = encodeURIComponent(document.URL);`
10. `var tweet = encodeURIComponent(jQuery("meta[property='og:description']").attr("content"));`
11. 
12. `jQuery(".social-share.facebook").on("click", function() {`
13. `url = "https://www.facebook.com/sharer.php?u=" + pageUrl;`
14. `socialWindow(url);`
15. `});`
16. 
17. `jQuery(".social-share.twitter").on("click", function() {`
18. `url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;`
19. `socialWindow(url);`
20. `});`
21. 
22. `jQuery(".social-share.linkedin").on("click", function() {`
23. `url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;`
24. `socialWindow(url);`
25. `})`
26. `}`

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

现在，应某些客户的请求，我利用`window.open()`在特殊大小的辅助（弹出）窗口中启动新形成的URL。 在大多数桌面浏览器上，此窗口在屏幕上水平和垂直居中。 有趣的是，如果用户登录到其社交媒体帐户，则Facebook和LinkedIn会将此辅助窗口的大小调整为必要的尺寸。 Twitter没有，所以我使用默认的宽度和高度为其提供足够的空间。 就响应能力而言，平板电脑和移动设备将辅助窗口解释为新标签。 可以在CodePen上找到[此功能][Link 5]的[演示][Link 5] 。

请参阅[CodePen][adamcoti]上的Adam Coti（ [@adamcoti][adamcoti] ）的“笔式[社交媒体共享：自动链接创建][Link 6] [器”][CodePen] 。

但是使用弹出式窗口虽然曾经很常见，但由于可访问性的原因，现在却不受欢迎。 一个简单的解决方案是在上述JavaScript中将变量`params`设置为空字符串。 这样做会在新窗口或选项卡中启动URL，具体取决于用户的浏览器设置。

####  结论 ####

俗话说得好，有很多方法可以给猫皮。 上面的技术只是我的首选方法。 您可能有更好，更优化的方法。 也许使用HTML中的数据属性（例如，指定主题标签），这些属性可以被JavaScript读取，并在需要时附加为查询参数。 希望这至少可以作为您自己的实现的入门。

> 翻译自: [https://css-tricks.com/simple-social-sharing-links/][https_css-tricks.com_simple-social-sharing-links]

[Link 1]: https://css-tricks.com/essential-meta-tags-social-media/
[Link 2]: https://en.wikipedia.org/wiki/Percent-encoding
[Bing]: https://www.bing.com/search?q=url%20encoding
[Link 3]: https://developers.facebook.com/docs/sharing/reference/share-dialog
[Twitter_Developers Documentation]: https://dev.twitter.com/web/tweet-button/web-intent
[LinkedIn_Developers]: https://developer.linkedin.com/docs/share-on-linkedin
[Link 4]: https://codepen.io/adamcoti/full/woGwym/
[HTML]: https://codepen.io/adamcoti/pen/woGwym/
[adamcoti]: https://codepen.io/adamcoti
[CodePen]: https://codepen.io/
[Link 5]: https://codepen.io/adamcoti/pen/jVGWdG
[Link 6]: https://codepen.io/adamcoti/pen/jVGWdG/
[https_css-tricks.com_simple-social-sharing-links]: https://css-tricks.com/simple-social-sharing-links/