Альтернативний бейдж для сторінок Facebook

Приклади зовнішнього вигляду віджетів при виборі світлої теми оформлення

Деякий час тому я досить щільно займався розробкою всіляких додатків під facebook та відповідно до частини проектів у форматі «для душі» були пов'язані саме з цією соціальною мережею. Про один із таких проектів і піде мова в цій статті, а саме про альтернативному варіанті бейджа для сторінок facebook. Поштовхом до реалізації послужив гнітючий вигляд нативних бейджів. Джерелом натхнення став підхід до цього питання у Google+. Базові завдання були прості — простота в установці та налаштування, а крім того максимально можлива крос-браузерность.

Исходники + Демо



Установка

  1. Завантажуємо свіжу версію бібліотеки FBplus.badge репозиторію проекту на GitHub
  2. Підключаємо файл стилів
    <link rel="stylesheet" href="{шлях до файлу}/fbplus.badge.css">

  3. Додаємо код віджету на сторінку
    <div id="FBplusBadge" data-width="240" data href="https://facebook.com/{page name}" data-rel="page" data theme="light" data-lang="en"></div>

    < script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = '{шлях до файлу}/fbplus.badge.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    

* приклад установки віджета можна подивитися тут

Параметри

Користувацьке налаштування віджета виконується за допомогою зміни значень атрибутів даних.
Назва
атрибута
за замовчуванням Короткий
опис
докладніше
data-width 240 px ширина віджета значення повинно бути в діапазоні 160 — 420 пікселів
data href --- адреса сторінки допускається використання як повної адреси сторінок так і тільки її назви
data-rel page тип сторінки на даний момент віджет актуальний тільки для facebook page
data theme light тема оформлення може приймати значення «light» або «dark»
data-lang en мова віджета доступні наступні значення:
  • «en» — англійська мова
  • «de» — німецька мова

  • «fr» — французька мова
  • «it» — італійська мова
  • «es» — іспанська мова
  • «pt» — португальська мова
  • «ru» — російська мова
  • «ua» — українська мова


Підтримувані браузери

Google Chrome, Firefox, Safari, Opera, Internet Explorer 8+

Додатково

Приклади зовнішнього вигляду віджетів при виборі темної теми оформлення

Приклади зовнішнього вигляду віджетів при виборі світлої теми оформлення

P.s. Буду вдячний за конструктивну критику

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.