Кнопки социальных сетей в Joomla 2.5. Плавающая панель от Share42Опубликовано: 04.05.2013 14:42 Автор: Ogri Просмотров: 13865
Кнопки социальных сетей в 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-теги
Популярные
-
60478
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
43321
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
42802
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
32968
Единая фильтрация вывода модуля mod_jcomments_latest -
30733
Joomla: как добавить свои языковые константы или переопределить существующие
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
-
lawyer 26.01.2023 21:22
%% my site: lawyer: https://www.forum.xmu.hu/index.php?action=profile;u=425573
-
-
Joomla: Сливаем два сайта в один при помощи компонента J2XML
-
quilt 26.01.2023 21:26
%% my web site - quilt: http://51.75.160.67/ticket/177210
-
nikpayam.Com 26.01.2023 21:25
%% my web page - cerebral palsy attorney (nikpayam.Com: https://nikpayam.com/author/reubengodle/)
-
birth defect case 26.01.2023 21:22
%% Also visit my web page - birth defect case: https://www.punterforum.it/profile.php?id=882402
-
Joyce 26.01.2023 21:20
%% Also visit my website ... asbestos litigation [Joyce: https://gravesales.com/author/marianparml/]
-
-
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments
-
Repairing Glass 26.01.2023 21:26
%% Feel free to visit my web page :: Repairing Glass ...
-
asbestos Law 26.01.2023 21:21
%% Visit my web page - asbestos Law ...
-
-
Структура внутренних ссылок сайта на Joomla
-
만세마사지 26.01.2023 21:25
It's an amazing paragraph in favor of all the internet users; they will obtain benefit from it I ...
-
Cbd Rutland 26.01.2023 21:25
%% Here is my page Cbd Rutland ...
-
Brady 26.01.2023 21:19
%% Also visit my web blog; netsuite consulting companies (Brady ...
-
Комментарии
great author.I will remember to bookmark your blog and will come back
in the foreseeable future. I want to encourage you continue your great posts, have a
nice afternoon!
Is this a paid subject or did you modify it yourself? Either way keep up the
nice quality writing, it is rare to look a nice
weblog like this one these days..
to assert that I acquire in fact enjoyed account your blog
posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently rapidly.
an excellent supplier of online shooting fish.Using jilibet to play their slot machines is very easy, because the games have been provided specially setting by the system, and
these games can be played freely on your screen, Play 24 hours a day, 7 days a week, anytime, anywhere, compatible
with Android and iOS devices, so that players have the best gaming experience.
jilibet
Aⅼso visit mү homeрage Buster
When I look at your website in Opera, it looks fine but when opening in Internet Explorer,
it has some overlapping. I just wanted to give you a quick heads up!
Other then that, superb blog!
Feel free to surf to my site :: calendar printable
I believe that you could do with a few percent to drive the message home a little bit, however instead of that, that is excellent
blog. An excellent read. I'll definitely be back.
My blog post: march calendar 2025 (Emelia)
these know-how, so it's nice to read this weblog, and I used
to pay a quick visit this web site everyday.
Many thanks for sharing!
Also visit my web blog - binary options
The website loading speed is amazing. It sort of feels that you are doing any distinctive trick.
Also, The contents are masterpiece. you have performed
a wonderful activity on this subject!
I am here now and would just like to say thank you for a tremendous post and a all round exciting blog (I also love the theme/design), I don’t have time to read through it all at
the moment but I have bookmarked it and also added your
RSS feeds, so when I have time I will be back to read much
more, Please do keep up the excellent work.
O seu tema com alguns pequenos acertos faria meu blog destacar.
Por favor, se puder dizer onde você conseguiu seu projeto compartilha comigo, ok?
Parabéns!
euroleague football betting, aviator games, aviator games money -
first deposit bonus up to 500 euros.Sign up bonus
webpage, I have read all that, so at this time me also commenting at this place.
I needs to spend some time learning much
more or understanding more. Thanks for magnificent info I was looking for this information for my mission.
Is anyone else having this issue or is it a problem on my end?
I'll check back later and see if the problem still exists.
it out. I'm definitely enjoying the information. I'm book-marking and will be tweeting this to my followers!
Exceptional blog and brilliant style and design.
when i read this article i thought i could also make comment due to this sensible
article.
SEO? I'm trying to get my blog to rank for some targeted
keywords but I'm not seeing very good gains.
If you know of any please share. Many thanks!