Ре-инициализация виджета facebook при ресайзе окна браузера

@fol · Регистрация: 08.07.2013

Студворк — интернет-сервис помощи студентам

Приветствую.
Есть виджет блок с "кнопкой нравится" от фэйсбука. Ширина передается через атрибут data-width, забирается из разметки и виджет приходит в нужном размере. В API не нашел ни слова об адаптивности, поэтому решил делать так: на resize() при достижении брэйкпойнта я выпиливаю виджет с помощью remove() и пытаюсь инициализировать заново.
Проблема: если виджета еще не было на странице, он появляется при брэйкпойнте, если же он был и выпилился - не появляется.
Как победить?

@fol · 17.04.2017, 13:52 **[ТС]**

Нашел ответ: использовать метод FB.XFBML.parse();

HTML5
1
2
3
<div id="pageContainer">
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
</div>

JavaScript
1
2
3
4
5
$( window ).resize(function() {
    var container_width = $('#pageContainer').width();    
    $('#pageContainer').html('<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="' + container_width + '" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>');
    FB.XFBML.parse();    
});

может кому-то пригодится, нашел на стэковерфлоу

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1

	Ре-инициализация виджета facebook при ресайзе окна браузера 16.04.2017, 02:57. Показов 1295. Ответов 1 Метки нет (Все метки) Приветствую. Есть виджет блок с "кнопкой нравится" от фэйсбука. Ширина передается через атрибут `data-width`, забирается из разметки и виджет приходит в нужном размере. В API не нашел ни слова об адаптивности, поэтому решил делать так: на resize() при достижении брэйкпойнта я выпиливаю виджет с помощью remove() и пытаюсь инициализировать заново. Проблема: если виджета еще не было на странице, он появляется при брэйкпойнте, если же он был и выпилился - не появляется. Как победить? 0

Ре-инициализация виджета facebook при ресайзе окна браузера

Решение