Facebook «Мне нравится» кнопка (HTML5) не работает должным образом

Question

Итак ... на сайте, над которым я работаю, есть кнопка «Мне нравится», которая, как предполагается, станет серым после нажатия на нее и не понравится вам нажмите «X» в недоступной кнопке «Мне нравится».

Вещь ... это не работает должным образом. В IE9, как только вы нажмете «Like», кнопка «like» станет небольшим текстовым полем, которое при ближайшем рассмотрении фактически представляет собой окно комментариев Facebook, которое пытается вписаться в слот! В Firefox и Safari (каждый в Windows 7), если вы нажмете «Like», кнопка станет серым, как следует, но иногда (по-видимому, случайным образом), если вы попытаетесь «отличить», нажав «X», это станет очень верхняя часть моего профиля профиля FB, и снова кажется, что он пытается втиснуть окно Facebook в этот слот.

Я НЕ хочу окно комментариев Facebook или НИЧЕГО - я просто хочу, чтобы кнопка FB «Like» переключилась.

Согласно информации разработчиков FB, у меня есть это перед Javascript:

<div id="fb-root"></div> 

Сразу же после этого, у меня есть:

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

Код вокруг кнопки, снова в соответствии с FB страница разработчика:

<div class="fb-like" data-href="http://www.facebook.com/(page to be liked)" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> 

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

Кроме того, в исходном коде был вышеупомянутый Javascript, но в конце назначения js.src был appid. Удаление этого не имело значения.

Существует также ссылка на Twitter, в которой используются похожие переменные, но я попытался удалить все это безрезультатно; подумал, может быть, это мешало.

Что еще я должен быть в поиске?

(BTW, я не могу воспроизвести проблему в Chrome или Opera. Фактически, в Opera рендеринг выглядит медленным. Похоже, это происходит: 1) Нажмите «Мне нравится». 2) Эта вещь, которая выглядит как текстовое поле, но на самом деле представляет собой сжатое поле комментариев FB. 3) Появится скрытая кнопка «Мне нравится». Если вы нажмете, чтобы отключиться, то одно и то же происходит в обратном порядке. Я начинаю думать, что это может быть ошибкой на конце Facebook, а не на моем.)

Answer 1

Ну, я узнал, как решить эту проблему в конце концов, по крайней мере, в Интернете.

Проблема в том, как Facebook делает кнопку Like. Из того, что я могу сказать, вот что происходит: 1) Пользователь нажимает «Нравится». 2) Возможно, пользователю необходимо войти в систему Facebook и подтвердить «Like». 3) Facebook регистрирует пользователя и помещает пользователя как «как» на странице. 4) Появится эстакада Facebook. 5) Кнопка «Как» становится серым.

Это четвертый шаг, это проблема, частично из-за тега div, в который мы вставляем кнопку «Like». CSS, который мы специально настраиваем для переполнения, является «скрытым», что означает, что все, что не подходит в пространстве кнопки «Like», блокируется. Поэтому теоретически эстакада не должна быть видимой вообще, поскольку она выходит за пределы кнопки «Мне нравится».Однако кажется, что некоторые браузеры в основном отображают ВСЕ содержимое (включая эстакаду), а затем подталкивают этот контент к самому концу тега div (другими словами, нижний правый угол поля комментария) и как результат, кнопка «Like» полностью вытолкнута, и THAT рассматривается как переполнение и поэтому скрыта.

Теперь, что я нахожу, кажется, что шаги 4 и 5, как правило, участвуют в гонке, чтобы увидеть, какой шаг можно сделать первым! Если сначала выполняется шаг 4, то последнее, что отображается, - это серая кнопка «Мне нравится» - это то, что я хочу. Но если шаг 5 происходит первым, последнее, что отображается, - это поле комментариев, часть которого теперь видна там, где мне нужно иметь затушевавшую кнопку «Мне нравится». Я подумал, что если я на самом деле вынужу весь блок Facebook (через тег div) уйти, то верните его, рендеринг будет сброшен, и я получу то, что хочу. И это работает - при условии, что я поставил задержку не менее 1 миллисекунды, иначе шаг 5 будет выполнен до того, как будет сделан шаг 4. ЭТО, похоже, решило проблему, существующую с IE. Единственное, что за очень-очень небольшую долю секунды можно увидеть, как кнопка Facebook исчезает, кнопка Twitter, которую мы имеем, чтобы ее левая стрелка вправо, а затем назад влево, когда появляется кнопка FB назад.

Кроме того, это исправление не сильно поможет устранить вышеупомянутую проблему в Firefox: в Firefox пользователи все равно могут щелкнуть, пока кнопка находится в середине рендеринга. (Требуется секунда.) Если пользователь пытается отказаться от «Like» до того, как кнопка завершит рендеринг, пользователь получит эту часть поля комментариев. Похоже, что это полностью связано с Facebook и, к сожалению, означает, что это не поддается контролю. Все, что я могу сделать, это надеяться, что средний пользователь не будет так счастлив с помощью кнопки мыши!

Это не 100% -ное решение, но это огромное улучшение по сравнению с тем, где я был раньше!