社交按钮BFF

TL;DR: Loading JavaScript asynchronously is critical for the performance of your web app. Below is an idea how to do it for the most common social buttons out there so you can make sure these don't interfere with the loading of the rest of your content. After all people need to see your content first, then decide if it's share-worthy.

TL; DR：异步加载JavaScript对于Web应用程序的性能至关重要。 下面是一个想法，该如何针对最常见的社交按钮执行此操作，因此您可以确保这些按钮不会干扰其余内容的加载。 毕竟所有人都需要先查看您的内容，然后再决定是否值得共享。

Japanese translation by Koji Ishimoto is here

石本浩司(Koji Ishimoto )的日语翻译在这里

Facebook now offers a new asynchronous snippet to load the JavaScript SDK, which lets you load social plugins (e.g. Like button) among doing other more powerful things.

Facebook现在提供了一个新的异步代码段来加载JavaScript SDK，该代码段使您可以加载社交插件(例如“赞”按钮)以及执行其他更强大的功能。

It has always been possible to load the JS SDK asynchronously but since recently it's the default. The code looks pretty damn nice (I know, right!), here's how it looks like (taken from here):

始终可以异步加载JS SDK，但自最近以来，它已成为默认设置。 该代码看起来非常好(我知道，对！)，这是它的样子(从此处获取)：

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Some nice steal-me JS patterns here:

这里有一些不错的“偷我” JS模式：

• immediate (self-invoking) function so not to bleed vars into global namespace
  立即(自调用)功能，以免将vars放到全局名称空间中

• pass oft-used objects (document) and strings ("script", "facebook-jssdk") to the immediate function. Sort of rudimentary manual minification, while keeping the code readable

  将经常使用的对象( document )和字符串(“ script”，“ facebook-jssdk”)传递给即时函数。 进行基本的手动压缩，同时保持代码的可读性

• append script node by using the first available script element. That's 99.99% guaranteed to work unless all your code is in body onload="..." or img onload or something similar (insanity, I know, but let's allow generous 0.01% for it)

  通过使用第一个可用的script元素来追加脚本节点。 除非您的所有代码都在body onload="..."或img onload或类似内容中，否则保证有99.99％的代码可以正常工作(疯狂，我知道，但是让它慷慨地为0.01％)

• assign an ID to the node you append so you don't append it twice by mistake (e.g. like button in the header, footer and article)
  为您添加的节点分配一个ID，这样您就不会误将其添加两次(例如，像在页眉，页脚和文章中的按钮)

所有按钮的JS文件 (All buttons' JS files)

Other buttons exist, most notably the Twitter and Google+1 buttons. Both of these can be loaded with async JavaScript whether or not this is the default in their respective configurators.

存在其他按钮，最著名的是Twitter和Google + 1按钮。 不论这是它们各自配置器中的默认值，都可以使用异步JavaScript加载这两种方法。

So why not make them all get along and shelter them under the same facebook immediate function? We'll save some bytes and extra script tags in the HTML. For G+/T buttons all we need is a new script node. Google+'s snippet has some additional attribs such as type and async, but these are not really needed. Because type is always text/javascript and async is always true. Plus we kinda take care of the async part anyways.

那么，为什么不让他们都相处并在相同的Facebook立即职能下庇护他们呢？ 我们将在HTML中保存一些字节和额外的脚本标签。 对于G + / T按钮，我们需要的是一个新的脚本节点。 Google+的代码段还包含一些其他属性，例如type和async ，但实际上并不是必需的。 因为type始终是text/javascript ， async总是true 。 另外，我们还是会照顾异步部分。

The end result:

最终结果：

  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    // fb + common
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    // +1
    js = d.createElement(s); 
    js.src = 'https://apis.google.com/js/plusone.js';
    fjs.parentNode.insertBefore(js, fjs);
    // tweet
    js = d.createElement(s); 
    js.src = '//platform.twitter.com/widgets.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

So this thing loads all three JS files required by the three buttons/plugins.

因此，此东西将加载三个按钮/插件所需的所有三个JS文件。

Additionally we can wrap the node creation/appending part into a function. So all the code is tighter. Here's the final snippet:

另外，我们可以将节点创建/附加部分包装到一个函数中。 因此，所有代码都更加严格。 这是最后的代码段：

<div id="fb-root"></div><!-- fb needs this -->
<script>(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
  load('https://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));</script>

所有按钮的标记 (All buttons' markup)

Next is actually advising the scripts where the widgets should be rendered. Facebook offers XFBML syntax, with tags such as <fb:like>, but it also offers pure HTML(5) with data-* attributes. Luckily, so do all others.

接下来实际上是建议应在其中呈现小部件的脚本。 Facebook提供XFBML语法，并带有诸如<fb:like>标签，但它也提供具有data- *属性的纯HTML(5)。 幸运的是，其他所有人也是如此。

Here's an example:

这是一个例子：

<!-- facebook like -->
<div class="fb-like" data-send="false" data-width="280"></div>
<!-- twitter -->
<a class="twitter-share-button" data-count="horizontal">Tweet</a>
<!-- g+ -->
<div class="g-plusone" data-size="medium"></div>

G+ requires a div element (with g-plusone class name), Twitter requires an a (with a twitter-share-button class name). Facebook will take any element you like with a fb-like class name (or fb-comments or fb-recommendations or any other social plugin you may need)

G +需要一个div元素(具有g-plusone类名)，Twitter需要一个a (具有twitter-share-button类名)。 Facebook将使用类似fb-like类名(或fb-comments或fb-recommendations或您可能需要的任何其他社交插件)来接受您喜欢的任何元素。

Also very important to note that you can (and should) load the JS files once and then render as many different buttons as you need. In Facebook's case these can be any type of plugin, not just like buttons. Economy of scale - on JS file, many plugins.

同样重要的是要注意，您可以(并且应该)加载一次JS文件，然后根据需要呈现任意数量的不同按钮。 在Facebook的情况下，它们可以是任何类型的插件，而不仅仅是按钮。 规模经济-在JS文件上，许多插件。

现在都在一起了 (All together now)

So here's the overall strategy for loading all those buttons.

因此，这是加载所有这些按钮的总体策略。

1. Copy the JS above at the bottom of the page right before /body just to be safe (G+ failed to load when the markup is after the JS). This will also help you make sure there should be only one place to load the JS files, although the snippet takes cares of dedupe-ing.

   为了安全起见，在页面底部/body之前的上方复制上面的JS(为了安全起见，G +加载失败，因为标记位于JS之后)。 这也将帮助您确保仅在一个位置加载JS文件，尽管该代码段负责重复数据删除。

2. sprinkle plugins and buttons any way you like anywhere on your pages using the appropriate configurator to help you deal with the data-* attributes (FB, G+, Tw)

   使用适当的配置程序在页面上的任何位置随意添加插件和按钮，以帮助您处理data- *属性( FB ， G + ， Tw )

3. Enjoy all the social traffic you deserve!
   享受您应得的所有社交流量！

To see it all in action - go to my abandoned phonydev.com blog. Yep, those buttons play nice in mobile too.

要查看所有内容，请访问我废弃的phonydev.com博客。 是的，这些按钮在移动设备中也很好玩。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/social-button-bffs/