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

时间:2014-12-29 23:18:38

标签: javascript facebook youtube

<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的新手,所以我无法弄清楚如何做到这一点。我有一个如上所示的嵌入式代码,我希望这个div名为&#34; share&#34;充当Facebook共享按钮,但主要问题是我希望它从嵌入的播放列表中分享最后播放或活动的视频。

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

1 个答案:

答案 0 :(得分:0)

而不是为分享按钮构建自己的div:

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

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

当您点击Get Code时,它会生成代码,其中HTML中会有一个网址

解决方案#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替换为您的视频或播放列表网址