将带有视频的 Facebook 分享按钮添加到网站
Add Facebook Share Button with Video to Website
我正在向我的网站添加 Facebook 分享按钮。我可以将其设置为在 post 中包含图片,但我希望它包含视频。 我如何使用 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: ''
});
});
您需要在 source
参数中为视频指定 url。您可以阅读更多 here.
source: The URL of a media file (either SWF or MP3) attached to this
post. If SWF, you must also specify picture to provide a thumbnail for
the video.
我没有使用 FB 提要方法,而是使用了分享,这来自我为我的网页包含的元标记。这最终成功了!
供参考,这是它的样子:
$('.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%>" />
我正在向我的网站添加 Facebook 分享按钮。我可以将其设置为在 post 中包含图片,但我希望它包含视频。 我如何使用 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: ''
});
});
您需要在 source
参数中为视频指定 url。您可以阅读更多 here.
source: The URL of a media file (either SWF or MP3) attached to this post. If SWF, you must also specify picture to provide a thumbnail for the video.
我没有使用 FB 提要方法,而是使用了分享,这来自我为我的网页包含的元标记。这最终成功了!
供参考,这是它的样子:
$('.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%>" />