Как убрать границу вокруг лайкбокса - PullRequest
11 голосов
/ 17 сентября 2011

Я знаю, что теперь невозможно связать свой собственный css с аналогичным блоком для его настройки, но кажется, что эта проблема может быть решена с помощью мастера аналогичного блока. Все, что я хочу сделать, это изменить цвет границы на такой же, как фон моей страницы, чтобы не было никакой границы. Странно то, что любой цвет, который я положил в поле границы, никак не влияет на результат. Вот мой сайт: http://www.uplatindance.com/SDO/

Вот встроенный код

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

Мысли

Ответы [ 6 ]

26 голосов
/ 17 сентября 2011

это интересная проблема, потому что у нас нет доступа к CSS, управляющему стилем элементов HTML, потому что он находится внутри iframe. Однако мы можем обернуть div содержащим div следующим образом:

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

div fb-container будет на 2 пикселя короче по горизонтали и вертикали, чтобы вырезать границы. Вот CSS:

.fb-container {
    width: 258px;
    height: 63px;
    overflow: hidden;
}

.fb-container > div {
     margin: -1px 0px 0px -1px;  
}

А вот демо jsfiddle live:

http://jsfiddle.net/jK97V/

9 голосов
/ 05 апреля 2013
<fb:fan profile_id="your-page-id-here" stream="0" connections="21" width="403" height="360" data-header="false" show-border="false"></fb:fan>

Атрибут, удаляющий границу, - show-border="false", и это решение подходит для работы, так как оно работает также с фоновыми изображениями. Изменение цвета рамки не является серьезным решением, поскольку оно только скрывает границу и работает только со сплошным фоном.

4 голосов
/ 05 июня 2013

добавить следующий атрибут к вашему fb-like-box div:

data-show-border="false"

Я имею в виду;

<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>
1 голос
/ 04 июля 2013

Самое чистое решение - настроить границу в самом генераторе лайкбоксов Facebook;

http://developers.facebook.com/docs/reference/plugins/like-box/#

Установите флажок «Показать границу» и используйте выходной код, сгенерированный после нажатия «Получить код».

1 голос
/ 15 марта 2013

Добавление этого атрибута у меня сработало:

data-border-color="#fff"

Или для темной схемы:

data-border-color="#333"
0 голосов
/ 17 сентября 2011

Возможно, Facebook предоставляет собственный CSS для этой кнопки.Попробуйте переопределить это с помощью JavaScript или вашего собственного CSS.

В JavaScript я бы сделал следующее:

<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();">

Я бы использовал JavaScript таким образом, чтобы гарантировать, что браузер сначала настроит Facebookвещи, а затем заменяет его нужными цветами.

Примите во внимание две вещи:

  • Это может быть еще один элемент, с которым вам нужно работать (используйте опцию 'inspect element'чтобы увидеть, какие из них могут быть правильными.
  • Я не смог проверить это. Я скопировал ваш код в файл на моем компьютере, но он ничего не показал.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...