Кнопка «Нравится» на Facebook, вызывающая горизонтальную полосу прокрутки - PullRequest
Новая
       19

Кнопка «Нравится» на Facebook, вызывающая горизонтальную полосу прокрутки

7 голосов
/ 21 марта 2012

Я недавно добавил кнопку «Мне нравится» на свой сайт, и она вызывает горизонтальную полосу прокрутки, когда она не нужна.Он не отображается в Chrome, но есть в Firefox и IE.

Я проверил созданный код в Firebug и не вижу, что происходит.

Вот ссылка насайт, чтобы вы могли видеть: http://www.swiftfurniture.com/

Как вы можете видеть, в Firefox и IE (возможно, и в других браузерах) есть горизонтальная полоса прокрутки, когда она не нужна.Это определенно кнопка, похожая на Facebook, вызывающая ее, потому что, когда я комментирую это, они исчезают.

Я добавил фиксированный div ширины вокруг кнопки с переполнением: скрыто применено, но, похоже, это игнорирует.1010 *

Я знаю, что есть много других вопросов, похожих на этот, но с использованием PrestaShop я действительно не хочу слишком много возиться с основным кодом, чтобы заставить работать кнопку «Нравится» на Facebook (если это вообще возможно).Я надеялся, что решение сохранит весь код, содержащийся в «социальном модуле», который я создал ... то есть - только один файл, а не возиться с заголовочными файлами и т. Д. PrestaShop.

Ответы [ 7 ]

4 голосов
/ 12 февраля 2014

Вы можете добавить к атрибуту "fb-like" data-width = "100px"

4 голосов
/ 21 марта 2012

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

Существует код, который внедряется в ваш <div id="fb-root"></div>, и внутри него находится iframe с шириной встроенного стиля 575 пикселей.

Вот что вызывает полосы прокрутки.

3 голосов
/ 17 апреля 2012

Разметка, которую Facebook вставляет на вашу страницу, может измениться, поэтому вы хотите использовать решение, не зависящее от него.

Вы можете решить эту проблему, поместив div fb-root в качествепервый дочерний элемент вашего тела 

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

Тег сценария и fb-подобный div могут оставаться на своем первоначальном месте.

Ссылка: Документация Facebook и отчет об ошибке

0 голосов
/ 06 июля 2014

Добавьте это к вашему CSS 

.fb-like{height:20px}

Добавьте атрибуты data-width и data-height в 

<div class="fb-like" data-width="124px" data-height="20px"></div>

Это также предотвращает появление вертикальной полосы прокрутки, если она не нужна.

0 голосов
/ 16 февраля 2014

Ни один из ответов здесь не помог мне, поэтому я попробовал сам.Я нашел решение:

Поместите следующий CSS в заголовок вашего сайта: 

#fb-like-wrapper iframe {
    width:100px!important
}

Поместите следующий HTML-код, где вы хотите показать кнопку «Мне нравится»: 

<div id="fb-like-wrapper">
    <div id="fb-root"></div>
    <div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite" 
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div
</div>

ты идешь :) 1009 *

0 голосов
/ 21 марта 2012

Существует DIV сразу после 

<div id="fb-root" class=" fb_reset">

<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">

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

Given URL is not permitted by the application configuration.

так что либо просто удалите этот DIV, либо примените

display:none;, чтобы все заработало идеально

Смотрите этот скриншот

enter image description here

  1. Имея проблему, смотрите, что есть горизонтальная прокрутка
  2. , имея решение увидеть, что нет горизонтальной прокрутки, но нежелательное содержимое в круге.
  3. применяя display none; к этому div или полностью удаляя этот div изкод, приведет вас к решению
0 голосов
/ 21 марта 2012

У меня была такая же проблема ... в коде есть ширина (я думаю, что по умолчанию 450). Если вы измените это значение примерно на 150, я думаю, вы будете в хорошей форме. Конечно, это зависит от настроек, которые вы выбираете в плагине facebook.

Удачи, надеюсь, это поможет.

...