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

javascript facebook facebook-javascript-sdk share facebook-social-plugins

2022-08-30 05:40:17

我有这个代码，它假设工作，但不起作用。

<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共享按钮，这应该只是在墙上发布我网站的内容。任何人都可以帮我吗？

答案 1

您不需要所有这些代码。您所需要的只是以下行：

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

文档可在 https://developers.facebook.com/docs/reference/plugins/share-links/

答案 2

你可以通过使用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>

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

添加JQuery库，我更喜欢谷歌库

<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">

有关更详细的信息。请点击这里