Инструкция по установке очень легкой и быстрой социальной панели Socializ для Dle.
Здравствуйте друзья!
Представляю вашему вниманию, легкую и быстро загружаемую социальную панель для добавления статьи в социальные сервисы.
Эту панель вы можете наблюдать снизу на странице любой статьи на нашем портале . Как вы видите, такая модель социализации вебресурса сегодня очень популярна - я встречаю подобную панель на многих зарубежных блогах. Оно и правильно - такой вариант наиболее удобен для посетителя - независимо от того, какую часть статьи он читает, эта панелька всегда перед глазами, т.к. она фиксируется на одном месте при прокрутке текста страницы.
Хак дле Socializ социальная панель DLE
Обозначу несколько важных особенностей:
В IE6 скрипт работать не будет, потому что ну его в баню, этот IE6! Не стоит он того, чтобы ради него писать дополнительный код. А отсутствие панели в IE6 браузере никак не скажется на работоспособности веб-ресурса .
В панели используется очень красивые иконки, которые входят в набор под названием “Vector Social Media Icons”.
В архиве находится так же, весь HTML-код кнопок , так сказать пример , наглядно показывает как будет выглядеть и расположены социальные кнопки:
В комплект входит 3 варианта панели на ваш выбор:
1-й - все иконки отображаются всегда, вертикально
2-й - с переключением, вертикально
3-й - “не плавающий” вариант горизонтальный.
А также в папке I1.zip находится оптимизированные ico иконки. которые увеличат скорость загрузки страницы в самих папках находятся оригинальные .
ВНИМАНИЕ : Если не отображается или не работает панель, причина может быть в файле .htaccess в старых версия стоит настройка которая не позволяет запускать JS, чтобы исправить ошибку достаточно переписать этот файл из дистрибутива версии DLE 9.2
Если не отображается графические иконки : Папку " i " согласно инструкции нужно записать в туже директорию где находится файл index.php , указав при этом направление.
Установка:
Подключаем к jQuery (если он еще не подключен) путем добавления между тегами в ВАШЕМ шаблоне:
<head></head>следующей строки:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="ПУТЬ_ДО_СКРИПТА/socializ.js"></script>В шаблоне fullstory. tpl в удобном для этого месте, где нужно водить социальную панель , и прямо перед статьей или сразу после него подключаем функцию скрипта:
<script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script>В файл стилей добавьте следующие стили (в зависимости от варианта панели, который вы используете):
Для 1-го и 2-го примеров:
#socializ { position: fixed; z-index: 1000; margin-left: -70px; padding: 6px 6px 0; border: 1px solid #E5E5E5; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #FFF; } * html #socializ {display: none} #socializ:hover { background: #F6F6F6; border: 1px solid #D4D4D4; -moz-box-shadow: 0 0 5px #DDD; -webkit-box-shadow: 0 0 5px #DDD; box-shadow: 0 0 5px #DDD; } #socializ a { display: block; width: 32px; height: 32px; margin: 0 0 6px; background-color: #F6F6F6; } #socializ img { margin: 0 !important; padding: 0 !important; border: none !important; } /* Если используете скрипт из второго примера, тогда еще добавьте это: */ #socmore { text-align: center; cursor: pointer; margin: -11px 0 4px; width: 32px; }Обратите внимание, что у блока #socializ не указано свойство left. Это сделано намеренно для того, чтобы панель по горизонтали позиционировалось не относительно края окна браузера, а относительно родительского блока, в котором подключается функция скрипта.
Для 3-го примера:
#socializ { display: inline-block; border: 1px solid #E5E5E5; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 6px 0 6px 6px; background: #FFF; overflow: hidden; } * html #socializ {display: inline} *+html #socializ {display: inline} #socializ:hover { background: #F6F6F6; border: 1px solid #D4D4D4; -moz-box-shadow: 0 0 5px #DDD; -webkit-box-shadow: 0 0 5px #DDD; box-shadow: 0 0 5px #DDD; } #socializ a { float: left; width: 32px; height: 32px; margin: 0 6px 0 0; padding: 0; background-color: #F6F6F6; } #socializ img { margin: 0 !important; padding: 0 !important; border: none !important; }В вверху скрипта socializ.js находим следующие строки и указываем нужные значения для вашего вебресурса :
var m1 = 140; /* расстояние от начала страницы до плавающей панели */
var m2 = 20; /* расстояние от верха видимой области страницы до плавающей панели */
var f = 'http://ресурс.ru/socializ/i/'; /* путь к папке с изображениями кнопок */
Где site_ru имя вашего ресурса !
var m2 = 20; /* расстояние от верха видимой области страницы до плавающей панели */
var f = 'http://ресурс.ru/socializ/i/'; /* путь к папке с изображениями кнопок */
Где site_ru имя вашего ресурса !
Работает на браузерах (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.
Вот и все. Надеюсь, вам понравится.
автор: Dimox | рубрика jQuery
Рекомендуем хак социальная панель Socializ на dle9.com скачать
Комментарии 2