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>

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

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

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

我不确定您将采取什么样的方式，但以下是您可以生成按钮的开发者页面的链接，以帮助您入门：

<强>实：

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

<强>微博：

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

<强> Instagram的：

不会发生。 Instagram是为移动用户构建的照片共享网络。没有直接的方法可以将某人的Youtube视频分享到您的Instagram Feed中（至少我没有意识到这一点）。

<强>的Youtube ：

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

作为替代方案：

还有其他服务提供共享小部件，其中包含许多不同的社交网站和共享工具（＆＃34; AddThis＆＃34;，＆＃34; ShareThis＆＃34; Google他们）。我个人不喜欢使用它们，因为它们会产生很多开销，而我对它们的体验是它们很慢。

如果是我：

我只需在每个Youtube嵌入中启用共享工具。它是一个可识别的图标，任何用户分享任何东西都会识别出来。它还为您提供了更多选择。这可以追溯到可用性/熟悉度。如果您的任何用户分享了YouTube视频，并希望与您分享，那么他们就会寻找熟悉的图标 - 而不是橙色按钮。如果你谈到做一些你不同意的设计师，你可以随时进行A / B测试。数字不是谎言。

在我的网站上“分享”YouTube视频上的社交媒体按钮

1 个答案: