jquery - "share it"我网站上 youtube 视频上的社交媒体按钮

Question

我正在建立一个网站，其中列出了 youtube 视频，我对该网站的规范是在下方设置分享按钮，这样您就可以在社交媒体平台上分享它。有没有办法让这种情况发生我似乎无法弄清楚。我的规范看起来像:

我看到视频顶部内置了一个链接共享选项:

但有没有一种方法可以始终显示共享选项，并根据所使用的社交媒体选项和图标自定义选项？

Answer 1

社交平台的实现方式各不相同，但大多数都有 Javascript SDK 或简单的嵌入可用于创建共享按钮。它通常涉及在页面上粘贴一些 javascript 代码，和/或生成一个嵌入其开发者网站的按钮，然后将按钮粘贴到您的页面上(通常是 iframe 或 div)。

例如 Facebook 有一个 Javascript SDK，以及一个简单的共享按钮嵌入。简单的嵌入代码如下所示:

<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DXXXXXXX&layout=button&size=small&mobile_iframe=true&appId=XXXXXXXXX&width=59&height=20" width="59" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

而嵌入的 Javascript SDK 看起来像这样:

//include the SDK:
<div id="fb-root"></div>
<script>(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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=XXXXXXXXXX';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

// include the button
<div class="fb-share-button" data-href="https://www.youtube.com/watch?v=XXXXXXX" data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DXXXXXXXX&amp;src=sdkpreparse">Share</a></div>

In your case you have a specification for a custom button, so you'd have to hack up the generated button somewhat and apply the linking mechanism to your own button.

但是，出于以下几个原因，我不建议这样做:

1. 合法性:您可能违反了社交网络的使用条款通过这样做共享按钮，但我不能肯定地说，你必须阅读所有内容。
2. 可用性:这些网络的设计师和 UI/UX 专家投入了大量时间、研究和金钱来设计这些元素。这些按钮会立即被您的用户识别，并以促进特定社交网络重新识别的方式进行标记。你的提议正在改变这一点。您的设计师可能会想，“我设计的按钮更适合我们的网站”。也许吧，但橙色按钮不是您的观众习惯使用的，我保证社交网络自己的按钮会表现得更好。至少，如果他们坚持使用这些按钮，您应该针对标准按钮对它们进行 A/B 测试，这样您就可以直接证明什么效果最好。您的设计师建议使用的图标通常是您在网站将您引荐到他们自己的社交网络时看到的类型，而不是调用分享或喜欢等操作。
3. 可配置性:当您使用自己的按钮时，您将无法使用网络按钮提供的其他工具，例如共享计数器。
4. 持久性:通过破解这些按钮，当网络更新其 SDK 代码或嵌入方法代码时， future 的更改将变得困难。

我不确定您会走哪条路，但以下是开发人员页面的链接，您可以在其中生成按钮，以帮助您入门:

Facebook :

https://developers.facebook.com/docs/plugins/share-button/#

推特:

https://dev.twitter.com/web/tweet-button

Instagram:

不会发生的。 Instagram 是为移动用户打造的照片共享网络。没有直接的方法可以将某人的 Youtube 视频分享到您的 Instagram 提要(至少我知道没有)。

YouTube:

Youtube 不提供分享按钮。再一次，你会分享什么？如何将某人的 Youtube 视频发布到您的 Youtube 帐户？

替代方案:

还有其他提供共享小部件的服务，其中包含许多不同的社交网站和共享工具(“AddThis”、“ShareThis”谷歌它们)。就我个人而言，我不喜欢使用它们，因为它们会产生大量开销，而且我对它们的体验是它们非常慢。

如果是我:

我只会在每个 Youtube 嵌入中启用共享工具。这是一个可识别的图标，任何习惯于共享任何内容的用户都会认出它。它还为您提供了更多选择。这可以追溯到可用性/熟悉度。如果您的任何用户分享了 YouTube 视频，并且他们希望分享您的视频，他们将寻找熟悉的东西 - 那个图标 - 而不是橙色按钮。如果你被设计师说服去做一些你不同意的事情，你总是可以进行 A/B 测试。数字不会说谎。