Кнопки социальных сетей в Joomla 2.5. Плавающая панель от Share42
Опубликовано: 04.05.2013, 14:42       Автор: Ogri       Просмотров: 23574

Кнопки социальных сетей в Joomla 2.5

Куда внедрять?
Какие и где взять?
  Блок Поделиться от Яндекса и панель от Pluso
  Плавающая вертикальная панель от Share42
Выборочное размещение

Нашлось еще одно симпатичное решение, позволяющее как просто вставить горизонтальную панель в тело статьи, так и подвесить вертикальную "плавающую" панель. Во втором случае кнопки будут присутствовать на любой странице сайта. Именно на этом варианте и остановимся, поскольку первый был рассмотрен в предыдущих статьях на примере других типов соцкнопок. Поможет в этом сайт share42.com, где можно настроить под себя панельку кнопок. Выбор соцсетей там богатый, к тому же есть почти все русские. Сконфигурировать свой вариант просто и интуитивно понятно. Выбираем размер кнопок, кликаем на нужных социальных сервисах, по желанию добавляем кнопки из раздела Прочее - E-Mail, печать и т. д. Тип панели с иконками выбираем - вертикальная "плавающая".

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

Итак, имеется файл скрипта share42.js и файл иконок icons.png. Расположим их в папке js, созданной в корне сайта.

Также имеем код для внедрения скрипта, предлагаемый Share42:

<div class="share42init" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src="http://site.name/share42/share42.js"></script>

Редактируем путь к файлу JavaScript:

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

И, наконец, копируем стиль:

#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}

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

Соединяем скрипты в общий блок следующим образом: вначале код стиля, обрамленный тегами style, и затем блоки div и script. Получаем следующий код:

<style type="text/css">
  #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}
</style>
 
<div class="share42init" data-top1="242" data-top2="10" data-margin="-72"></div>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/js/share42.js"></script>

Все, что осталось - вставить полученный фрагмент в активный шаблон сайта. Можно воспользоваться административной панелью, а можно открыть файл templates \ [active_template] \ index.php в любимом редакторе с подсветкой кода. Я лично предпочитаю второй вариант. Перед внесением изменений, как и всегда, весьма желательно сделать резервную копию изменяемого файла.

Теперь, Федор, о главном. В какое место файла шаблона вставить код? Всунуть нужно, во-первых, внутрь тега BODY. Как правило, после тега BODY следуют всякие обертки или контейнеры, часто растянутые на всю ширину экрана. Поэтому вставляем код в последний сразу после BODY открывающий тег DIV, после которого следует отличный от DIV тег. Поясню на примере поставляемого с Джумлой шаблона Beez20, а также - моего кастомного шаблона. Вот код:

Beez20

<body>
  <div id="all">
    <div id="back">
      <div id="header">
        <div class="logoheader">
 
<!-- =====> !!! Вставляем сюда -->
 
          <h1 id="logo">
 
<!-- ------------ More code..... ----------- -->

Мой кастомный шаблон

<body>
  <div id="og-main">
 
<!-- =====> !!! Вставляем сюда -->
 
    <header class="og-header clearfix"><?php echo $view->position('header', 'og-nostyle'); ?>
 
<!-- ------------ More code..... ----------- -->

end faq

Надеюсь, принцип ясен. Теперь, поигравшись со значениями data-top1, data-top2 и data-margin, выставьте расположение панели. Смысл этих переменных объяснен на сайте share42.com.

В заключение скажу о плюсах и минусах такого варианта. Плюсы - симпатично и солидно выглядит, всегда под рукой. Дает возможность поделиться не только статьей, но и любой другой страницей сайта. А вот минус касается случая, когда используется адаптивный или отзывчивый дизайн сайта (responsive web design), т. е. отдельный вариант дизайна для мобильных устройств с меньшими разрешениями экрана. В этом случае на смартфоне и планшете панель перекрывает часть содержимого, что не есть хорошо. Поэтому вариант от Share42 является отличной альтернативой стандартной горизонтальной панели для сайтов, не использующих адаптивный дизайн.

Оставлять комментарии могут только зарегистрированные пользователи.

Новые

Популярные

Работая с этим сайтом, вы даете свое согласие на использование файлов cookie, необходимых для сохранения выбранных вами настроек, а также для нормального функционирования сервисов Google.
OK
Подробнее