Плаваюча панель «Додати до соціальних послуг»

Наскільки я бачу, така модель соціалізації сайту сьогодні є дуже популярною — я зустрічаю подібну панель на багатьох зарубіжних блогах. Воно й правильно — такий варіант найзручніший для відвідувача — незалежно від того, яку частину статті він читає, ця панелька завжди перед очима, т.к. вона фіксується на одному місці під час прокручування тексту сторінки.

Позначу кілька моментів:

  1. В IE6 скрипт працювати не буде, тому що ну його в лазню, цей IE6! Не варто він, щоб заради нього писати додатковий код. А відсутність панелі в цьому допотопному браузері не позначиться на працездатності сайту.
  2. У панелі я використовую дуже гарні іконки, які входять у набір під назвою Vector Social Media Icons. Ви можете скачати їх безкоштовно.
  3. Деякі іконки (Мій Світ, Бобрдобр, Memori.ru) довелося зробити самому, а деякі (ВКонтакте, Livejournal) знайшов у Михайла Шакіна.
  4. Як і раніше, весь HTML-код кнопок знаходиться безпосередньо в скрипті . Це краще тим, що:
  5. по-перше, на сайті не з'являться додаткові зовнішні посилання (тобто ПіАр сторінки перетікати не буде);
  6. по-друге, HTML-код сторінок не буде захаращуватися кодом кнопок;
  7. по-третє, за рахунок кешування скрипта браузером швидкість завантаження сторінок буде трохи швидше.

Я зробив3 варіанти панелі на ваш вибір: 1-й - всі іконки відображаються завжди, 2-й - точнісінько, як на моєму блозі, з перемиканням, 3-й - «не плаваючий» варіант.

Дивимося окремий живий приклад і завантажуємо його, якщо потрібно:

Завантажень: 6262Розмір: 27 Кб

Дивимося окремий живий приклад і завантажуємо його, якщо потрібно:

Завантажень: 4569Розмір: 27 Кб

У зв'язку з численнимипроханнями зробив також приклад, у якому панель просто розміщується горизонтально після тексту.

Завантажень: 2858Розмір: 23 Кб

Підключаємо до сайту jQuery (якщо він ще не підключений) шляхом додавання до секції наступного рядка:

Аналогічно підключаємо скрипт (відразу після jQuery):

У шаблоні свого сайту шукаємо код, який виводить текст статті, і прямо перед ним або одразу після нього підключаємо функцію скрипту:

Для користувачів WordPress цей рядок буде виглядати так:

До файлу стилів вашого сайту додайте такі стилі (залежно від варіанта панелі, який ви використовуєте):

Для 1-го та 2-го прикладів:

Зверніть увагу, що блок #socializ не має властивість left . Це зроблено свідомо для того, щоб панель по горизонталі позиціонувалося не щодо краю вікна браузера, а щодо батьківського блоку, в якому підключається функція скрипта.

Для 3-го прикладу:

Угорі скрипту знаходимо наступні рядки і вказуємо потрібні значення для вашого сайту:

Працює кросбраузерно (за мінусом IE6). Перевіряв у Opera, FireFox, Chrome, Safari (є косячок), IE8, IE7.

От і все. Сподіваюся вам сподобається.

Контент-студія «100 текстів» пише унікальні статті та тексти на замовлення. Це і копірайтинг, і рерайтинг та SEO-тексти.