Выезжающая боковая вкладка (div) с виджетом Facebook на jQuery

Дорогие друзья, человек всегда стремится к чему-то прекрасному. Не зная, что это такое он хватается за всё, что ему нравится. Это нормально и закономерно. Блоги часто обвешивают всякими фишечками и рюшечками. Это то, что вам нравится? Тогда я вам расскажу, как сделать выезжающую боковую вкладку (div) с виджетом Facebook на jQuery.

Создание бокового выезжающего виджета Facebook

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

Само решение, я назвал floatingbox (с англ. плавающее окно). Суть его сводится к тому, что у нас будет тег DIV частично спрятанный за приделами окна браузера. Используя JavaScript библиотеку jQuery, мы создадим для него обработчик события hover (наведение курсора). При наведении курсора на видимую часть блока, в виде фоновой картинки вкладки, блок будет выезжать из невидимой части окна браузера и показывать скрытое ранее содержимое - виджет Facebook.

Не волнуйтесь, я всё разъясню и разложу по полочкам. Но если детали вас не интересуют, просто пропустите их и используйте только порядок действий.

Подключение JavaScript библиотеки jQuery

jQuery - это JavaScript библиотека позволяющая работать с элементами веб-страницы (в том числе и через кроссбраузерные CSS селекторы Sizzle), обрабатывать события, реализовывать визуальные эффекты, делать Ajax запросы и многое другое.

JavaScript библиотека jQuery

Бесплатно скачать последнюю версию JavaScript библиотеки jQuery вы можете на официальном сайте jquery.com. Но лично я предпочитаю использовать Google Libraries API и не ломать голову, где хранить файл библиотеки. В частности, jQuery 1.7.2, её минимизированный вариант, доступен по адресу:

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Для того же чтоб подключить библиотеку на веб-странице используйте тег script. Лучше всего его разметить в приделах тега head. Выглядеть это будет следующим образом:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Обращаю ваше внимание на то, что атрибут type можно и не указывать.

Обработчик события hover

Библиотеку jQuery мы подключили. Теперь можно вставить JavaScript-код обработчика события hover для нашего DIV-блока. Лучше всего его тоже разметить в теге head, после вызова библиотеки jQuery. Сам код обработчика имеет следующий вид:

<script type="text/javascript">
$(document).ready(function() {
  $("#floatingbox").hover(
    function() { $(this).stop().animate({right: "0"}, "medium"); },
    function() { $(this).stop().animate({right: "-250"}, "medium"); },
  500);
});
</script>

Что делает этот код? В начале, он ждёт, пока веб-страница загрузится целиком $(document).ready(). Далее, мы присваиваем нашем DIV’у с идентификатором floatingbox обработчик события hover, состоящий из двух функций для событий over (курсор наведён) и out (курсор убран), а также времени задержки (в данном примере 0,5 сек.).

Копнём чуть глубже и рассмотрим содержание функций. В частности, здесь используется stop(), останавливающий все запущенные анимационные эффекты для нашего элемента. Потом используется animate() создающая анимацию выезжающего виджета Facebook путём перемещения блока из -250 пикселей к 0 пикселей и обратно.

Оформление DIV’а через CSS

Для того чтобы всё это работало нам нужно задать начальные значения для нашего DIV’а. Сделаем это через CSS. Код можно разместить в отдельном файле или поместить в тег STYLE, который лучше всего разместить в приделах тега HEAD. Выглядеть это будет следующим образом:

<style type="text/css">
#floatingbox{
  background: url('//1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png') 0 50% no-repeat;
  width: 245px;
  height: 270px;
  padding: 0 5px 0 46px;
  position: fixed;
  top: 20%;
  right: -250px;
  z-index: 99999;
}
</style>

Поясню. background - задаёт неповторяющуюся (no-repeat) фоновую картинку вкладки, размещённую слева и по центру. width (ширина) и height (высота) - задают размеры DIV’а. padding - задаёт внутренние отступы, в частности отступ под фоновую картинку вкладки. position - устанавливает способ позиционирования DIV’а, в частности fixed - элементы будет привязан свойствами left, top, right и bottom к точке на экране и DIV не сможет менять своего положения при прокрутке страницы. top (верх) и right (право) - задают начальное положение DIV’а на экране браузера. z-index - задаёт порядковый номер элемента на экране.

HTML-код DIV’а с виджетом Facebook

Теперь, что касается HTML-кода. Вообще, правильнее было бы начать именно с него, но я решил усложнить вам задачу. Хотелось, чтобы вы дочитали мой пост до конца, во всём разобрались и сделали всё правильно. Так что надеюсь на понимание. Впрочем, здесь нет ничего сложного, а сам HTML-код выезжающего виджета Facebook может выглядеть так:

<div id="floatingbox">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fwmascat&width=245&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=240748129296361" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:258px; background:#fff"></iframe>
</div>

Уточню. Важно разметить HTML-код виджета Facebook в DIV'е, т.е.:

<div id="floatingbox"><!--здесь ставим HTML-код виджета Facebook --></div>

