Хак Socializ DLE социальная панель как на dle9.com

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Хак Socializ DLE социальная панель как на dle9.com

Хак Socializ DLE социальная панель как на dle9.com

Инструкция по установке очень легкой и быстрой социальной панели 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 имя вашего ресурса !

Работает на браузерах (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.

Вот и все. Надеюсь, вам понравится.

автор: Dimox | рубрика jQuery

Рекомендуем хак социальная панель Socializ на dle9.com скачать
  • 80
Рубрика: DLE хаки » Хак для DLE
Ранее » Хак News Alert - Уведомление о модерации новостей« Далее Хак министатистика by Necrom (2010) для DLE
Добавление комментарияОставить комментарий
  • № :2
  • 2 сентября 2013 20:36
И как вы себе это представляете на главной, ссылка будет только на главную ?..здесь реализовано, чтобы ссылка была на новость, где находится соц. панель
  • № :1
  • 2 сентября 2013 12:17
А как выводить на главной? Что прописывать в main.tpl?