I have "simple facebook connect" plugin on a wordpress blog and have integrated the comments and like button onto my website about a month ago. I noticed today however that neither the like button nor the comments load anymore, the last time I know for sure I saw them was 3 days ago.
I haven't changed anything and it doesn't seem like the site it banned (no reason to, it shows up in my developer page on facebook, and doesn't say this site is blocked).
Here is the code for the like button:
<fb:like href="http://extremesnowboardingvideos.com/2011/11/24/video-compilation-of-extreme-snowboarding/" send="false" layout="standard" show_faces="true" width="450" height="65" action="like" colorscheme="light" font="lucida+grande"></fb:like>
You need to add the Facebook Javascript library to your pages and call FB.init
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
if ( FB && FB.init ){
FB.init( {
appId: '<your-app-id>',
status: true,
cookie: true,
xfbml: true
});
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = "http://connect.facebook.net/en_US/all.js";
document.getElementById('fb-root').appendChild(e);
}());
</script>
Or use plugins such as WordPress Connect - http://wordpress.org/extend/plugins/wordpress-connect/
Related
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '197724456937488', status: true, cookie: true, xfbml: true});
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(response) {
document.getElementById('likepost').style.display = "";
document.getElementById('falsebox').style.display = "none";
document.getElementById('fb').style.display = "";
});
FB.Event.subscribe('edge.remove', function(response) {
console.log('This was UNliked from this page: ' + window.location);
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="fb" style="display:none">
<fb:like-box href="<?php echo $detail['Post_FB'] ;?>" width="292" height="100" show_faces="false" stream="false" header="false"></fb:like-box>
</div>
<div id="link" style="display:none">
<fb:like href="http://design-pro.co.cc/appleworld/post.php?id=<?php echo $id?>" send="false" width="450" show_faces="true" font=""></fb:like>
</div>
Use this as your starting point for reference: http://developers.facebook.com/docs/reference/javascript/FB.init/
First thing to notice is how FB.init() call is wrapped in:
window.fbAsyncInit = function() {
...
};
You are already setting 'status' to true in your init call, so you should be able to subscribe to an event which will return the status value, which tells you the user's login status.
Check out: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Your FB.Event.subscribe(...) call should also be inside the same window.fbAsyncInit() call.
Once you verify that user is logged in, you can check for fan status. You still have to use the old REST API, since Facebook hasn't ported this over to Graph API: http://developers.facebook.com/docs/reference/rest/pages.isFan/
Please note: We are in the process of
deprecating the REST API, and will be
adding equivalent support to the Graph
API for this method. You should
continue to use this method until we
announce support in the Graph API.
Hope this points you in the right direction.
This tutorial might also help: http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/
I originally posted this question on the FB Developer forums, but received no response...so figured someone here might be able to help.
When using the FB Social Plugins I have seen several articles outlining the following code (this is just a general example as the fb:like attributes can vary of course):
Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '#############', //configure FB App ID
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="www.domain.com" show_faces="false" width="450" font="arial"></fb:like>
I am wondering the following:
1) When using most of the social plugins (Ex: Like, Activity, Recommendations, etc) is there a need to include both the full SDK script and the second script tag?
In other words could one just include the following on their site:
Code:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="www.domain.com" show_faces="false" width="450" font="arial"></fb:like>
2) Are there any advantages of including both?
3) If you do not include the full script is there any reason to register for an App ID?
Thanks for any clarification that you may be able to provide!
Customer can sign in to my web app via normal login and facebook connect. So far so good.
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button> <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<xsl:value-of select="$FACEBOOK_APP_ID" />', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
But when they come to logout, I want the customer to click on the logoff link at my website. How can I programmatically logout facebook connect? Possibly via json backend?
I don't want customer to click facebook button to logoff.
I did try out with some ways, example: to reset the facebook connect cookie created at my website and it works, but when I try to login to facebook again at second time, it fails.
I know delete cookie logout is simply not clean (fb autologoutlink=true is still showing I haven't logout.)
I can't let customer to click logout twice, I want them to use my web app logout link as a single logout controller.
I am using ASP classic. Any solution?
If the user has logged in via Facebook, call this JS snippet when the user logs out of your site (depending on how you implement logout, one possible way is to use onclick="", or if you redirect to the "logged out" template, include it there):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.logout(function(response) {});
};
(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>
You can use this simple code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APPID HERE', cookie:true,
status:true, xfbml:true
});
</script>
and this:
<fb:login-button autologoutlink="true" length="short" background="white" size="large" data-show-faces="true" perms="email,user_birthday,status_update,publish_stream">Login with Facebook</fb:login-button>
I have implemented Facebook Open Graph Protocol Full Integration following the Facebook developers site and here http://www.websitedesign411.com/blog/facebook-open-graph-protocol-full-integration-walkthrough.
I got the Facebook Like Buttons to show here http://giantmango.com/news using
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="200" action="like" colorscheme="light"></fb:like>
On the same domain, I am using the exact code, but on a different theme and the Facebook Like Buttons are not showing here http://giantmango.com/testartwork-2237
Any ideas on how to solve this problem would help very much.
It looks like you are missing your Facebook javascript initialization code.
<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>
I have several Facebook like buttons on myself that are being rendered via XFBML. After clicking on them, they appear to work in that they change from the standard like button into the "thumbs up" icon that says "You like this". However, after a second or two (I assume the time it takes to hit FB's servers and come back), it automatically unlikes itself, turning back into the original like button.
See a video of what I mean here.
My code is pretty standard:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en">
...
<fb:like href="http://www.example.com/valid/path" layout="button_count" ref="recipe_preview" />
...
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
});
};
</script>
...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX', // my app ID is here
status: true,
cookie: true,
xfbml: true
});
if (typeof(fbAsyncInitExt) == 'function') {
fbAsyncInitExt();
}
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
})();
</script>
Edit: For what it's worth, I also attempted to see if Facebook was sending any log info, but it didn't appear to be:
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
console.debug(response);
});
FB.Event.subscribe('fb.log', function(response) {
alert('LOG: ' + response);
console.debug(response);
});
};
</script>
After a lot of digging, I finally discovered the source of the error. It turns out the page referenced by the href value in my fb:like tag required at least one of the fb:app_id or fb:admins META tags in the HEAD. For reference: http://developers.facebook.com/docs/opengraph
After trying all of the solutions I could find, none work, but I tried using the "Live feed" app ID rather than the default "Live Stream" when you're getting your code from the facebook developers page, which worked for me.