I am embedding a like button in my site using the social plugin. I started with the code generated in like button documentation (http://developers.facebook.com/docs/reference/plugins/like/). I'm using standard layout without send or faces. The button itself displays and works fine. However, the the comments dialog does not display.
I found a number of suggestions for making this work, but am unsuccessful so far. The width is 450px. I tried the HTML5, XFBML, and IFrame versions. The IFrame version had the "add comment" link. That dialog displayed but was cutoff. I also used FB.init. Here is my html. I stripped out everything except the like button bits thinking it might be CSS-related but the stripped down version doesn't work either.
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'appid', // App ID
channelUrl : '//localhost:8282/myapp/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- <div class="fb-like" data-href="http://www.espn.com" data-send="false" data-show-faces="false" data-width="450"></div> -->
<fb:like href="http://www.espn.com" send="false" width="450" show_faces="false" />
</body>
</html>
Sometimes, it just takes a second pair of eyes. Thanks in advance for the help.
The comments box only works in a public domain. In other words, it won't display when running the your app on localhost. I believe I did read this on stackoverflow somewhere, but it didn't register.
Try replacing "connect.facebook.net/en_US/all.js" with "http://connect.facebook.net/en_US/all.js"
Related
Here is the page where I have Google Plus, Twitter and Facebook sharing enabled. You can try and see the behavior:
https://www.famometer.com/usatoday
Twitter sharing button works like a charm, but having major nightmares making g+ and fb like button to work.
First issue:
When Like button is clicked, it shows comment dialogue for a sec and then on subsequent clicks just keeps on flickering, does not allow to share. I tried with FF to look for any javascript errors or such but no errors are seen.
Here is the code:
Right after the <h:body> I have this Java Script code:
Namespace used: xmlns:fb="http://ogp.me/ns/fb#"
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '489611804432300',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// All your canvas and getLogin stuff here
//
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and then in the viewAd.xhtml, I have this code:
<fb:like id="fbLike" href="https://www.famometer.com/usatoday" send="false" width="100" show_faces="false" layout="button_count" action="like" style="top:-3px"></fb:like>
I have done everything by the book, but still not working properly. If I am not logged in to FaceBook, the dialogue pops to sign in, but after signing in, the popup keeps flickering every time the like button is clicked. Can someone shed some light what is wrong in its implementation.
Second issue is with g+ button
It is not populating the url, title and description provided by microdata structure.
Here is the code:
Namespace used: xmlns:g="http://base.google.com/ns/1.0"
<div itemscope="itemscope" itemtype="http://schema.org/Product">
<span style="font-weight: bolder; font-size: 20px;" itemprop="name">#{adBB.business.businessName}</span><br/>
<span style="font-weight: bolder; color:gray;" itemprop="description">#{adBB.business.description}</span>
<h:panelGrid>
... some code here...
<g:plusone href="https://www.famometer.com/#{adBB.business.socialMedia.famometer}" size="medium" count="false"></g:plusone>
... some code here
</h:panelGrid>
</div>
Here is JavaScript - asynchronous one at the bottom of the page.
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I have tried everything but it still reads info from meta tags and not from microdata tags.
Truly appreciate your help in solving these issues.
Thanks,
Sundeep
While the markup appears fine at a glance, the testing tool is not finding your schema.org values. I see the result of that by the share snippet preview not being accurate.
The issue with the dialog might be related to the redirects that you have in place. These should normally be okay. Is there a way you can test without the redirect? Like using https://www.famometer.com/views/viewAd.xhtml?ad=usatoday to test?
I have the following code:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<fb:login-button show-faces="true" width="370" max-rows="5" scope="email">Log In with Facebook</fb:login-button>
</body>
</html>
I log into the app using Facebook.
The page refreshes showing me that I'm logged in.
If I refresh or load the the page again then Facebook will load the plugin. After around 10 seconds, the page will reload.
Did I initialize wrong or is this simply how Facebook does things?
EDIT:
I sometimes get the following error:
1 XFBML tags failed to render in 30000ms.
Found a temporary fix from https://stackoverflow.com/a/4182542/968219
I don't know why this works but I'm glad it fixes it. Does anyone know a better fix?
try adding a channel file
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
channelUrl : '//WWW.MY_DOMAIN.COM/channel.html', // Channel File
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
the channel file would only include:
<script src="//connect.facebook.net/en_US/all.js"></script>
reference:
http://developers.facebook.com/docs/reference/javascript/
It looks like the xfbml rendering is not working properly, try using the HTML version.
<div class="fb-login-button" show-faces="true" width="370" max-rows="5" scope="email">Login with Facebook</div>
or you can also just build your own login button and bind it to this:
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
I would like to have a "go to top" link inside an iFrame tab page in the new Facebook timeline, have tried to use FB.Canvas.scrollTo as follows but not working. Any pointers greated appreciated!
<body style="overflow: hidden">
<div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'myAppID',
channelUrl : 'my_channel.html',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
document.getElementById('go_to_top').addEventListener('click', function(){
FB.Canvas.scrollTo(0,0);
});
<div id="goToTop">
<img border=0 src ="aPicForClicking.jpg">
</div>
</body>
I was having the same problem. In the application settings set Canvas Height to Fixed.Then FB.Canvas.scrollTo(0,0) works fine;
Canvas do not throw an error but also do not function when the iframe is within the content of another iframe.
IE. nested iframes are not supported for API calls.
Im trying to add a like button to my web app that is currently in development on localhost.
Ive set the ref attribute for fb:like and whilst i can like my websites page and see it in on my test-users facebook wall, the link posted does not contain any params such as fb_ref etc. Even clicking the link and checking my servers logs shows no params were sent.
I dont know what im doing wrong. Due to extensive testing facebook requires me to "confirm" I want to like something each time I click on the like button (a measure to thrwart spammers I believe). Does that have anything to do with it? I also turned on sandbox mode.
here is the button
<fb:like href="localhost:3000" ref="atrackingcode" send="false" show_faces="false" width="450" class=" fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
here is the sdk intialization
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'SECRET-SO-BOO-HOO',
channelUrl : '//localhost:3000/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
I'm trying to use facebook connect in my website for the first time.
I've created an app and I copied the code from here AS IS to a blank HTML file
http://developers.facebook.com/docs/guides/web/#login
but all I see is a plain text - "Login with Facebook" - no button, no functionality.
what can be the problem?
The code is -
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXX',
status : true,
cookie : true,
xfbml : true
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Try adding an XML namespace to the <html> tag of your document.
<html xmlns:fb="http://ogp.me/ns/fb#">
...then try the following for your login button:
<fb:login-button></fb:login-button>
From what I noticed from your HTML code, you lack the tag that links to Facebook's JS SDK.
Add this:
<script src="https://connect.facebook.net/en_US/all.js#appId={YOUR_FACEBOOK_APP_ID}&xfbml=1"></script>
Then instead of doing
<div class="fb-login-button">Login with Facebook</div>
do
<fb:login-button></fb:login-button>
just as what Charley P. answered.
Try to run your application in host. if your project is php based project means run in https://localhost/projectname.
And also check your facebook app setting. your project name should same as site name.