如何为我的嵌入YouTube播放列表添加Facebook共享按钮

How to add a Facebook share button for my embed YouTube playlist

本文关键字：添加 播放列表 Facebook 共享 按钮 YouTube 我的      更新时间：2023-09-26
<div id=player></div>
<div id=share style="width:100px; height:50px; background-color:#c33333"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '448',
          width: '763',
          playerVars: {
              'showinfo': 0,
              'controls': 0,
        listType: 'playlist',
        list: 'PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk'
            },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
        // event.target.playVideo();
      }
      function play_this_video(){
 player.playVideo();
}

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
          player.stopVideo();
        }
      }
    </script>

嗨，我是JavaScript的新手，所以我不知道如何做到这一点。我有一个如上所示的嵌入式代码，我希望名为"share"的div充当Facebook共享按钮，但主要问题是我希望它共享嵌入式播放列表中上次播放或活动视频。

有谁知道如何处理这种情况？

而不是为共享按钮构建自己的div：

<div id=share style="width:100px; height:50px; background-color:#c33333"></div>

您需要使用脸书页面中的脸书分享按钮：https://developers.facebook.com/docs/plugins/share-button

当您单击Get Code它将生成代码，其中HTML中将有一个URL。

解决方案#1

<iframe src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fwww.example.com.com&amp;layout=button_count&amp;appId=688937844491820" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>

解决方案#2

将共享按钮替换为以下 HTML

<div class="fb-share-button" data-href="http://www.example.com" data-layout="button_count"></div>

将以下内容放在<body>标签之后

 <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&appId=688937844491820&version=v2.0";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

将www.example.com替换为您的视频或播放列表网址

相关文章：