бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Ставим социальные кнопки на сайт
Ставим социальные кнопки на сайт
worldname Дата: Понедельник, 2012-01-23, 01:25 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
 Так как социальные сети набирают мощь своей популярности, то этим надо воспользоваться. Многие соц.сети располагают инструментами для работы с ними извне. Это всякие виджеты, приложения и конечно же кнопки.
Рассмотрим два способа вставки социальных кнопок "поделиться" на сайты системы uCoz

Способ первый и самый простой

Готовый блок "Поделиться" на сайт от Яндекса. Переходим по ссылке на страницу Яндекса и настраиваем будущий блок.
В колонке Набор сервисов ставим галочки на желаемые кнопки
В колонке Внешний вид блока выбираем способ отображения
Копируем готовый код и вставляем в шаблоны "Материала и комментария к нему" в любые интересующие нас модули.

Способ второй более красивый

Скрипт кнопок и социальных сетей от бесплатного сервиса share42. Переходим на сайт share42.com и приступаем к выбору интересующих нас кнопок
В списке нужно просто тыкнуть курсором в желаемые кнопки на вкладке Генератор. Так же не забываем выбрать размер иконок, по умолчанию стоят большие
Далее выбираем тип отображения. Рассмотрим на примере горизонтальной панели кнопок. Кодировка для сайтов системы uCoz обязательно должна быть utf-8
Скачиваем к себе на компьютер готовый код. Это будет папка с двумя файлами. Первый файл - это иконки ваших кнопок, а второй файл - это яваскрипт файл
Создаем в файловом менеджере папку, называем её например knopki, далее заливаем оба файла в эту папку

Далее настраиваем скрипты для работы на uCoz

Код
<script type="text/javascript" src="http://site.ru/knopki/sot.js"></script>
<script type="text/javascript">share42('http://site.ru/knopki/','[url]','[title]')</script>


Где хттп://site.ru/knopki/sot.js - это путь в яваскрипт файлу в вашем файловом менеджере, а хттп://site.ru/knopki/ - это путь к папке которую вы создали и в которую залили иконки и яваскрипт файл

Далее нам надо настроить эти пункты
Код
[url]','[title]
под систему юкоз и особенно под нормальную работу кнопок выбранных вами сервисов.
Вместо
Код
[url]
прописываем такую конструкцию
Код
http://название сайта.ucoz.ru$ENTRY_URL$
Для всех модулей кроме модуля Новости сайта и Блога!
Вместо
Код
[title]
прописываем
Код
$ENTRY_TITLE$


В случае замены
Код
[url]
обязательно ставьте адрес сайта без закрывающего слеша! Это принципиально для некоторых сервисов, и далее без пробела сразу ставьте $ENTRY_URL$, только так вы получите правильные адреса материала, который вы собираетесь расшарить с помощью ваших кнопок
Для модулей Новости сайта и блога прописываем такой код

Код
$ENTRY_URL$
то есть без адреса сайта

В итоге получаем готовый код для вставки в шаблон Материала и комментария к нему для всех модулей кроме Новостей и Блога

