Оцените статью: 5 1 1 1 1 1 Рейтинг 5.00 (1 Оценка)

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

В данной статье, мы рассмотрим вставку соц-иконок на Ваш 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 в подарок