添加带有视频的Facebook共享按钮到网站

时间:2015-05-22 15:19:55

标签: facebook web facebook-social-plugins facebook-share

我正在为我的网站添加一个Facebook Share按钮。我可以将其设置为在帖子中包含图片,但我希望它包含一个视频。 如何使用FB.ui feed parameters

执行此操作

以下是我添加图片的工作代码:

<!-- Facebook share script -->
<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.3&appId=*********";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 <div class="fb-share-button" data-href="#{@project_url}" data-layout="icon">
       <%= image_tag "facebook.png", :class=>"social_icon" %>
 </div>

$('.fb-share-button').click(function(e){
    e.preventDefault();
    FB.ui(
        {
        method: 'feed',
        name: "<%=@project.user.username%>",
        link: '<%=@project_url%>',
        picture: '<%=@project.images.first.image_file_url%>',
        caption: ' ',
        description: ' ',
        message: ''
    });
});

2 个答案:

答案 0 :(得分:0)

您需要在source参数中指定视频的网址。您可以阅读更多here

  

source:附加到此的媒体文件(SWF或MP3)的URL   帖子。如果是SWF,您还必须指定图片以提供缩略图   视频。

答案 1 :(得分:0)

我没有使用FB feed方法,而是使用了share,这取决于我为网页添加的元标记。这最终起作用了!

供参考,这就是它的样子:

$('.fb-share-button').click(function(e){
    e.preventDefault();
    FB.ui({
      method: 'share',
      href: '<%=@project_url%>',
    }, function(response){});
    });

和我的元标:

<!-- Facebook tags -->
<meta property="fb:app_id"             content="811332718952118"/>
<meta property="og:type"               content="video.other"/>
<meta property="og:url"                content="<%=@project_url%>" />
<meta property="og:title"              content="<%=@project.user.username%>'s Spin" />
<meta property="og:description"        content=" " />
<meta property="og:video"              content="<%=@project.video.video_file_url%>" />
<meta property="og:video:type"         content="video/mp4" />
<meta property="og:video:width"        content="700"/>
<meta property="og:video:height"       content="700"/>
<meta property="og:image"              content="<%=@project.spins.first.images.order(:position).first.image_file_url%>" />