Код
<script type="text/javascript" src="http://site.ucoz.ru/knopki/sot.js"></script>
<script type="text/javascript">share42('http://site.ucoz.ru/knopki/','http//site.ucoz.ru$ENTRY_URL$','$ENTRY_TITLE$'</script>


Для модулей Новости сайта и Блог ставим такой код:

Код
<script type="text/javascript" src="http://site.ucoz.ru/knopki/sot.js"></script>
<script type="text/javascript">share42('http://site.ucoz.ru/knopki/','$ENTRY_URL$','$ENTRY_TITLE$'</script>


В итоге получаем такой вид на странице материала и комментария к нему

вид социальных кнопок


И на примере кнопочки контакта получаем результат и радуемся

окно вызова контакта с заполненной формой
Прикрепления: 6463882.jpg(7.4 Kb) · 2064568.jpg(33.2 Kb)
 
worldname Дата: Среда, 2012-05-16, 23:34 | Сообщение # 2
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
ВНИМАНИЕ! Изменился код вставки кнопок от share42


На странице выбираете размеры (32х32, 24х24, 16х16) а потом нужные кнопки
Тип вставки - горизонтальный (рассматриваем простой способ вставки горизонтальной панельки с кнопками)
Кодировка сайта UTF-8 (для сайтов в системе uCoz обязательно чтобы было UTF-8)
Язык подсказок - русский
Добавить иконку шары - снимаем галочку
К вашему сайту подключен jQuery: - ставим галочку, так как на uCoz подключен jQuery по умолчанию (без разницы какая версия используется у вас на сайте)
Далее после всех настроек и выбора кнопок скачиваем к себе на компьютер папку с готовым скриптом и картинкой кнопочек и распаковываем архив
В файловом менеджере создаем папку с именем share42 и закачиваем туда скрипт и картинку. Или подключаемся по FTP и заливаем скачанную папку вместе с содержимым

Установка кода


В инструкции по установке на share42 пункт 4 Выберите наиболее подходящий тип сайта: выбираете пункт Прочие CMS

Получаете шаблон кода

Код
<div class="share42init" data-url="[url]" data-title="[title]"></div>
<script type="text/javascript" src="http://site.ru/share42/share42.js"></script>
<script type="text/javascript">share42('http://site.ru/share42/')</script>


Далее как и в старом методе установки [url]для всех модулей меняете на http://site.ucoz.ru$ENTRY_URL$ , а [title]изменяете на $ENTRY_TITLE$
Для модуля блог и новости сайта меняете на $ENTRY_URL$, а [title]изменяете на $ENTRY_TITLE$
site.ru изменяете на адрес своего сайта

Внимание! Класс class="share42init" является обязательным в коде. Имя нельзя класса изменять и при его отсутствии код не будет работать!

Ставить кнопки лучше всего в шаблон материала и комментария к нему в любое место, где желаете видеть блок с кнопками

По желанию можете оформить стилями блок с кнопками как указано в инструкции. Вот этот код
Код
#share42 {
    display: inline-block;
    padding: 6px 0 0 6px;
    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) в любое место. можно в самое начало или в самый конец. Стили придадут блоку эффект прозрачности, который будет пропадать при наведении

В итоге вы получите вот такой блок



Пример работы кнопки Контакта



Примечание: ВКонтакте предоставляет возможность вставить изображение в блок со ссылкой и описанием. Смотрите внимательно, там есть управление картинками: Предыдущее - Следующее. Вы можете выбрать любую из 10 обнаруженной формой Контакта картинок на странице. Если в материале нет картинок, то самой первой он может показать шапку вашего сайта (то есть самую верхнюю картинку в коде). На сайтах с не отключенным рекламным баннером системы, форма Контакта может выводить картинки
[/url]
В этом случае стоит отлистать дальше и выбрать подходящую
Прикрепления: 4825825.gif(11.6 Kb) · 0794528.gif(20.2 Kb)
 
webanet Дата: Среда, 2013-02-13, 17:21 | Сообщение # 3
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Внимание! Код, генерируемый share42 ещё упростился


Теперь генерируемый сервисом код выглядит так

Код
<div class="share42init" data-url="[url]" data-title="[title]"></div>
<script type="text/javascript" src="http://site.name/share42/share42.js"></script>


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

Если ваш сайт состоит из созданных вами страниц и вы не используете модули, то код вставки социальных кнопок в шаблоны страницы сайта или на страницы с индивидуальными шаблонами будет таким

Код
<div class="share42init" data-url="http://адрес вашего сайта$REQUEST_URI$" data-title="$MODULE_NAME$"></div>
<script type="text/javascript" src="http://адрес вашего сайта/share42/share42.js"></script>


Не забудьте изменить фразу Адрес вашего сайта на реальный адрес начиная с http
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Ставим социальные кнопки на сайт
  • Страница 1 из 1
  • 1
Поиск: