Кнопки социальных сетей в Joomla 2.5. Плавающая панель от Share42Опубликовано: 04.05.2013 14:42 Автор: Ogri Просмотров: 18459
Кнопки социальных сетей в 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 является отличной альтернативой стандартной горизонтальной панели для сайтов, не использующих адаптивный дизайн.
Новые
-
20.07.2020 00:53
Joomla 3: Перенаправление на ту же страницу после авторизации -
13.02.2017 14:09
Joomla: как добавить свои языковые константы или переопределить существующие -
13.02.2017 13:23
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
23.06.2016 10:48
Единая фильтрация вывода модуля mod_jcomments_latest -
13.09.2015 13:06
Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-теги
Популярные
-
101630
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
73847
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
61611
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
38222
Joomla: как добавить свои языковые константы или переопределить существующие -
34438
Единая фильтрация вывода модуля mod_jcomments_latest
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
-
https://pornvid.pw 19.12.2022 10:01
-
Тест 25.08.2020 11:37
Не выводит сообщение об ошибке, если галку не нажать в рекапче
-
Николай3333 05.08.2020 07:55
Неужели работает?
-
Дарья Смирнова 29.07.2020 06:02
Здравствуйте, все вроде сделала по инструкции, но точно так же никаких изменений. Разве что теперь ...
-
ТвойБро 24.03.2020 03:42
Огромное спасибо, помогло. Странно, что по дефолту в jcomments предлагает в настройках выбрать ...
-
-
Кнопки социальных сетей в Joomla 2.5
-
dklada.ru 07.02.2023 09:05
Однако вы не можете протестировать SEO таким же образом из-за особенностей алгоритмов поисковых ...
-
-
Кнопки социальных сетей в Joomla 2.5. Варианты от Яндекса и Pluso
-
stromectol drug 08.06.2023 18:23
Hi, this weekend is fastidious designed for me, since this occasion i am reading this wonderful ...
-
-
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments
-
Андрей67 11.08.2020 16:54
У меня такая же картина, нет кнопки Импорт. как быть?
-
-
Цифровые коды WEB (веб) цветов для сайта
-
mostbet online 08.06.2023 19:15
Hello, Neat post. There is an issue along with your web site in web explorer, could check this? IE ...
-
Davis 08.06.2023 18:25
Nice post. I was checking continuously this blog and I'm impressed! Very useful information particularly ...
-
Подробнее...