I've put the fb-login-button inside a wrapper element with the same height and background so that I can make it appear to be wider than facebook allows it to be (max 400px).
This works well for the most part but I need to be able to click the wrapper to login with facebook. Is this possible? And if so how might i go about doing this?
my html:
<div class="fb-login-button-wrapper">
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="true" data-auto-logout-link="false" data-use-continue-as="true" data-width="100%"></div>
</div>
however whats actually rendered is an iframe and i believe the clickable element is somewhere in there.
I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.
I would like to have something similar to this.
How can I set it up?
You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/
You will then need to edit the photoset code in your theme to something like this:
{block:Photoset}
<div class="photo">
{block:Photos}
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:Photos}
</div>
{/block:Photoset}
And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.
{block:Photo}
<div class="photo">
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
<div class="caption">
{Caption}
</div>
{/block:Photo}
Add a link to the Pirobox js file in the "head" of your theme.
<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>
Add this before the "head" or preferably in the "body" section near your other scripts.
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.
Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.
Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.
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 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 added face book like button on my site is there any way to disabled the count which is display next to the button.
http://www.knowledgenotebook.com/FB/notShow.png
You can but not directly.
You have to set data-layout="box_count", wrap button code with extra element, set overflow and move button up. It will be something like that:
<style>
.fb-wrap {height:20px; overflow:hidden;}
.fb-wrap div {position:relative; top:-41px;}
</style>
<div class="fb-wrap"><div class="fb-like" data-href="http://mysite.com/" data-send="false" data-layout="box_count" data-show-faces="false"></div></div>
This will work more bulletproof than crop by width because of internationalization
Yeah, honestly I'm very disappointed that Facebook still didn't do anything to make the button configuration easier (show/hide count, change size, etc.). All the other mayor social buttons - Twitter, G+, LinkedIn, Pinterest have this option available, and there's no need to make CSS workarounds which not always work (mentioned above case of different languages).
For simple sites, just add a fixed width to the iframe ( width:47px !important; )
For the multilingual sites where you have to display the Like/Recommend text in more than one language (EN: Recommend, DE: Empfehlen) the text length is different and you can't set a fixed width, but you can use layout=box_count and set a fixed height:
height: 70px; margin-top:-41px;
You can't.
http://developers.facebook.com/docs/reference/plugins/like
The count is not a configurable attribute
You can. All you need to do is set the width to 47 in facebook's iframe code.
There are a few answers for the different cases where you can hide the count in the answers here:
Facebook Like-Button - hide count?
The side effect is that you have to hide the comment flyout as well.
The default attributes you have available are here:
http://developers.facebook.com/docs/reference/plugins/like/
The code loads an iFrame on your site and you maybe able to adjust the size of the iFrame to hide certain components based on the design "Layout Style" you choose.
You can hide it using css styles, adjusting the width and hiding overflow, but be aware it's forbidden.
Facebook Policy
IV. Application Integration Points
4 d. You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin
If you want to include a share and like button (and don't need internationalization) this works:
<style>
.fb-wrap {height:20px; overflow:hidden;}
.fb-wrap div {position:relative; left: 27px; margin-left: -27px;}
</style>
<div class="fb-wrap">
<div class="fb-like"
data-width="160"
data-layout="button_count"
data-show-faces="false"
data-send="true">
</div>
</div>
All I had to do was change data-layout attribute from "box-count" to "button". Worked fine.
<div class="fb-share-button" data-href=#longURL data-layout="button">