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

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

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

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

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

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

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

Бесплатно скачать последнюю версию 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEgKGjns7L8fC6XXFALN4L8qiU8U0LalIDEWPgrc3EHoXau9TlUfIg-4cAXzXUtvUMtKarSPE5rF0AxyqeA2n69ujEaZ1jYU29H0RXWHsrvXmifJ-QKwmXDGi1ey9HzhgBdpX30OxMjTr/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» (показать заголовок) тоже убираем, по тем же причинам.

  
• Жмём кнопку Get Code.

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

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

Послесловие

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

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