I am aware that it is now impossible to link your own css to the like-box to customize it, but this problem seems like it could be accomplished using the like box wizard. All I want to do is change the border color to the same as the background of my page so that there doesn't appear to be a border at all. The strange thing is that is seems like any color I put in the border field doesn't effect the outcome at all. Here is my site: http://www.uplatindance.com/SDO/
Here is the embedded code
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>
Thoughts?
this is an interesting problem because we don't have access to the CSS controlling the style of the HTML elements because it's inside of an iframe. We can however wrap the div with a containing div like this:
<div class="fb-container">
<div id="bg-box" class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>
<div>
The fb-container div will be 2px shorter horizontally and vertically to cut out the borders. Here's the CSS:
.fb-container {
width: 258px;
height: 63px;
overflow: hidden;
}
.fb-container > div {
margin: -1px 0px 0px -1px;
}
And here's a jsfiddle live demo:
http://jsfiddle.net/jK97V/
<fb:fan profile_id="your-page-id-here" stream="0" connections="21" width="403" height="360" data-header="false" show-border="false"></fb:fan>
The attribute that removes the border is show-border="false", and this is the solution to go as it works also with background images. Changing border colour is not a serious solution as it only hides the border and work only with solid background.
add the following attribute to your fb-like-box div:
data-show-border="false"
I mean;
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-show-border="false" data-stream="false" data-header="false"></div>
Adding this attribute worked for me:
data-border-color="#fff"
Or for dark scheme:
data-border-color="#333"
The cleanest solution is to configure the border within the facebook like-box generator itself;
http://developers.facebook.com/docs/reference/plugins/like-box/#
Toggle the 'Show Border' checkbox and use the output code generated after you click 'Get Code'.
Probably Facebook is providing its own CSS for that button. Try overriding this with JavaScript or your own CSS.
In JavaScript I would do the following:
<script>
function init(){
div = document.getElementById('connect_widget_like_button clearfix like_button_no_like');
div.style.background-color = some color
}
</script>
<body onload="init();">
I would use JavaScript in this way to guarantee that the browser firsts sets up the Facebook stuff, and then overrides it with the colors that you want.
Consider two things:
It may be another element you need to work with (use the 'inspect element' option to see which may be the right ones.
I was not able to test this. I copied your code into a file on my computer but it showed me nothing.
Related
I've added the Facebook Like button to this site in wordpress:
http://www.likemaca.com/
However, the like button is still in english, even though it is the danish language code I added to the header:
<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/da_DK/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Any help appriciated
I viewed your blog source code to check if you added the like using iframe or <div class="fb-like">, My predictions were right, you added the like-button using iframe without adding/sending the parameter locale=da_DK to your iframe src
Basically you have two solutions
Stick with the iframe method and add locale=da_DK as below
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FAnchers-Gulvservice-AS%2F309501119143959%3Ffref%3Dts&width&layout=box_count&action=like&show_faces=false&share=false&height=65&locale=da_DK" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowTransparency="true"></iframe>
Notice the last parameter, In this case you won't need the Facebook-JS
Replace iframe with <div class="fb-like">:
<div class="fb-like" data-href="https://www.facebook.com/pages/Anchers-Gulvservice-AS/309501119143959" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
Here you will need the Facebook-JS
On my website the Facebook Like box disappears after exactly 45 seconds. I even put just the Like box code in it's own html document, verbatim from what I got from the developers site, but still the same outcome, so it seems like a Facebook issue, but I am not sure. I have tried on IE 11, FF 23.0.1, and the latest Chrome but it's the same thing.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[1];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/Awesome.Animals" data-width="300"
data-height="375" data-colorscheme="light" data-show-faces="false" data-
header="false" data-stream="true" data-show-border="false"></div>
It happens because of NoScript. It will be fine if you allow all of Facebook's domains get through (both facebook.com and facebook.net).
For some reason the Facebook JavaScript meddles with the size of the Facebook generated iframe after 45 seconds. Check your browser developer console. Do you see a warning message?
fb:share_button failed to resize in 45s
As a fix, use CSS to force the iframe to be a certain height and width like so:
.fb-like-box iframe {
width: 110px !important;
height: 20px !important;
}
I just noticed today that the data-width attribute for the Facebook Like Box widget does not appear to be working. It looks like it is reverting to the default width. An example of what I'm talking about can be seen on http://blog.christopherjonesart.com.
Here is the code I'm using (it's pretty standard):
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart" data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>
I am experiencing this issue on several websites. It is doing it in Chrome, Firefox, Safari and Internet Explorer. I have not recently updated Wordpress or made any changes to my css.
Help? It looks really crummy like this. :-(
Expanding on user2477225's answer, it might have problems with custom positioning that you set (relative or absolute somewhere on the page), so what I did was:
.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }
Seems to be working so far.
Edit: For IE 8 (and lower), please use this instead:
.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }
I like to be as specific as possible in my selectors, but after checking this issue some more, I see no technical reason to use the > selector here.
i think we should tell fb to fix their dumb script, now fb like box must be at least 292 px in width.
They state clearly on https://developers.facebook.com/docs/reference/plugins/like-box/
The minimum supported plugin width is 292 pixels.
I fixed the width with a little CSS hack but it is only temporary. My hack is this:
.fb-like-box iframe {
width: your_width_in_px !important;
}
Use the iframe settings, in my site using the iframe settings with a likebox of 236px width and it overrules the 292px width.
Brainless thinking of FB, every site needs a sidebar of 292px width???? yeye
Simply Use iFrame instead of fbml and change width to whatever required.
i.e.:(width:194px below)
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&width=194px&height=290px&show_faces=true&colorscheme=light&stream=false&show_border=true&header=true&appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe>
Thanks!
I have face the same problem to you.
my solution is use jquery script to change width of like box in the like box ready time.
in head section
<script type="text/javascript">
function JS_wait(){
// wait until like box script load
if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){
window.setTimeout(JS_wait, 100);
}else{
// wait 5 seconds to like box rendered.
window.setTimeout(JS_ready, 5000);
}
}
function JS_ready() {
// resize facebook like box to 200 px
//alert("JS_ready");
$("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px');
$("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200');
$("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px');
};
</script>
and in document ready add
<script type="text/javascript">
$(document).ready(function() {
JS_wait();
});
</script>
Cheers this must help you.
After the fb:like-box
add this script
change the 244px to your width
FB.Event.subscribe('xfbml.render', function(response) {
var el = document.querySelector(".fb_iframe_widget span");
el.style.width='244px';
el = document.querySelector(".fb_iframe_widget iframe");
el.style.width='244px';
});
According to Facebook official like box page, The minimum width is 292px.
Still, there is a little project on github to make facebook like box responsive and adapt to your website layout.
Applying this along with setting the width of the container to any width you prefer will force the facebook like box to fill that container and adapt to its width, no more, no less:
/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
Here is what I used to fix it, this is not the exact same since I don't show faces, but just adapt it to your code, the important part is the div #fb-like-container that I added, it lets me use css selectors to change required code.
CSS:
<script>
#fb-like-container div.fb-like-box>span,
#fb-like-container div.fb-like-box>span>iframe{
width: 173px!important;
}
</script>
HTML (data-width is not taken into account):
<div id="fb-like-container">
<div class="fb-like-box"
data-href="http://www.facebook.com/christopherjonescomicart"
data-width="273"
data-height="71"
data-show-faces="false"
data-stream="true"
data-header="false">
</div>
</div>
My Facebook comment box is cut off half way. I saved this as HTML and opened it with Safari, Chrome and Firefox but they're all half cutoff. How do I fix that?
I have been trying for a long time and cannot get it to work. For simplicity's sake, I am using only the necessary code for the comment box:
<html>
<head>
</head>
<body>
<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 = "http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=170045126459927";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</body>
</html>
Also, the page won't stop showing the loading sign.
The problem comes from your CSS file:
If you are using a Pluggin, you have to quit all the codes like
. facebook-comment { width: 95px !important; }
These codes are setting-up automatically by the plugin and don't allow you to settle the facebook comment box as you want.
Once you have done that, you can create a in your PHP console and then adding this class in your CSS file to customize your box as you want.
I am using facebook like send, tweet and Google plus like this. I am specifying width 320 for facebook div and width 105 for tweet. But the facebook and tweet button's
(div/iframe) should be automatically increased and decreased on their own based on the content width inside them. Can someone suggest me a way to achieve this. My main
idea is to cut the gap between these sections.
<script type="text/javascript">
var SnImpl= "<%=SnImpl%>";
if (SnImpl == "true") {
(document, 'script', 'facebook-jssdk');
(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";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
(function() {
var scrGooglePlus = document.createElement('script');
scrGooglePlus.type = 'text/javascript';
scrGooglePlus.async = true;
scrGooglePlus.src = 'https://apis.google.com/js/plusone.js';
var scrWriter = document.getElementsByTagName('script')[0];
scrWriter.parentNode.insertBefore(scrGooglePlus, scrWriter);
})();
}
<div class="fb-like" data-href="<%=strSNURL %>" data-send="true"
data-width="320px" data-show-faces="false">
</div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url=<%=strSNURL %>&via=SomeOne&text=Something" style="width: 105px; height: 25px;"></iframe>
<g:plusone href="<%=strSNURL %>"></g:plusone>
You need to know ahead of time how wide to make the plugins.
If you specify 320px for Facebook, facebook's iFrame will become 320px. Facebook doesn't even know how much minimum width the iframe's contents will take, so it just follows your orders of 320px. (http://developers.facebook.com/docs/reference/plugins/like/) I would suggest trying to specify 120px and also changing the layout style to "button_count" as this one is fairly narrow as compared to the default "standard". "box_count" will be the most narrow choice of them all, taking up only 50px width.
For twitter (https://dev.twitter.com/docs/tweet-button), you can specify "vertical" for the count property and this will skinny it up to 58px wide.
For google (https://developers.google.com/+/plugins/+1button/), you can specify tall bubble to match the other two. This will give you a width of 50px.