如何在我的网站上添加Facebook分享按钮？
Sah*_*ngh 86 javascript share facebook facebook-javascript-sdk facebook-social-plugins
我有这个代码,假设工作,但不起作用.如果这对你有帮助,那就太好了.
<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分享按钮,这应该只是将我的网站内容发布在墙上.谁想分享它.
我研究了很多但没有得到任何东西.请帮助我.
提前致谢.
asi*_*frc 227
您不需要所有代码.您只需要以下几行:
<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/
- 你为什么不设置链接呢？我绝对更喜欢这个选项.我喜欢控制我的设计外观. (92认同)
- 不喜欢这个选项...希望有一个风格的链接,有点像推特按钮 (7认同)
- 请参阅如何在弹出窗口中执行此操作:http://stackoverflow.com/a/14829742/560287 (6认同)
- 此外,这种方式不会添加Facebook垃圾代码,这将减慢您的页面.查看sharrre.com jquery插件,它可以轻松自定义外观并将多个社交"喜欢"按钮捆绑成一个. (4认同)
- 是的,您仍然可以使用简单的共享链接.另外,请查看此简单页面,以获取有关为所有热门社交媒体网站构建简单链接的帮助:http://www.sharelinkgenerator.com/ (3认同)
- 那么什么是可接受的参数？ (2认同)
Vir*_*ala 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>
注意:请记住用您的Facebook AppId替换您的APP ID.如果您没有Facebook AppId并且您不知道如何创建请检查此
添加JQuery Library,我更喜欢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>
现在终于添加图像按钮了
<img src = "share_button.png" id = "share_button">
有关更详细的信息.请点击这里
- ...将此与Twitter等效的初始化进行比较.坚果. (7认同)
- 你的方法需要一个应用程序ID,这是一个痛苦的痛苦. (6认同)
Sub*_*axe 14
您可以在Facebook开发者网站上阅读有关分享按钮的更多信息
另外看一下自定义Facebook Share按钮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 Share按钮的任何位置
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>
检查工作JSFIDDLE
- 是否有可能此代码不再起作用？甚至不是在jsfiddle (8认同)
- 是的,我自己工作时遇到了严重的麻烦......我最后得到了一个空白的div. (8认同)
对于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;
});
| 归档时间： |
|
| 查看次数： |
305625 次 |
| 最近记录： |