logo标签列表

如何在我的网站上添加Facebook分享按钮？

javascriptfacebookfacebook-javascript-sdksharefacebook-social-plugins
117

我有一段本应该能够运行的代码，但是它并不工作。

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {
            
        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }
    
    </script>

我想在我的网站上添加Facebook分享按钮，它应该只是将我的网站内容发布到用户的动态墙上。有谁能帮我吗？

2
http://www.sharelinkgenerator.com/ - Ronnie Royston
请注意，使用Facebook SDK时，仅通过访问您的站点即可跟踪您的用户；他们甚至不需要单击任何分享或赞按钮。下面的答案建议仅使用简单链接（a href）解决此问题。 - Peterino
7个回答
325
7
不是特别喜欢这个选项...希望有一个像推文按钮那样有样式的链接。 - Serj Sagan
130
为什么不给链接加上样式呢？我明显更喜欢这个选项。我喜欢掌握我的设计的外观控制权。 - sheriffderek
7
此外，这种方式不会添加 Facebook 的垃圾代码，从而减慢您的网页速度。请查看 sharrre.com 的 jQuery 插件，它使得自定义外观和将多个社交“喜欢”按钮打包到一个按钮中变得很容易。 - pixeline
3
没问题，你仍然可以使用简单的分享链接。此外，请查看这个简单的页面，帮助您构建所有常见社交媒体网站的简单链接：http://www.sharelinkgenerator.com/ - pistol-pete
1
重要提示：这个想法在移动设备上打开的是Facebook网站（不是FB应用程序）。有小（或大）缺陷。 - Ezra Siton
显示剩余6条评论
25
你可以使用Facebook提供的异步JavaScript SDK来实现这一点。
请看下面的代码。 FB JavaScript SDK初始化 
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

注意：请将YOUR APP ID替换为您的Facebook AppId。如果您没有Facebook AppId并且不知道如何创建，请查看此链接

添加JQuery库，我更喜欢使用Google库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

添加分享对话框（您可以通过设置参数自定义此对话框）

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

现在最后添加图片按钮。
<img src = "share_button.png" id = "share_button">

如需更详细的信息，请点击这里

。

7
与推特等价物的初始化相比较，简直疯狂。 - Michael
6
你的方法需要一个应用程序ID，这真是太麻烦了。 - horseyguy
这个仍然像魔法一样工作！出色的工作！ - Coding Freak
很好！易于理解。但是我们如何知道用户是否真的分享了我们的内容？附注：只有当某人使用您的应用程序进行了身份验证时，response.error_message 才会出现。 - Pearl
15

你可以在Facebook开发者网站这里阅读有关共享按钮的更多信息。

使用 JSFIDDLE 进行操作

还可以查看自定义Facebook共享按钮 JSFIDDLE

在打开的<body>标签后立即包含Facebook JavaScript SDK代码

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

请将以下代码放置在您想要显示Facebook分享按钮的位置：
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

显示图片描述

检查工作JSFIDDLE

8
这段代码不再起作用了吗？即使在jsfiddle上也是如此吗？ - erdomester
8
是的，我自己也遇到了严重的问题...最终只得到了一个空的div。 - Michael
@erdomester，这个fiddle在Chrome或Firefox中无法显示。这是由于浏览器安全机制阻止了沙盒iframe的显示。在Safari中打开jsfiddle应该可以显示，一旦你在jsfiddle之外实现它，它就应该在其他浏览器中显示。 - JisuKim82
6

在Facebook分享带有图片但不使用API，并使用#来深入链接到子页面时，诀窍是将图片作为picture=分享

变量mainUrl应为http://yoururl.com/

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
2

分享对话框无需要求Facebook登录

您可以使用FB.ui函数触发分享对话框，并使用share方法参数共享链接。通过将完整重定向到URL，此对话框在JavaScript、iOS和Android的Facebook SDK中可用。

您可以触发此调用：

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

您还可以在此URL的页面中包含Open Graph元标记，以自定义分享回Facebook的故事。

请注意，只有当使用您的应用程序的人已通过Facebook登录对您的应用程序进行验证时，response.error_message才会出现。

另外，您还可以直接使用JavaScript Facebook SDK调用链接进行共享。

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id => 应用程序的唯一标识符。(必填)

  • redirect_uri => 在使用URL重定向时，点击对话框上的按钮后要重定向到的URL。 (必填)

  • display => 确定如何呈现对话框。

如果您正在使用URL重定向对话框实现，则这将是一个完整页面显示，显示在Facebook.com内。此显示类型称为page。 如果您正在使用我们的iOS或Android SDK来调用对话框，则会自动指定并选择适当的显示类型以供设备使用。 如果您正在使用Facebook JavaScript SDK，则默认为模态iframe类型（适用于已登录您的应用程序的人或在Facebook.com上使用游戏时异步），并对其他所有人使用弹出窗口。如果必要，您还可以在使用Facebook JavaScript SDK时强制使用弹出窗口或页面类型。 移动Web应用程序将始终默认为触摸显示类型。 分享参数

  • href => 附加到此帖子的链接。在使用分享方法时需要。在此URL中包含open graph元标记以自定义要共享的故事。
2

这个Facebook页面有一个简单的工具，可以创建各种分享按钮。

例如，这是我得到的一些输出：

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="dilSYGI6"></script>
<div class="fb-share-button" data-href="https://www.mocacleveland.org/exhibitions/lee-mingwei-you-are-not-stranger" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mocacleveland.org%2Fexhibitions%2Flee-mingwei-you-are-not-stranger&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>
1

如果您需要针对自己的特定服务器或不同的页面和图像按钮，可以使用此类代码（仅适用于PHP）。

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

我无法分享这个片段，但你会明白的...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接