Если с эти разобрались, то приступим к самому виджету Facebook, который называется Like Box. Он подойдёт как для отдельных аккаунтов, так и страниц, сообществ и т.д. Facebook. Его HTML-код (лучше использовать вариант IFRAME) можно сгенерировать тут. Как это сделать?

  • В поле «Facebook Page URL» укажите адрес вашего Facebook аккаунта, страницы и т.д.
  • В поле «Width» (ширина виджета) указываем значение 245.
  • В поле «Height» (высота виджета) указываем значение 270.
  • «Color Scheme» (цветовая схема виджета) на ваш выбор, но лучше будет смотреться именно light (светлая схема виджета).
  • Оставляем галочку «Show Faces» (показывать лица).
  • Поле «Border Color» (цвет рамки) оставляем пустым (будет по умолчанию серым) или прописываем по желанию свой в формате HEX. Для этого можно использовать онлайн генератор Color Schemer Online или тот же Photoshop.
  • А вот галочку «Show stream» (показать поток) убираем. Это поток последних статусов, нам же важнее пользователи.
  • Галочку «Show header» (показать заголовок) тоже убираем, по тем же причинам.

    настройка виджета Facebook Like Box
  • Жмём кнопку Get Code.
  • В открывшемся окне переходим на вкладку «IFRAME» и копируём сгенерированный код.

    получение HTML-кода виджета Facebook Like Box
  • Полученный код вставляем в наш DIV.
  • В сам код надо внести два изменения. Убрать атрибут allowTransparency="true" (задаёт прозрачность iframe) и добавить в конец значения атрибута style CSS-свойство background (цвет фона). Таким образом, наш DIV будет прозрачным, а вот сам виджет нет.

Послесловие

Надеюсь, что мне удалось просто, понятно и подробно объяснить вам как создать боковой выезжающий виджет Facebook, а также как использовать это решение и для других вариантов. Здесь нет ничего сложного, но если что-то не понятно – пользуйтесь мануалами по jQuery, CSS и HTML. Это лучший способ понять, как и что работает.

Отдельно хочу отметить, что для установки бокового выезжающего виджета Facebook на блогах Blogger'а можно использовать виджет HTML/JavaScript. Только убедитесь, что бибилиотека jQuery ещё не подключена в вашем шаблоне. Вообще подключить её стоит всё же в теге head, для чего придётся редактировать шаблон (Шаблон > Изменить HTML > Приступить) - это не так уж и сложно, но если что не забывайте сделать резервную копию шаблона. У меня всё. Спасибо за внимание. Удачи!

Twitter Facebook ВКонтакте Одноклассники Google+

15 комментариев:

Велерея
Вроде всё понятно и доступно описано, но у меня ерунда какая то получилась((( походу что то я не так сделала(((
Константин Кирилюк
Код со вставкой jQuery - лишние head и троеточия. Я же это просто для примера привёл :)
Велерея
(( блин или я тупить начала или на асфальте в лыжах пытаюсь чтот делать((( всё ну в баню этот выезжающий виджет....не хочет он у мну становиться ну хоть убей меня(
Константин Кирилюк
Велерея, я ж вас указал на ошибку, просто в HEAD надо было вставить только строку с тегом script. На всякий случай убрал из кода статьи лишний код :) Мне то это всё кажется очевидным...
Ната Решетник
Подключение JavaScript библиотеки jQuery;
Обработчик события hover;
Оформление DIV’а через CSS
Это всё насколько я понимаю всталять в форме редактирования HTML - я правильно поняла? (аочёсываю голову в задумчивасти блин)
Константин Кирилюк
В принципе, для Blogger можно только jQuery строку в head вставить (на всякий случай, но не обязательно туда), а остальное можно в виджет HTML/JavaScript.
Ната Решетник
))) ну хоть убей но результат - НОЛЬ(((((((
Константин Кирилюк
Ната, поместите ваш Facebook виджет в DIV с id="floatingbox". В общем более детальней ознакомьтесь с разделом "HTML-код DIV’а с виджетом Facebook" - осталось совсем чуть-чуть!
plus-invest
ок, попробуем, спасибо!
Dmitry Yevstrat
Спасибо! Сделал на своей странице две вкладки - видео с YouTube и виджетом Радиостанции с ресурса lovi.fm. В Chrome все работает нормально. А в IE вкладки последовательно отображаются внизу страницы. Подскажите пожалуйста, в чем может быть проблема? IE с чем-то не дружит? Или только со мной? :)
Константин Кирилюк
@Dmitry Yevstrat такое возможно если не указан доктайп, например:

<!doctype html>

Это в самом начале web-страницы. По крайней мере у меня в IE7 с таким работает.
Dmitry Yevstrat
Точно в десятку! Еще раз, огромное спасибо! Все работает как задумано было.
Анонимный
Ребят, подскажите пожалуйста, как его с левой стороны сделать? Полностью "отзеркалить". Спасибо.
Константин Кирилюк
@Анонимный здесь всё упирается в CSS. Для начала нам надо задать смещение влево в JavaScript, т.е. код будет, например таким:

$("#floatingbox").hover(
  function() { $(this).stop().animate({left: "0"}, "medium"); },
  function() { $(this).stop().animate({left: "-250"}, "medium"); },
500);

Далее нам необходимо изменить и основной CSS-код блока с учетом текущих требований, т.е. код будет, например, таким:

#floatingbox{
  background: url('//1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.png') 100% 50% no-repeat;
  width: 245px;
  height: 270px;
  padding: 0 46px 0 5px;
  position: fixed;
  top: 20%;
  left: -250px;
  z-index: 99999;
}

Изменения я выделил жирным. Общая концепция, если сравнить, становится в целом ясно. Стоит также отметить и то, что нужно будет использовать другую картинку для вкладыша, у меня она для блока справа.
Анонимный
Спасибо огромное за оперативный ответ. Кстати, я был на верном пути, просто кое-что не заметил)
Спасибо большое)
Отправить комментарий