I display FB Like/Share and Twitter buttons on same line but they won't align vertically, see code below from our What's New page. I'm looking for a simple solution to vertically align all buttons.
<div class="fb-like" data-href="http://www.ascendo.co/mac-password-manager.html" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>Tweet<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
You can add a simple
vertical-align: middle; to the
#twitter-widget-0
.fb-like{
Display:table-row;
}
Related
The likebox I created for nbglive.com is not resizable, no matter what method I use, and as such, it is causing great trouble as to how I can integrate it with our site without having it overlap the radio player.
Is it possible to get the like box to resize when the page is resized? I'm using twitter-bootstrap.
I am putting FB widgets (likebox and comments) into the Bootstrap's grid like this:
<div class="span4">
<div style="text-align: center;">
<div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
</div>
</div>
where url is the variable containing web URL of the FB page.
with CSS:
div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {
width: 100% !important;
}
Facebook loads its component asynchronously with styles set according to the width data attribute. I set it to some safe value: looks bad but does not overflow to other elements for different view-ports. My CSS overrides all the FB's width settings that are necessary to resize the widgets (I set 100%, so it adjusts to the containing div). It is not documented and possibly it will stop to work when FB changes their designs, so choose your default width (234px for me) wisely ;)
Example with LikeBox of at the bottom of the right-hand side panel and in the sidebar. Note the responsive behavior when you change the size of the browsers window.
Here is an easy way:
$(".fb-like-box").attr("data-width", $(document).width());
Do your cording according to your CSS as below
<div class="comment-box">
<div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>
</div><!--comment-box-->
cut and copy java-script as fb gives in headder
I've got weird problem. I'm trying to add Facebook Like Button on my website, but it doesn't show up in Internet Explorer and Firefox. Yes, I've already added this:
<html xmlns:fb="http://ogp.me/ns/fb#">
and FB-Root and JS SDK. Whenever I'm trying to add XFBML or HTML5 version, it always doesn't show up in IE and Firefox. In Chrome and Safari it works well.
However, when I leave cursor on the button that is displaying div that contains FB like box over the mouse hover, it will display properly. Also, when I put this like button in any other place on my site, it will show up.
Here's the code:
<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span>
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
</a>
</li>
It looks like Firefox and IE are rendering this box at the start of loading the page. However, they leave space for them. It's weird.
I wish you could help me. Thanks in advance.
OK, so I found solution for this problem.
Firstly, I've clear up all z-index in my css file and set z-index: 8; for .box_pop.
Secondly, set .ikonka div to display: none; and leave .ikonka:hover div with nothing (you can just don't put this in css).
Thirdly, I've set up some jQuery:
<script>
$(document).ready(function() {
$('#your-li-id').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
</script>
Note: where is #your-li-id you must put here id of your li element. This script will add pretty-hover class to your li. Then, in CSS, put this:
.pretty-hover div{
display: block;
}
It should work now.
As you can see, you mustn't set display: none; into your CSS and then - also via CSS - just add display: block; on hover.
If you will do that, iFrame won't be visible in IE or even FF. You must do this trick with jQuery.
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
I want to display more friend avatars on the like button box when I insert the code on my website, is it possible? I got the code from this, https://developers.facebook.com/docs/reference/plugins/like/ At the moment, the box just shows 7 friend avatars at maximum.
This will depend on how many of your friends like the page. Another option you can use is to display a like box with a facepile box next to it. eg:
<div class="fb-like" data-href="https://www.facebook.com/" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" style="float:left;></div>
<div class="fb-facepile" data-href="https://www.facebook.com/" data-size="large" data-max-rows="1" data-width="350"></div>
I have one page with multiple news items. Every item in the list must have own facebook Like button with count.
Is it possible to put multiple Like buttons with count for each news on same page?
Each like button code will have to have it's own unique url.
refer to: http://developers.facebook.com/docs/reference/plugins/like/
I use php to achieve this, by pulling all relative urls needed from a
database, looping them and writing return to the data-href param in
the html5 like button code.
You can manually set these links or set up a dynamic system as i did.
html5 button code.
<div class="fb-like" data-href="'.$thepage[link1].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>
<div class="fb-like" data-href="'.$thepage[link2].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>
<div class="fb-like" data-href="'.$thepage[link3].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>
xfbml button
<fb:like href="http://anotherfeed.com?link=1" send="true" width="450" show_faces="true"></fb:like>
<fb:like href="http://anotherfeed.com?link=2" send="true" width="450" show_faces="true"></fb:like>
<fb:like href="http://anotherfeed.com?link=3" send="true" width="450" show_faces="true"></fb:like>
I want to stop the comment box from appearing when a user likes something on my page.
Is this possible?
I'm using
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#appId=153692861385098&xfbml=1">
</script>
<fb:like href='http://www.domain.com/path/to/page.html'
send="true" layout="button_count" width="0" show_faces="false" font="">
</fb:like>
I've been trying to do the same. It's not pefect, but the only way I've found to work thus far is to use the following CSS:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Credit: https://stackoverflow.com/a/4871240/601299