Facebook как кнопка не рендеринга в div с дисплеем: нет

Question

Мне хорошо известно, что почти 10 дубликатов этого вопроса. Но решения ни одного из них не работают для меня. Так вот подробности:

Я использую carousel из бутстрапа. Я использую carousel для отображения набора из 3 разделов на каждый цикл. структура выглядит следующим образом:

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <div class="span4>content along with FB like button </div> 
      <div class="span4>content along with FB like button </div> 
      <div class="span4>content along with FB like button </div> 
     </div> 

     <div class="item"> <!-- this div has display:none --> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
     </div> 
    </div> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div> 

Выше урезанная версия, просто выйти из ненужных вещей. Проблема в том, что все кнопки Facebook, такие как кнопки внутри div, у которых есть display:none, установлены width и height установлены на 0.

Эта проблема возникает в Firefox (последняя версия).

Я использую версию HTML5 как кнопка, сгенерированную с помощью FB like button configurator.

Ниже результирующая как кнопка кода в скрытом DIV:

<div data-show-faces="true" data-width="450" layout="box_count" data-send="false" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered"> 
    <span style="height: 0px; width: 0px;"> 

     <iframe scrolling="no" style=" height: 0px; width: 0px; class="fb_ltr fb_iframe_widget_lift" src=""> 
     </iframe> 

    </span> 
</div> 

Одноименные кнопки в активных дивы являются единственными видимыми. Даже те, в моделях (которые скрыты изначально), также не видны. Как сделать его видимым, когда div имеет отображение: нет?

Answer 1

Если вы установили div в display:none; по умолчанию, все дочерние объекты будут иметь display:none, что означает, что они не будут отображаться. То же самое, если вы установите нулевой размер.

IMHO это неправильный способ сделать это, но попробуйте установить дочерний объект на display: block; или display: inline; и присвоить ему определенный размер.

Answer 2

У меня была такая же проблема, как у вас, и мое решение для кода ниже. Главное отметить, что в любое время, когда вы видите код сгенерированный facebook с высотой и шириной 0, это означает, что кнопка facebook загружается, пока CSS на ней отображается: none. Вы не можете просто заставить его отображаться, потому что возможно, что кнопка facebook не была полностью загружена к моменту загрузки загрузочной карусели. Хитрость состоит в том, чтобы отобразить все ваши предметы в карусели, используя active при начальной загрузке, а после того, как вы загрузили свои кнопки в facebook, вы можете удалить active с вашего несходного слайда.

<div id="myCarousel" class="carousel slide"> 
<div class="carousel-inner"> 
    <div class="active item"> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
    </div> 

    <div class="active item"> <!-- this div also is active for initial load --> 
    <div class="span4>content along with FB like button </div> 
    <div class="span4>content along with FB like button </div> 
    <div class="span4>content along with FB like button </div> 
    </div> 
</div> 

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 



window.fbAsyncInit = function() { 
    FB.Event.subscribe('xfbml.render', function() { 
$('.carousel-inner>.item:not(:first-child)').removeClass('active'); 
    });} 

Answer 3

Вставьте iframe версию кнопки Like в любом скрытом содержимом, и она будет работать.

работал для меня как шарм

Answer 4

У меня был подобный вопрос, но только в IE. Я видел, что ширина и высота iframe остались 0. Это решило мою проблему:

.fb-like.fb_iframe_widget iframe{ 
    width:60px !important; 
    height:60px !important;         
}