...

суббота, 7 февраля 2015 г.

[Из песочницы] Альтернативный бейдж для страниц Facebook

Примеры внешнего вида виджетов при выборе светлой темы оформления

Некоторое время тому назад я достаточно плотно занимался разработкой всевозможных приложений под facebook и соответственно часть проектов в формате «для души» были связаны именно с этой социальной сетью. Об одном из таких проектов и пойдет речь в этой статье, а именно об альтернативном варианте бейджа для страниц facebook. Толчком к реализации послужил удручающий внешний вид нативных бейджей. Источником вдохновения стал подход к этому вопросу у Google+. Базовые задачи были просты — простота в установке и настройке, а кроме того максимально возможная кросс-браузерность.



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




Установка





  1. Загружаем свежую версию библиотеки FBplus.badge с репозитория проекта на GitHub

  2. Подключаем файл стилей





  3. Добавляем код виджета на страницу












* пример установки виджета можно посмотреть здесь

Настройка




Пользовательская настройка виджета выполняется посредством изменения значений атрибутов данных.






































Название

атрибута
Значение

по умолчанию
Краткое

описание
Дополнительные сведения
data-width240 pxширина виджетазначение должно быть в диапазоне 160 — 420 пикселей
data-href---адрес страницыдопускается использование как полного адреса страницы так и только ее названия
data-relpageтип страницына данный момент виджет актуален только для facebook page
data-themelightтема оформленияможет принимать значения «light» или «dark»
data-langenязык виджетадоступны следующие значения:


  • «en» — английский язык

  • «de» — немецкий язык

  • «fr» — французский язык

  • «it» — итальянский язык

  • «es» — испанский язык

  • «pt» — португальский язык

  • «ru» — русский язык

  • «ua» — украинский язык




Поддерживаемые браузеры




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

Дополнительно




Примеры внешнего вида виджетов при выборе темной темы оформления

Примеры внешнего вида виджетов при выборе светлой темы оформления


P. S. Буду благодарен за конструктивную критику


Recommended article: Chomsky: We Are All – Fill in the Blank.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

Отправить комментарий