javascript 如何在我的网站上添加 Facebook 分享按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16463030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add facebook share button on my website?
提问by Sahibjot Singh
I have this code that suppose to work, but doesn't work. If this helps you in anyway that would be great.
我有这个假设可以工作的代码，但不起作用。如果这对您有所帮助，那就太好了。
<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>
I want to add facebook share button on my website, that should just post my website's content on the wall. who want to share it.
我想在我的网站上添加 facebook 分享按钮，这应该只是在墙上发布我网站的内容。谁想分享一下。
I have researched a lot but did not get anything. Pleas help me in this.
我已经研究了很多，但没有得到任何东西。请在这方面帮助我。
Thanks in advance.
提前致谢。
回答by asifrc
You don't need all that code. All you need are the following lines:
您不需要所有这些代码。您只需要以下几行：
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
Documentation can be found at https://developers.facebook.com/docs/reference/plugins/share-links/
文档可以在https://developers.facebook.com/docs/reference/plugins/share-links/找到
回答by Virat Gaywala - CSM
You can do this by using asynchronous Javascript SDK provided by facebook
您可以使用 facebook 提供的异步 Javascript SDK 来做到这一点
Have a look at the following code
看看下面的代码
FB Javascript SDK initialization
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>
Note: Remember to replace YOUR APP ID with your facebook AppId. If you don't have facebook AppId and you don't know how to create please check this
注意：记得用你的facebook AppId 替换你的APP ID。如果您没有 facebook AppId 并且您不知道如何创建，请检查此
Add JQuery Library, I would preferred Google Library
添加 JQuery 库，我更喜欢 Google 库
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Add share dialog box (You can customize this dialog box by setting up parameters
添加共享对话框（您可以通过设置参数来自定义此对话框
<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>
Now finally add image button
现在终于添加图像按钮
<img src = "share_button.png" id = "share_button">
For more detailed kind of information. please click here
有关更详细的信息。请点击这里
回答by Subodh Ghulaxe
You can read more about share button here on Facebook developers website
您可以在 Facebook 开发者网站上阅读更多关于分享按钮的信息
Working JSFIDDLE
工作JSFIDDLE
Also take a look at custom Facebook Share button JSFIDDLE
也看看自定义 Facebook 分享按钮JSFIDDLE
Include Facebook JavaScript SDK code right after the opening <body>tag
在开始<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>
And place below code wherever you want to show Facebook Share button
并将下面的代码放在您想要显示 Facebook 共享按钮的任何位置
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>
Check working JSFIDDLE
检查工作JSFIDDLE
回答by t q
For Facebook share with an imagewithout an APIand using a #to deep link into a sub page, the trick was to share the image as picture=
The variable mainUrlwould be http://yoururl.com/
对于 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;
});
回答by Somnath Muluk
Share Dialogwithout requiring Facebook login
无需 Facebook 登录即可共享对话框
You can Trigger a Share Dialog using the FB.ui function with the share method parameter to share a link. This dialog is available in the Facebook SDKs for JavaScript, iOS, and Android by performing a full redirect to a URL.
您可以使用带有 share 方法参数的 FB.ui 函数触发共享对话框以共享链接。通过执行到 URL 的完全重定向，此对话框在适用于 JavaScript、iOS 和 Android 的 Facebook SDK 中可用。
You can trigger this call:
您可以触发此调用：
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});
You can also include open graph meta tags on the page at this URL to customise the story that is shared back to Facebook.
您还可以在此 URL 的页面上包含开放图元标记，以自定义分享回 Facebook 的故事。
Note that response.error_message will appear only if someone using your app has authenticated your app with Facebook Login.
请注意，仅当有人使用您的应用程序通过 Facebook 登录对您的应用程序进行了身份验证时，才会出现 response.error_message。
Also you can directly share link with call by having Javascript Facebook SDK.
您也可以通过使用 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 => Your app's unique identifier. (Required.)
redirect_uri => The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection.
display => Determines how the dialog is rendered.
app_id => 您应用的唯一标识符。（必需的。）
redirect_uri => 一个人点击对话框上的按钮后重定向到的 URL。使用 URL 重定向时需要。
display => 确定对话框的呈现方式。
If you are using the URL redirect dialog implementation, then this will be a full page display, shown within Facebook.com. This display type is called page. If you are using one of our iOS or Android SDKs to invoke the dialog, this is automatically specified and chooses an appropriate display type for the device. If you are using the Facebook SDK for JavaScript, this will default to a modal iframe type for people logged into your app or async when using within a game on Facebook.com, and a popup window for everyone else. You can also force the popup or page types when using the Facebook SDK for JavaScript, if necessary. Mobile web apps will always default to the touch display type. share Parameters
如果您正在使用 URL 重定向对话框实现，那么这将是一个完整的页面显示，显示在 Facebook.com 中。这种显示类型称为页面。如果您使用我们的 iOS 或 Android SDK 之一来调用对话框，则会自动指定该对话框并为设备选择合适的显示类型。如果您使用的是 Facebook SDK for JavaScript，对于登录到您的应用的用户或在 Facebook.com 上的游戏中使用时异步，这将默认为模式 iframe 类型，并为其他所有人提供一个弹出窗口。如有必要，您还可以在使用 Facebook SDK for JavaScript 时强制使用弹出窗口或页面类型。移动网络应用程序将始终默认为触摸屏类型。共享参数
- href => The link attached to this post. Required when using method share. Include open graph meta tags in the page at this URL to customize the story that is shared.
- href => 附加到这篇文章的链接。使用方法共享时需要。在此 URL 的页面中包含打开的图形元标记以自定义共享的故事。
回答by DagicCross
For your own specific server or different pages & image button you could use something like this (PHP only)
对于您自己的特定服务器或不同的页面和图像按钮，您可以使用这样的东西（仅限 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>
I cannot share the snippet with this but you will get the idea...
我无法与此分享片段，但您会明白...
