Окно Facebook, когда вам "нравится", когда страница закрывается

Я пытаюсь добавить FB как на мой сайт. Кажется, что вроде работает нормально. Однако, когда кто-то нажимает кнопку "Мне нравится" (используя Firefox на Mac Lion), появляется окно "Поделиться", которое показывает обрезку на моей странице. В идеале я хотел бы, чтобы окно общего доступа отображалось полностью, чтобы посетители могли поделиться своими лайками. Если это невозможно, то избавиться от общего ресурса просто оставив "Мне нравится".

Вот как это выглядит:

http://www.sofiaandluis.com/public/facebook_like.png

Вот код: HTML

<div class="column-area">
    <div class="suscribe-social">
        <div class="up make-word-breakable">
            <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&appId=xxxxxx";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div class="fb-like" data-href="https://www.facebook.com/pagename" data-send="false" data-width="300" data-show-faces="true" data-font="verdana"></div>
        </div>
        <div class="down make-word-breakable"></div>
    </div>

CSS

.column-area {
    width: 300px;
    display: block;
    box-sizing: border-box;
    float: left;
    margin-left: 2.127659574%;
}
.suscribe-social {
    border: 1px solid #E4E4E1;
    margin: 5px 0px 20px 0px;
}
.suscribe-social .up {
    padding: 10px;
    display: inline-block;
}
.make-work-breakable {
    word-wrap: break-word;
}
Источник

6 ответов

Решение

Хорошо, получил это на работу. Я снял класс

.fb-like iframe {
    width: 290px !important;
}
Источник

Я не видел ничего, что указывает на то, что это настраивается через API FB, но я верю, что это должно работать:

.fb-like {
    height: 20px;  // I think that's the button height, you might need to adjust
    overflow: hidden;
}

Поле для комментариев все равно будет загружено, оно будет просто скрыто. Не знаю, возникнут ли там какие-либо осложнения, хотя я бы в этом сомневался.

Источник

Это довольно старый, но я хотел бы добавить еще один ответ здесь, который не предполагает наличие !important на нашем css. Который - давайте будем честными - просто не выглядит правильно.

.fb-like iframe { max-width:none; }
Источник

Я думаю, что поле FB обрезается, потому что некоторый родительский элемент имеет свойство "overflow: hidden".

Это свойство может помешать блоку FB превышать размер этого родительского элемента.

Источник 
.fb-like span{
overflow:visible 
!important; 
width:450px !important; 
margin-right:-375px;
}

это должно работать..... удачи

Источник

Также позиция: абсолютная; работает на держателе элемента кнопки.

Источник
Другие вопросы по тегам