Why is the height of my Facebook Like button (technically the iframe that gets generated) always getting set to 80px? Example page is here: http://www.davidkasper.net/test.html I am using the javascript sdk and have had it work on other pages but for some reason the height will not change dynamically on this one! I can even do something like
<fb:like style="height:40px">
and that will indeed set the visible height, but the iframe will still be 80px, whereas I can see it changing in the demo at http://developers.facebook.com/docs/reference/plugins/like
The iframe being generated is allowing space for showing facebook profile pictures. Add the show-faces="false" attribute and it will collapse the height.
<fb:like show-faces="false"></fb:like>
I fix this problem with css
#fb-bar iframe{min-height:80px !important;}
where #fb-bar is wrapper for < fb:like >. In html
<div id="fb-bar">
<fb:like href="link"></fb:like>
</div>
I finally found the answer for this!!
The problem was having the wrong base domain set for the app that I specified in the FB.init javascript.
window.fbAsyncInit = function() {
FB.init({appId: '**131226520233112**', 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);
}());
See the difference between http://davidkasper.net/test.html vs http://davidkasper.net/test2.html
By the way I would never have discovered this without the URL Linter from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors it detected solved the problem!
David,
I was having the same problem too. I simply put the fb:like tag inside of a DIV with an ID of 'facebook-like'. Then I setup a CSS rule to limit the height and/or width of any iframe that exists in the 'facebook-like' DIV. Worked for me!
From the reference it says
The most important social plugin is
the Like button, which enables users
to post pages from your site back to
their Facebook profile with one click.
You can add a Like button to any page
with an iframe tag:
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
There are a number of options for the
Like button, including the option to
include the names and profile pictures
of the user's friends who have also
liked the page. Here is a like button
for the Facebook Developers site...
To me that indicates you should just use the iframe and set the width/height properties in the style tag...
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:300px; height:25px"></iframe>
Go to http://developers.facebook.com/docs/reference/plugins/like
Uncheck the 'Show Faces' checkbox. This will reduce the height to 35px.
Related
I have currently implemented a vertical social-share plugin bar similar to one shown here.
http://www.socialmediaexaminer.com/10-ways-to-add-facebook-functionality-to-your-website/
I have used the same code generated for the like button from Facebook. I am using the HTML5 code generated. When using the Chrome browser, the Facebook like button displaces from its position slightly when the back button is pressed. I am not sure what is causing this to happen and how to resolve it.
Used code for the Facebook like button:
<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&appId=504480219635937";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
When I look at your source, I see that you are using tables(that could be a potential problem). At a normal page load the span width and height are set. After you click on the back button these properties aren't set(these will be automatically calculated).In normal situations this will work, but I guess the data isn't refreshed/reloaded when you hit the back button and so the width and height will not be recalculated. You could try to set data-width="122" data-height="20".
eg. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="81" data-height="20" data-show-faces="true" data-share="true"></div>
or force by CSS:
.fb-like iframe {
width: 81px !important;
height: 20px !important;
}
Also read following article: Ajax, back button and DOM updates
Edit: After doing some research another possible reason why this happens is related to the cache of WebKit browsers(strange, because it works on my iPhone). The solution they provide is to disable the onunload function:
window.onunload = function(){};
See The Safari Back Button Problem
Probably fix : After some deeper investigation I found out that Chrome gives an error in the console: fb:like failed to resize in 45s.
Following code would be a temporary fix(fb:login_button failed to resize in 45s):
#fb_login_button {
width: 80px;
}
#fb_login_button span,
#fb_login_button iframe {.
width: 80px !important;
height: 25px !important;
}
Again, I'm not sure about this
Yup, this seems to be a long-documented problem (applying to other plugins like login) which Facebook weren't able to fix for the like button.
One fix suggested on the dev forums is a very reasonable one: set data-show-faces="false" but does nothing for me.
Apparently
When the bug is triggered fb js fails to assign the iframe (.fb_iframe_widget_lift) a width/height. As a result the iframe has an auto width/height of 300px/1000px.
Ideally this would be an easy bug to patch around, as we could give
the iframe a min/max width/height. However, since all Like button
clicks show the post comment modal, this solution is less viable. In
the case of the box_count button layout part of the modal is displayed
atop the button, therefore constraining the iframe size looks extra
janky.
I don't know how to use PHP (and it's blocked on the site I'm editing actually) but in case it can help anyone else here's the final comment so far (posted yesterday)
Use the iframe version of the code, which you can get here:
https://developers.facebook.com/docs/plugins/like-button/ You need
the Javascript SDK loaded as well.
On the parent page, you need to use PHP to capture and store in a
session variable the complete URL of the parent page:
<?php $fburl = (#$_SERVER["HTTPS"] == "on") ? "https://" : "http://"; if ($_SERVER["SERVER_PORT"] != "80") {
$fburl .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"]; } else {
$fburl .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; } session_start(); $_SESSION['savedurl'] = $fburl; ?>
Then, make the code to show the button(s) in the iframe like this:
<iframe src="//www.facebook.com/plugins/like.php?href=<?php session_start(); echo $_SESSION['savedurl']; ?>&width&layout=standard&action=like&show_faces=false&share=true&height=20&appId=your-app-id-goes-here" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:20px; width:330px;" allowTransparency="true"></iframe>
Change "your-app-id-goes-here" to your own appID.
This works because Facebook's iframe code is now contained within your
properly sized iframe, and therefore has no choice but to fit and stay
where it belongs...
There are names like Nike on the dev forum and it's still getting updated so hopefully further resolution's on the way – just thought I'd provide links and the latest available info here.
Ive tried to be sneaky and written a FB app, for a tab on a Page... the app allows you to paste in some HTML code, and then displays it on your tab.
I then paste in the html code for an iframe (which I have given a specific height to). The iframe pulls in content from a Wordpress site. But because some pages are longer than others, and the iframe is set to 1400px to accomodate all page content without scroll bars appearing, you have to manually scroll up the page.
Ive tried the following the the APP code to scroll the FB page to the top...
<body style="overflow: hidden;">
<!-- echo out iframe page code -->
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 123456789,
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoGrow();
FB.Canvas.scrollTo(0,0);
};
//Load the JavaScript SDK asynchronously
(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>
</body>
but the scroll to top thing isnt working... any input appreciated!
Just occurred to me that FB.scrollTo might well be working, but because that App file is not being reloaded when i navigate within the embedded iframe, its not going to call it... so I need to trigger FB.scrollTo when the new iframe content loads...?
I think you want to use https://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/ (FB.Canvas.scrollTo)
However, this function has only one purpose: scrolling to a certain position on your canvas app (https://apps.facebook.com/yourapp). It doesn't work if you manually insert an iframe either. On a canvas app, your app is being loaded in an iframe automatically.
Also, this only works if you set your Canvas Height to Settable.
I created a wordpress theme 810px wide to fit the new Page width. But I am getting scroll bars. How do I prevent or remove the scroll bars?
Thanks!
The FB guideline on managing scrolls bars is to use FB.Canvas.setAutoGrow function from the JS SDK. Please understand that the theme you put together should preferably be within about 800px (our implementations have gone up til 802px and it has worked fine), but the height can grow as much and with the integration of FB.Canvas.setAutoGrow, you should see only one scrollbar - that on Facebook's own page which should cover your entire content.
You need to call FB.Canvas.setSize(); to remove vertical scroll bars. You will need to do his on document.ready, and any other time your page resizes. I advise against FB.Canvas.setAutoGrow(); as it's much more efficient to only call setSize() when needed.
You will need to call FB.init() prior to setSize(). If you were to use the sample code from the top of https://developers.facebook.com/docs/reference/javascript/ then you can call setSize() where it says
// Additional initialization code here
overflow:hidden;
Add this to the div's CSS.
First, set the height and and width (810px) of your page in the CSS added overflow: hidden then set them again in the first line of code here and replace the opening body tag with this:
(remember to replace YOURAPPID with your App Id too)
<body onload="FB.Canvas.setSize({width: 810, height: 910})">
<div id="fb-root"></div>
<script>
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID;
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
We are using Iframe Type application in Facebook.
Curretnly we are using following Like Button code in our Iframe Canvas Page (Render page).
<iframe id="theiframe" src="http://www.facebook.com/plugins/like.php?href=http%3a%2f%2fwww.facebook.com%2fpages%2fRp9%2f151605171570927%3fsk%3dapp_196290923727494&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:330px; height:26px; padding-top:5px; padding-left:5px;" allowTransparency="true"></iframe>
When a user will click on "Like" we want to reload page for "Liked" content.
But, we are not getting any event of Like Button when we are using code.
On following link http://developers.facebook.com/docs/reference/plugins/like/ details are given to track like button event. But that is with xFBML application.
We are using Iframe application. Regarding Iframe option there is not any details on above link.
Can anyone help us on this issue?
Thanks in advance,
Ashish Shukla
You can use javascript to listen the edge.create event which is triggered when someone clicks on a like button.
FB.Event.subscribe documentation : https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I think it won't work with iframe button it will only work if the like button is created in xfbml or HTML5 like below :
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
When a user recommends my link (which has content, images, etc) it only displays the site name as the link with no text or images. How can I edit it so it does so?
My code is as follows;
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appID=1234567890&xfbml=1"></script>
FB.Event.subscribe('edge.create', function(response) {
//replace the next line with calling your div
alert('Shared!');
});
</script>
<fb:like href="http://www.mysite.com/" send="false" width="450" show_faces="true" action="recommend" font=""></fb:like>
Add open graph meta tags to your page so it knows what to pull in.
https://developers.facebook.com/docs/opengraph/
On http://www.mysite.com/, add the og:image meta tag for an image and og:description to customize the text.
Docs:
https://developers.facebook.com/docs/opengraph/
There's a linter tool that checks whether you did it right:
http://developers.facebook.com/tools/debug