Login/Register
How To Remove Border Around Like Box
Asked Answered
Solved facebookfacebook-likecustomization
S

6

11

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?

Sebi answered 16/9, 2011 at 22:35 Comment(0)
Q
26

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/

Quince answered 16/9, 2011 at 23:41 Comment(1)
Great, I can't believe I didn't think of this solution before. It's a little makeshift and I can't believe Facebook has so few options for customizing their like-box but this does the trick for now. Thanks. – Sebi
E
9
<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.

Escurial answered 5/4, 2013 at 18:15 Comment(0)
N
4

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>
Neil answered 5/6, 2013 at 13:50 Comment(0)
P
1

Adding this attribute worked for me:

data-border-color="#fff"

Or for dark scheme:

data-border-color="#333"
Plainlaid answered 15/3, 2013 at 17:4 Comment(0)
C
1

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'.

Cultivar answered 4/7, 2013 at 1:56 Comment(0)
C
0

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.
Collincolline answered 16/9, 2011 at 23:31 Comment(2)
I'm very interested in this solution as it may be a way to more legitimately style elements within the iframe. How would you do something like change the color of the link text using javascript? The rule for the links are: .fan_box a { color: #CCC; } I did read somewhere that it was impossible to change css elements for something not hosted on the same domain so maybe this won't work. Also, if you wanted to test it I believe you need to publish it first in order to see anything. – Sebi
Well it works like this. element's have (or should have) a uniqe field. lets say you have a div like this: <div id="abc" ...> the you can call in a javascript function this: var x1 = document.getElementById('abc'); and then you have a pointer to that div. and at the next line in javascript you do this 'x1.style.background = "#CCC"; -- But notice: I have looked at the html that is generated there by FB - there is a lot of id's you have to try untill you find the right one, so be prepared. – Collincolline

© 2022 - 2024 — McMap. All rights reserved.