如何在我的网站上添加Facebook分享button？
我有这个代码，假设工作，但不起作用。 如果这对你有帮助，那将是很棒的。
<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: '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分享button，这应该只是在墙上张贴我的网站的内容。 谁想要分享。
我研究了很多，但没有得到任何东西。 请在这帮助我。
提前致谢。
你不需要所有的代码。 所有你需要的是以下几行：
<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/find
您可以使用facebook提供的asynchronousJavaScript 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 AppIdreplace您的APP ID。 如果你没有facebook的AppId，你不知道如何创build请检查这个
添加JQuery库，我会首选Google Library
<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>
现在最后添加图像button
<img src = "share_button.png" id = "share_button">
有关更详细的信息。 请点击这里
您可以在Facebook开发者网站上阅读关于分享button的更多信息
工作JSFIDDLE
也看看自定义的Facebook分享buttonJSFIDDLE
在开始的<body>标签之后joinFacebook 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分享button
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>
检查工作JSFIDDLE
分享对话框 ，无需Facebooklogin
您可以使用FB.ui函数和share方法参数来触发Share对话框来共享链接。 通过执行完全redirect到URL，此对话框可用于JavaScript，iOS和Android的Facebook SDK。
你可以触发这个呼叫：
FB.ui({ method: 'share', href: 'https://developers.facebook.com/docs/', // Link to share }, function(response){});
您还可以在此网页的网页上join开放graphics元标记，以自定义分享回Facebook的故事。
请注意，只有当使用您的应用的用户通过Facebookloginauthentication了您的应用时，才会显示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 =>在用户点击对话框上的button之后redirect到的URL。 使用URLredirect时需要。
-
display =>确定如何呈现对话框。
如果您正在使用URLredirect对话框实现，那么这将是一个完整的页面显示，显示在Facebook.com。 这种显示types称为页面。 如果您正在使用我们的iOS或Android SDK之一调用对话框，则会自动指定该对话框，并为设备select适当的显示types。 如果您使用的是Facebook SDK for JavaScript，则默认为login到应用程序的人员使用的模式iframetypes，或在Facebook.com上使用游戏时使用的asynchronous，以及其他人的popup窗口。 如有必要，您还可以在使用JavaScript SDK for JavaScript时强制使用popup窗口或页面types。 移动networking应用将始终默认为触摸显示器types。 共享参数
- href =>链接到这个职位的链接。 使用方法共享时需要。 在此URL的页面中包含打开的图元标记，以自定义共享的故事。
对于你自己的特定服务器或不同的页面和图像button，你可以使用这样的事情（仅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>
我不能分享这个片段，但你会得到这个想法…
对于Facebook共享一个没有API 的图像 ，并使用#深度链接到一个子页面，诀窍是共享图像为picture=
variablesmainUrl将是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; });
