Facebook Как кнопки, не отображаемые при загрузке скрытых

Ответ 1

Использование CSS opacity - хороший вариант здесь.. что-то основное вроде этого:

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

Оттуда вы можете добавить переходы, чтобы они выглядели хорошо!

Ответ 2

Альтернативой, которую я использовал, было то, чтобы не отображать кнопку fb, пока отображается контейнер, это может быть достигнуто с помощью

window.fbAsyncInit = function () {
    FB.init({
        xfbml:false  // Will stop the fb like button from rendering automatically
    });
};

Затем, чтобы сделать подобную кнопку, вы можете использовать

FB.XFBML.parse(); // This will render all tags on the page

или следующий пример Jquery о том, как визуализировать весь XFBML внутри элемента

FB.XFBML.parse($('#step2')[0]); 

или простой javascript

FB.XFBML.parse(document.getElementById("step2"));

Ответ 3

У нас была та же проблема и она была решена, установив начальную ширину и высоту содержащего div нуля с помощью CSS, а затем, когда триггер активирован, используйте jQuery для:

• установить непрозрачность в ноль (чтобы скрыть div при его расширении)
• установить ширину и высоту (развернуть div)
• живая непрозрачность 1 (затухание в div)

При угасании нет необходимости reset ширины и высоты до нуля. Просто установите для отображения: нет после оживления непрозрачности до нуля. Теперь, когда кнопка Facebook загружена и имеет свои размеры, она не изменится.

Ответ 4

Метод непрозрачности работает, однако кнопки находятся на странице, просто не видны.

Итак, если у вас есть div с непрозрачностью 0, перекрывающей все, что вам нужно щелкнуть, вы случайно нажмете скрытые кнопки.

Я надеялся, что этот метод будет работать, к сожалению, для моего сайта это не связано с этим.

Ответ 5

Используйте этот CSS:

.fb_iframe_widget span,
iframe.fb_iframe_widget_lift,
.fb_iframe_widget iframe {
    width:80px !important;
    height:20px !important;
    position:relative;
}

Техническая информация: вы перезаписываете данные из facebook с помощью своего CSS, используя "! important"

Ответ 6

Это не ответ, это комментарий! Надеюсь, я вернусь и поработаю над этим и верну его в ответ.

Работа с той же проблемой. Firefox + скрытый контейнер. Единственное отличие заключается в том, что я использую onclick slideDown/slideUp для отображения/скрытия, но я думаю, что это не имеет значения.

Разделенный, мой html выглядит так:

<div id="fb_like_button" class="hide">
   <div class="fb-like" data-action="recommend" ...></div>
</div>

Я заметил, что разница между скрытым и незакрытым контейнером, то есть удалением моего класса 'hide' из div # fb_like_button, <span> и <iframe>, который facebook помещает в атрибуты стиля div.fb-like ширина и высота.

Итак, когда страница отображается (опять же, сильно удаляется html)

нескрываемый:

<div id="fb_like_button" class="">
   <div class="fb-like" data-action="recommend" ...>
     <span style="height: 61px; width: 97px;">
       <iframe style="height: 61px; width: 97px;">

скрытых:

<div id="fb_like_button" class="hide">
  <div class="fb-like" data-action="recommend" ...>
    <span style="height: 0px; width: 0px;">
      <iframe style="height: 0px; width: 0px;">

Игра с использованием стиля ширины и высоты с помощью инструментов разработчика firefox после полного рендеринга позволила мне взломать подобную кнопку обратно на видимую.

Пока нет решения, но я буду продолжать обновлять, поскольку я нахожу больше информации. Я собираюсь очень стараться не добавлять дополнительный javascript, который возвращает эти атрибуты стиля, а скорее расшифровывает wtf facebook. Просто надеюсь, что это поможет кому-то.

Ответ 7

Вместо установки отображения: none, попробуйте скрыть его с помощью margin-top или z-index. Оба из них не будут разрывать кнопку, подобную FB.

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}

Ответ 8

Каждый браузер работает по-разному на jsfiddle. Если вы попытаетесь загрузить код в тестовый html файл, который вы можете создать. Он может все еще работать. Просто не на js скрипке.. Иногда jquery не переопределяет CSS-код в css файлах или тегах.. Так что, если это делается так. Возможно, он скрыт.

Я видел, как это случалось случайным образом, когда я работаю над своими скриптами между компьютерами и браузерами.

Ответ 9

Настройка непрозрачности 0 не является для меня решением, потому что она скрывает и перекрывает все, что вам нужно, чтобы щелкнуть, а также функция jquery fadein использует свойство отображения css, а не непрозрачность.

поэтому решение, которое я разработал, состоит в отображении контейнера в виде блока, но из оставшегося окна: -9999px, тогда я устанавливаю таймер на 1 с ~ 2 с (время, необходимое для всех социальных кнопок для рендеринга) и изменение не отображаться и вернуться в исходное положение:

#bnts_container
{
  left:-9999px;
  display:block;
}

$(window).load(function () {

  setTimeout(function () {
     $('#bnts_container').css("display", "none");
     $('#bnts_container').css("left", "50%");
    } , 2000);

});

Нажмите кнопку + Поделиться здесь, чтобы протестировать это решение.

Ответ 10

Я предпочитаю сделать его абсолютным в контейнере

  iframe{
     position: absolute !important;
     height: 500px !important;
  }