Aleksey.g84 Опубликовано 19 декабря, 2013 Жалоба Поделиться Опубликовано 19 декабря, 2013 Добрый вечер форумчане.Есть исходный код, а точнее готовое решение, но я никак не могу его прикрутить к SimplacmsКак все описать не знаю, напишу то, что пишет возможно автор: Недавно я решил отказаться от использования своего скрипта «Добавить в закладки» и создал новый скрипт на jQuery — плавающую панель с кнопками добавления статьи в социальные сервисы. Эту панель вы можете прямо сейчас наблюдать слева на странице любой статьи данного блога (при разрешении экрана более 1024 пикселей в ширину).Насколько я вижу, такая модель социализации сайта сегодня очень популярна — я встречаю подобную панель на многих зарубежных блогах. Оно и правильно — такой вариант наиболее удобен для посетителя — независимо от того, какую часть статьи он читает, эта панелька всегда перед глазами, т.к. она фиксируется на одном месте при прокрутке текста страницы.Как я и ожидал, после создания новой панели добавления в социальные сервисы посетители блога меня стали спрашивать о том, как сделать такую панельку, поэтому в этом посте я делюсь с вами скриптом.Обозначу несколько моментов:В IE6 скрипт работать не будет, потому что ну его в баню, этот IE6! Не стоит он того, чтобы ради него писать дополнительный код. А отсутствие панели в этом допотопном браузере никак не скажется на работоспособности сайта. В панели я использую очень красивые иконки, которые входят в набор под названием «Vector Social Media Icons». Вы можете скачать их бесплатно отсюда. Некоторые иконки (Мой Мир, Бобрдобр, Memori.ru) пришлось сделать самому, а некоторые (ВКонтакте, Livejournal) нашел у Миши Шакина. Как и раньше, весь HTML-код кнопок находится непосредственно в скрипте. Это лучше тем, что: во-первых, на сайте не появятся дополнительные внешние ссылки (т.е. ПиАр страницы перетекать не будет); во-вторых, HTML-код страниц не будет захламляться кодом кнопок; в-третьих, за счет кэширования скрипта браузером скорость загрузки страниц будет чуть быстрее. Я сделал 3 варианта панели на ваш выбор: 1-й — все иконки отображаются всегда, 2-й — точь-в-точь, как на моем блоге, с переключением, 3-й — «не плавающий» вариант. Пример 1-йСмотрим отдельный живой пример и скачиваем его, если нужно: jQuery-скрипт «Добавить в социальные сервисы» пример №1Загрузок: 5420 | Размер: 27 Кб Пример 2-йСмотрим отдельный живой пример и скачиваем его, если нужно: jQuery-скрипт «Добавить в социальные сервисы» пример №2Загрузок: 4072 | Размер: 27 Кб Пример 3-йВ связи с многочисленными просьбами сделал также пример, в котором панель просто располагается горизонтально после текста. jQuery-скрипт «Добавить в социальные сервисы» пример №3Загрузок: 2446 | Размер: 23 Кб Установка Подключаем к сайту jQuery (если он еще не подключен) путем добавления в секцию <head></head> следующей строки: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> Аналогичным образом подключаем скрипт (сразу после jQuery): <script type="text/javascript" src="ПУТЬ_ДО_СКРИПТА/socializ.js"></script> В шаблоне своего сайта ищем код, который выводит текст статьи, и прямо перед ним или сразу после него подключаем функцию скрипта: <script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script> Для пользователей WordPress эта строчка будет выглядеть так: <script type="text/javascript">socializ(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</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; } В вверху скрипта находим следующие строки и указываем нужные значения для вашего сайта: var m1 = 140; /* расстояние от начала страницы до плавающей панели */ var m2 = 20; /* расстояние от верха видимой области страницы до плавающей панели */ var f = 'http://site.ru/socializ/i/'; /* путь к папке с изображениями кнопок */ Работает кроссбраузерно (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.Вот и все. Надеюсь, вам понравится. Сама ссылка на статью.http://dimox.name/socializ-floating-panel/ Кто может что подсказать? спасибо за понимание. Цитата Ссылка на сообщение Поделиться на другие сайты
just_simao Опубликовано 20 декабря, 2013 Жалоба Поделиться Опубликовано 20 декабря, 2013 Может быть проблема в конфликте подключаемых скриптов, а скорее всего так и есть... Пишите в личку - помогу. Цитата Ссылка на сообщение Поделиться на другие сайты
Aleksey.g84 Опубликовано 21 декабря, 2013 Автор Жалоба Поделиться Опубликовано 21 декабря, 2013 Тема еще актуальна.... уважаемый just_simao не помог...попросил сделать все по инструкции и дать ему пароль от админки.... тоже мне первоклассника нашел) Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 21 декабря, 2013 Жалоба Поделиться Опубликовано 21 декабря, 2013 А вы хотите лечить по фотографии?Удачи! Цитата Ссылка на сообщение Поделиться на другие сайты
Aleksey.g84 Опубликовано 21 декабря, 2013 Автор Жалоба Поделиться Опубликовано 21 декабря, 2013 вопрос решил самостоятельно.....никаких конфликтов там не было.....уважаемый Kosjak76...можно и объяснить....потом чистить сайт от грязи...я не говорю что кто - то не добросовестный намусорит, но и вовсе может поменять пароли к админке) kors.... я не силен в этих сомволах, по этому и попросил помочь а решил я все так:в файле index.tplпосле 23 сточки вставил <script src="googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="design/2013_1/js/socializ.js" type="text/javascript"></script> и после 141 строчки это <script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script> дальше все сделал по инструкции...всем спасибо. Цитата Ссылка на сообщение Поделиться на другие сайты
ganson Опубликовано 21 декабря, 2013 Жалоба Поделиться Опубликовано 21 декабря, 2013 вопрос решил самостоятельно.....никаких конфликтов там не было.....уважаемый Kosjak76...можно и объяснить....потом чистить сайт от грязи...я не говорю что кто - то не добросовестный намусорит, но и вовсе может поменять пароли к админке) kors.... я не силен в этих сомволах, по этому и попросил помочь а решил я все так:в файле index.tplпосле 23 сточки вставил <script src="googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="design/2013_1/js/socializ.js" type="text/javascript"></script> и после 141 строчки это <script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script> дальше все сделал по инструкции...всем спасибо.Да ты не обижайся на этих, якобы профи. Здесь так принято - обосрать начинающих. Косяк был нормальным мужиком, пока не примерил себе корону модератора и не повалило бабло от продажи за $300 бесплатных решений, ну, а корс - это понятно всем без комментов Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 21 декабря, 2013 Жалоба Поделиться Опубликовано 21 декабря, 2013 Вау-вау, парниша, палехче! Когда это я продавал бесплатные решения, да еще и за 300 баксов?? Можно об этом поподробнее? Цитата Ссылка на сообщение Поделиться на другие сайты
Aleksey.g84 Опубликовано 21 декабря, 2013 Автор Жалоба Поделиться Опубликовано 21 декабря, 2013 Вау-вау, парниша, палехче!Когда это я продавал бесплатные решения, да еще и за 300 баксов??Можно об этом поподробнее? )))))) Началось..... человеку просто так писать ведь тоже нет смысла... был бы он таким был бы поэтом....видимо с чего - то пишет...есть на то причины, а по части я с ним немного соглашусь.... ведь когда - то я был заблокирован тобой....из - за личной переписки.... Цитата Ссылка на сообщение Поделиться на другие сайты
ganson Опубликовано 21 декабря, 2013 Жалоба Поделиться Опубликовано 21 декабря, 2013 Вау-вау, парниша, палехче!Когда это я продавал бесплатные решения, да еще и за 300 баксов??Можно об этом поподробнее?Вот крутяк. http://forum.simplacms.ru/topic/4659-22-%D0%BF%D0%B0%D0%BA%D0%B5%D1%82-%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B9/ есть пост с 150 долл с установкой. Раньше была цена $300 Отредактировал Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 21 декабря, 2013 Жалоба Поделиться Опубликовано 21 декабря, 2013 Что за бред? Какие 300 долл? Откуда ты это взял? 150 - это с установкой на рабочий магазин, с доработками и кастомным шаблоном. И продаю я СВОИ доработки, остальное собрано в пакет для удобства. Теперь по поводу переписки: Постов о покупке и продаже ВОРОВАННЫХ шаблонов я не допущу, удалял и буду удалять и блокировать. Цитата Ссылка на сообщение Поделиться на другие сайты
Aleksey.g84 Опубликовано 21 декабря, 2013 Автор Жалоба Поделиться Опубликовано 21 декабря, 2013 Что за бред? Какие 300 долл?Откуда ты это взял?150 - это с установкой на рабочий магазин, с доработками и кастомным шаблоном.И продаю я СВОИ доработки, остальное собрано в пакет для удобства.Теперь по поводу переписки:Постов о покупке и продаже ВОРОВАННЫХ шаблонов я не допущу, удалял и буду удалять и блокировать. ))))) опять началась какая - то тут война и опять люди не слышат друг друга..... по себе скажу...воровать я никого не просил этот шаблон, а просил такой же.... в итоге сам нашел, скачал и установил!хотелось бы добавить... шаблон гораздо чище дефалтовского!!! Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.