如何在 html5 播放器上覆盖 Facebook 分享图标？答案

【问题标题】：How to overlay the Facebook share icon over the html5 player?如何在 html5 播放器上覆盖 Facebook 分享图标？
【发布时间】：2017-06-08 10:51:03
【问题描述】：

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1326374217440368";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-share-button" data-href="https://s3.ap-south-1.amazonaws.com/viyatrademo/suggestedVideo2.html" 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%2Fs3.ap-south-1.amazonaws.com%2Fviyatrademo%2FsuggestedVideo2.html&amp;src=sdkpreparse">Share</a></div>

错误输出画面：

我该如何解决这个问题？

【问题讨论】：

问题是什么？为什么你不能用 CSS 把它放在你想要的地方？
我想将视频链接分享到 facebook。
我在播放器上添加了 fb 分享图标，但是当我点击分享图标时，它给出了图像中显示的错误
检查此链接s3.ap-south-1.amazonaws.com/viyatrademo/tryshare.htm 尝试点击鼠标悬停在播放器上显示的 fb 图标。
您需要在 facebook 开发人员面板上设置允许的域。这与 SO 无关，但您没有阅读 facebook 文档是您的错。此问题的标题不代表实际问题

标签： javascript html

【解决方案1】：

在https://developers.facebook.com

检查您是否创建了一个应用（将为您提供“您的应用 ID”）
仔细检查您的域名是否已在应用中声明
按下“快速启动”，将显示您必须使用的代码。

在您的标题中：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your app ID',
      xfbml      : true,
      version    : 'v2.9'
    });
    FB.AppEvents.logPageView();
  };

  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
</script>

在您的文件中：

<div class="My-fb-Button">
<div class="fb-like" data-href="<?php echo esc_url( get_permalink() ) ?>" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
</div>

在您的 CSS 中：

.My-fb-Button{ 
    float: right; /* wherever you want to position your button */
    margin-top:10px;  /* wherever you want to position your button */
    margin-right: 10px;  /* wherever you want to position your button */
 }

【讨论】：