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>
Related
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/
I am building a facebook connect website, and the facebook connect is returning everything i need except for the email, even though i have the data-scope saying i want the email.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxx', 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>
<div id="social-register" class="registration_panel">
<a id="facebook-login" class="fb_button fb_button_medium" data-scope="email,user_checkins" href="home/login">
<span class="fb_button_text">Login with Facebook</span>
</a>
</div>
Can anyone tell me what i could be doing wrong ? thx
Based upon the code you have in your question, I believe you are missing code to call to get user information. After calling FB.getLoginStatus(callBack) and verifying they're logged in, then you can call FB.api('/me?fields=email',callBack);
<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!
Could someone please take a few moments out of their schedule to look at the source code for the url: http://thered-line.com/petition-view.php?petition_ID=10 and tell me why the facebook "like" button is not appearing?
Thanks,
-Lance
There is a syntax error in your page. You could easily have spotted this using a debugger.
(F12 in IE, FireBug Addon for FF, Ctrl+Shift+I in Chrome and Opera)
<div id="fb-root">
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
?> //syntax error
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>