我网站上 youtube 视频上的“分享”社交媒体按钮答案

【问题标题】："share it" social media buttons on youtube video on my website我网站上 youtube 视频上的“分享”社交媒体按钮
【发布时间】：2017-11-29 21:53:40
【问题描述】：

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

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

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

【问题讨论】：

嵌入不是那么可配置的。你必须构建一些自定义的东西。
关于我将如何去做的任何建议
你到底在分享什么？视频（youtube.com 的网址）？还是您在（您的网址）上显示视频的页面？
视频（youtube.com 的网址）

标签： jquery html css youtube

【解决方案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>

在您的情况下，您有一个自定义按钮的规范，因此您必须稍微修改生成的按钮并将链接机制应用于您自己的按钮。

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

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

我不确定你会走哪条路，但以下是开发人员页面的链接，你可以在其中生成按钮，让你开始：

脸书：

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 测试。数字不会说谎。

【讨论】：