Адаптивный facebook плагин «Страница»

Сложность

HTML 30%
CSS 20%
JavaScript 70%

Вступление

На официальной странице плагина сказано:

«Он не будет реагировать на изменения блочной модели после загрузки страницы.»

Действительно, плагин не адаптивный, но сегодня мы научим его реагировать на изменения блочной модели после загрузки страницы 🙂
И все это мы сделаем на нативном JavaScript.

HTML часть

<div class="widget-facebook">
  <iframe id="facebook_iframe" class="facebook_iframe"></iframe>
</div>

Уберем все лишнее, скрипты будем писать в отдельном .js файле.

Зададим стандартную html разметку: обертка, внутри которой будет наш плагин.

CSS часть

.widget-facebook {
  height: 500px;
}

.widget-facebook .facebook_iframe {
  border: none;
}

Зададим нашей обертке фиксированную высоту. Наш JavaScript будет брать высоту и ширину обертки, и относительно этих данных будет подстраивать размер нашего плагина.

JavaScript часть

function setupFBframe(frame) {
  var container = frame.parentNode;

  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;

  var src =
    "https://www.facebook.com/plugins/page.php" +
    "?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" +
    "&tabs=timeline" +
    "&width=" +
    containerWidth +
    "&height=" +
    containerHeight +
    "&small_header=false" +
    "&adapt_container_width=false" +
    "&hide_cover=true" +
    "&hide_cta=true" +
    "&show_facepile=true" +
    "&appId";

  frame.width = containerWidth;
  frame.height = containerHeight;
  frame.src = src;
}
/* begin Document Ready */
document.addEventListener('DOMContentLoaded', function() {
  var facebookIframe = document.querySelector('#facebook_iframe');
  setupFBframe(facebookIframe);

  /* begin Window Resize */

  (function() {
    window.addEventListener("resize", resizeThrottler, false);

    var resizeTimeout;

    function resizeThrottler() {
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();
        }, 66);
      }
    }

    function actualResizeHandler() {
      document.querySelector('#facebook_iframe').removeAttribute('src');
      setupFBframe(facebookIframe);
    }
  })();
  /* end Window Resize */
});
/* end Document Ready */

Создадим функцию setupFBframe(); с одним аргументом —  наш iframe.

В переменную container запишем обертку нашего плагина. Далее создадим две переменных и запишем туда высоту/ширину обертки(с помощью свойств offsetWidth/Height).

В переменную src мы записываем все стандартные настройки плагина, их можно менять по своему усмотрению(например изменить линк на вашу страницу в facebook).

Далее все данные из переменных применяем к нашему плагину.

Подключаем обработчик(DOMContentLoaded) к нашему документу(странице), и когда браузер полностью загрузит HTML и построит DOM-дерево, у нас идет вызов нашей функции с аргументом в виде нашего плагина.

И в конце мы подключаем обработчик на ресайз окна, и при изменении размера окна браузера мы будем вновь запускать наш плагин, предварительно удалив у него атрибут src. Особенностью здесь является то, что мы используем вспомогательную функцию resizeThrottler, зачем она нужна, можно узнать здесь  developer.mozilla.org

Демонстрация

*Изменяйте размер окна браузера.

Полная демонстрация(вариант сайдбара) смотрим здесь codepen.

Бонус, для тех кто желает весь js в html прописать codepen.

Можно поставить плюс моему ответу на Stackoverflow, или просто прокомментировать.

Заключение

Мы научили данный плагин реагировать на изменения блочной модели после загрузки страницы 🙂

И сделали это на нативном JavaScript.