фейсбук как высота коробки

Question

Как управлять Facebook как поле высота части потока в одиночку.Это нормально, чтобы уменьшить высоту всего блока, но если попытаться управлять им изображения вентиляторов не отображаются.

CSS .fan_box .page_stream{ ...,width:300px} до .fan_box .page_stream{...,width:150px}

Я спрашиваю, потому что поле потока внутри iframe

Answer 1

Нет способа изменить высоту.Facebook не предоставляет способ изменить высоту, и нет способа изменить высоту, используя JavaScript и CSS.

Почему я не могу сделать это с помощью JavaScript и CSS?

CSS просто не применяется через iFrame, потому что так работает iFrame - это в основном окно на другую страницу с собственным CSS.

Javascript не позволит вам получить доступ к содержимому iFrame, еслиURL-адрес iFrame отличается от страницы, содержащей iFrame.Выполнение:

document.getElementById('iframeID').contentWindow.document

В Chrome появится следующее предупреждение.

Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.

Причина этого заключается в предотвращении XSS.Вот еще о Одинаковая политика происхождения .

Answer 2

Вы можете уменьшить высоту окружающего элемента div, скрыть его переполнение и, если хотите, протолкнуть его верхнюю часть под абсолютно позиционированный элемент с более высоким z-индексом, например:

<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
    facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>

Answer 3

Я увидел это на странице Like Box и подумал, что я отвечу, что вы можете использовать атрибут data-height:

data-height="250"

работал для меня. Вот мой пример:

http://www.skonet.com/Resources/Articles/Index.aspx

Answer 4

Да, высота данных до 250 будет работать, поскольку она уменьшит внешний фрейм

Теперь попробуйте установить для высоты данных значение 1000 - оно все еще равно 300px высота,

потому что внутренний div внутри iframe жестко запрограммирован на 300px, и вы не можете контролировать его, как в междоменном iframe ...

Answer 5

Я оглядывался, потому что у меня была такая проблема. У Facebook нет стандартного способа настройки потока, если отмечены лица и заголовок.

Решение состоит в том, чтобы воспринимать их по-другому. Если вам нужен поток длиной до 1000 пикселей, просто снимите все, кроме потока. Это изменит его высоту с 300px по умолчанию до любого значения, которое вы вводите в поле высоты.

См. Пример ниже:

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>

Тогда, если вам все еще нужен тот с лицами, получите новый код и установите высоту по-другому, затем снимите флажки с других. Ниже приведен пример:

<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

Не забудьте добавить SDK перед этими кодами.

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

Answer 6

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

Это немного сложно, но вам, ребята, подойдет ..

создайте два отдельных ящика на одной странице и закройте их в отдельном элементе div прямо в моем случае

<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code

Сейчас в css

использовать абсолютную позицию для класса up1

.up1 {
position:absolute;
z-index:99999;
background-color:white;
}

и в up2

.up2 {
    padding-top:87px;
    }

Что он делает, он помещает коробку 1 над коробкой 2, скрывая ее фейсбук и бла-бла, создавая ощущение, что у вас есть одна коробка, которая содержит изображение и потоковую передачу желаемой длины

Answer 7

<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>

Настройте height в этом коде на то, что лучше всего подходит для вас.