Как поставить соц-иконки на Joomla-сайт

Привет читателям)

 

В данной статье, мы рассмотрим вставку соц-иконок на Ваш Joomla-сайт.

 

Соц-иконки нужны для того, чтобы пользователь мог поделиться вашей статьей или ссылкой на сайт через социальные сети.

 

Для начала давайте зайдем на сайт share42.com/ru.

 

Данный сайт позволяет сгенерировать скрипт и внешний вид иконок.

 

Шаг 1 - Выбрать размер и отметить нужные иконки:

 

Выбираем размер иконок (32x32, 24x24, 16x16 пикселя). По умолчанию стоит 32х32 px.

 

Выбираем нужные нам сети (просто кликаем по значкам, можно перетаскивать, чтобы выставить нужный порядок)

 

Как поставить соц-иконоки на Joomla-сайт

 

Шаг 2 - Настройка:

 

  • выбираем тип панели с иконками: горизонтальная, вертикальная(плавающая);
  • ограничиваем количество видимых иконок (доступно при выборе типа  - вертикальная);
  • кодировка сайта, для joomlaэто UTF-8;
  • добавлять или не добавлять иконку сайта share42 (на Ваше усмотрение);
  • ссылка на RSS, доступно, если ранее была отмечена иконка RSS;
  • включение JQuery, ставится для счетчика публикаций;
  • после проделанных действий мы можем посмотреть на примере, как будет выглядеть наш блок иконок и скачать готовый скрипт.

 

социальные иконки joomla

 

Следующие - это установка скрипта на Ваш сайт.

 

После того, как скачали архив со скриптом, нужно разархивировать папку share42 в корень сайта.

 

социальные иконки joomla 2.5

 

В пункте №4 - "Выберите наиболее подходящий тип сайта" выбираем "Любой сайт".

 

Теперь копируем код:

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

 

Вместо site.name указываем домен вашего сайта. И вставляем его в исходный код шаблона или в модуль типа "HTML".

Для оформления панели иконок используем предложенный 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}

 

 Его вставляем в любой css-файл Вашего сайта.

 

иконки соц сетей joomla

 

Дополнительные параметры для настройки:

 

Параметр

Описание

Пример использования

data-url

ссылка на страницу

<div class="share42init" data-url="http://site.name/page-title/">

data-title

заголовок страницы

<div class="share42init" data-title="Заголовокстраницы">

data-image

ссылка на изображение

<div class="share42init" data-image="http://site.name/image.jpg">

data-description

описание к странице

<div class="share42init" data-description="Описаниестраницы">

data-path

путь к папке с файлом иконок icons.png

<div class="share42init" data-path="http://site.name/share42/">

Параметры для вертикальной панели

data-top1

расстояние от начала страницы до панели, в пикселях

<div class="share42init" data-top1="150">

data-top2

расстояние от верха видимой области страницы до панели, в пикселях

<div class="share42init" data-top2="20">

data-margin

смещение панели по горизонтали, в пикселях (отрицательно значение - влево, положительное значение - вправо)

<div class="share42init" data-margin="-70">

 

Вот примерно так должно получится:

 

иконки социальных сетей joomla

 

На этом все, Удачи)

 

P.S Если что-то не понятно, пишите комментарии.

Хотите комплексно решить Ваш вопрос? 

Перейдите в наш раздел видео-курсов

Оставьте первый комментарий

Не смогли найти, то что искали? Воспользуйтесь поиском

Популярные статьи

Последние статьи


Рекомендуем хостинг

 

 

BeGet

 

30 дней бесплатно!

 

Дополнительно Вы получаете бонусные домены, которые можно использовать как для регистрации, так и для продления доменов в зонах .RU, .РФ, .ONLINE, .SPACE, .SITE, .WEBSITE, .FUN, .HOST, .PRESS, .PW.