99

我有这段代码应该可以工作，但是不起作用。如果无论如何这对您有帮助，那就太好了。

<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分享按钮，该按钮应该只将我网站的内容张贴在墙上。谁想要分享。

我研究了很多，但没有得到任何结果。求助于此。

提前致谢。

— 萨希博特·辛格
source

2

sharelinkgenerator.com

— 罗尼·罗伊斯顿

252

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

<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/找到文档。

— asifrc
source

7

不太喜欢这个选项...希望有一个样式化的链接，有点像鸣叫按钮

— Serj Sagan

104

那为什么不设置链接的样式呢？我绝对喜欢这个选项。我喜欢控制自己的设计外观。

— sheriffderek

6

另外，这种方式不会添加facebook垃圾代码，这会使您的页面变慢。请参阅sharrre.com jquery插件，它可以轻松自定义外观并将几个社交“赞”按钮捆绑为一个。

— pixeline 2013年

3

是的，您仍然可以使用简单的共享链接。另外，请查看以下简单页面，以帮助您为所有流行的社交媒体网站建立简单链接：sharelinkgenerator.com

— pistol-pete

1

重要说明：这种想法在移动设备上打开了Facebook网站（不是FB应用程序）。小（或大）骗局。

— Ezra Siton

26

您可以使用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>

注意：请记住用您的Facebook AppId替换您的APP ID。如果您没有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">

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

— Virat Gaywala-CSM
source

7

...将此与Twitter等效项的初始化进行比较。坚果

— 2014年

6

您的方法需要一个应用程序ID，这真是太麻烦了。

— horseyguy15年

这仍然是一种魅力！出色的工作！

— Coding Freak

不错！容易理解。但是，我们如何知道用户是否实际共享了我们的内容？PS：仅当使用您的应用程序的人对您的应用程序进行身份验证时，才会出现response.error_message

— Pearl

14

您可以在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

— 苏博德·古拉克（Subodh Ghulaxe）
source

8

此代码是否可能不再起作用？甚至不在jsfiddle中

— erdomester 2014年

8

是的，让我自己进行这项工作遇到了严重的麻烦。

— 迈克尔

@erdomester小提琴在Chrome或Firefox中不会显示。这是由于浏览器的安全性阻止了沙盒iframe。在Safari中打开jsfiddle应该会显示，并且在jsfiddle外部实现后，它应该会在其他浏览器中显示。

— JisuKim82 '16

4

对于Facebook共享不带API 的图像并使用到子页面的深层链接，诀窍是将图像共享为，变量为#picture=

mainUrlhttp://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;
});

— q
source

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的页面上包括开放图元标记，以自定义共享回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中显示整页显示。这种显示类型称为页面。如果您使用我们的iOS或Android SDK之一来调用对话框，则会自动指定该对话框并为设备选择适当的显示类型。如果您使用用于JavaScript的Facebook SDK，则在Facebook.com上的游戏中使用时，对于登录到您的应用程序的用户或异步用户，这将默认为模式iframe类型，对于其他所有人将使用弹出窗口。如果需要，还可以在使用JavaScript的Facebook SDK时强制弹出或页面类型。移动网络应用将始终默认为触摸显示类型。分享参数

href =>这篇文章的链接。使用方法共享时必需。在此URL的页面中包括开放图元标记，以自定义共享的故事。

— 索南斯·穆鲁克（Somnath Muluk）
source

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>

我无法与此分享代码段，但您会明白的...

— 达吉克罗斯
source

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

分享对话框，无需Facebook登录