Плавающие социальные кнопки для сайта на Joomla

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

Добавить плавающие социальные кнопки для joomla поможет скрипт с сайта share42.com.

Перед тем как скачать скрипт с сайта нужно выбрать размер кнопок и социальные сервисы, указать опции размещения панели кнопок. Опции позволяют указать вертикальное или горизонтальное расположение панели, выбрать кодировку сайта (для joomla кодировка utf-8), а так же включить счетчики нажатия кнопок.

После того как все настройки указаны скачиваем сгенерированный скрипт и приступаем к его внедрению на сайт.

Создадим в корне сайта папку share42 и размещаем там файл с кнопками icon.png и скрипт share42.js.

Внедряем в шаблон сайта в самое начало тега body следующий код:

<div class="share42init" data-top1="270" data-top2="70" data-margin="30"></div>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/share42/share42.js"></script>

 Отредактировать шаблон сайта можно здесь templates/[ваш_шаблон]/index.php. Причем путь расположения файла может отличаться. Если ваш шаблон студийный и использует фреймворк, например WARP, то путь может быть таким /templates/[ваш_шаблон]/styles/[ваш_шаблон]/layots/theme.php. Если нет желания заниматься поисками расположения шаблона, то можно воспользоваться менеджером шаблонов в административной панели.

Параметр data-top1 - задает отступ сверху в начальном положении, data-top2 - отступ сверху после прокрутки, data-margin - отступ от края.

Остается добавить таблицу стилей.

#share42 {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
  #share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
  #share42 a {opacity: 0.5}
  #share42:hover a {opacity: 0.7}
  #share42 a:hover {opacity: 1}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *