In the setup dialog for the Like-Button, there are only two options for layout:
Unfortunately, the numbers for the website of my employer is nowhere near 22'000, so the powers that be have decided that we should not show the number of "likes" until said number is a little more in our favour. As far as I know, I don't have access to the layout of the button through Javascript or CSS (it's in an iframe served by facebook). Are there any other ways to hide the count?
Source: Tips4all, CCNA FINAL EXAM
Silly Rabbit is correct.
ReplyDeleteDont resize the Iframe, that can be detected from within the page.
Use the iframe code provided by facebook at http://developers.facebook.com/docs/reference/plugins/like
then wrap it in a div with height and width and overflow hidden.
this cannot be detected from within tha page if you dont have some other facebook javascript or xss reciever stuff on your page
If you do overflow:hidden then keep in mind that it will also hide the comment box that comes up in XFBML version... afer user likes it. So best if you do this...
ReplyDelete/* make the like button smaller */
.fb_edge_widget_with_comment iframe
{
width:47px !important;
}
/* but make the span that holds the comment box larger */
span.fb_edge_comment_widget.fb_iframe_widget iframe
{
width:401px !important;
}
Accepted answer is good, but be careful with multilingual pages. The text differ in length:
ReplyDeleteEnglish: Like
Dutch: Vind ik leuk
German: Gefällt mir
Just a heads up.
Just encompass the iframe in a div set the width to the width of button, set overflow to hidden
ReplyDeletei.e.
<div style="width:52px;overflow:hidden;">
<fb:like layout="button_count"></fb:like>
<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.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>
If you're using Facebook's javascript like button (so you can capture like events), here's what we had to do:
ReplyDeleteDue to a change Facebook recently made in the way comment dialogs display, we had to change how we were hiding it. The way they show the comment dialog has been 'moving' the content inside of the my overflow:hidden element so that the button looks really odd to the user after they click the like button.
In addition to adding a wrapping element with an 'overflow:none' style, you will need to hide the comment element that Facebook is putting onto your page:
Styles:
span.no_overflow {
overflow: none;
width: 50px;
}
.no_overflow span.fb_edge_comment_widget.fb_iframe_widget {
display: none;
}
Markup:
<span class="no_overflow">
<fb:like></fb:like>
</span>
We're still using the fb:like markup though. I have not tested this with the new div-based markup that Facebook is providing on their site now.
Adding the following to your css should hide the text element for users and keep FB Happy
ReplyDelete.connect_widget_not_connected_text
{
display:none !important; /*in your stylesheets to hide the counter!*/
}
-- Update
Try using a different approach.
http://www.facebook.com/share/
My solution is a little hood but it works what I do is just basically detect where the number is going to be and use css to have a box cover over it. I guess you can also cheat the system and add more hits if you wanted. here is my code using jquery but it will be different than others depending on where you place the like button on your page.
ReplyDeleteNot the most glamorous but hey the security is to tight to manipulate content in side of a frame.
var facebook_load = '';
$(document).ready(function() {
facebook_load = setInterval('checkIframeFacebookLoad()',100);
});
function checkIframeFacebookLoad() {
if($('iframe.fb_ltr').length) {
var parent = $('iframe.fb_ltr').parent();
var hide_counter = $('').attr('id', 'hide_count');
parent.append(hide_counter);
clearInterval(facebook_load);
}
}
#hide_count {
position:absolute;
top:-8px;
left:122px;
background:#becdd5;
padding:5px 10px;
}
This is what I've tried and it works fine in ff, chrome and ie8:
ReplyDelete/* set width for the <fb:like> tag */
.fb-button {
width:51px;
}
/* set width for the iframe below, to hide the count label*/
.fb-button iframe{
width:45px!important;
}
I know many solutions have been posted already, but mine is still somewhat different. It works for the HTML5 Version of the like button and only uses css to hide the count box. Don't forget to add the appId to test.
ReplyDeleteCSS:
<style type="text/css">
.fb-like span {
display: block;
height: 22px;
overflow: hidden;
position: relative;
width: 140px /* set this to fit your needs when support international sites */;
}
.fb-like iframe {
height: 62px;
overflow: hidden;
position: absolute;
top: -41px;
width: 55px;
}
</style>
FB 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_GB/all.js#xfbml=1&appId=xxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>
All you need to do is edit the iframe code that facebook gives you and change the width to 47 (you need to change it in 2 places). Seems to work perfectly for me so far.
ReplyDelete