Веб-мастеру

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Веб-мастеру » Подробный FAQ по uCoz » Скрипт кнопок социальных закладок и сетей

Скрипт кнопок социальных закладок и сетей

Страница: 1

Сообщений 1 страница 18 из 18

1

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

https://forumupload.ru/uploads/0007/af/57/14256-5.gif
Многие участники пишут мне в ЛС (Личные Сообщения) с просьбой выложить скрипт "плавающая панель", расположенная в правой части нашего форума, для добавления в социальные закладки. На самом деле речь пойдет не столько о скрипте, сколько о сервисе-генераторе, предоставляющий нам самим собрать для своего сайта подобную панель и его установке на сайт.
Представляю Вашему вниманию этот замечательный сервис: http://share42.com

Теперь приступим к установке.
На сайте уже выложена вся подробная документация и описания последовательности шагов, однако, когда я даю этот адрес, вскоре, через некоторое время, мне в ЛС снова пишут: "А как его установить? Я сделал вроде все правильно, а он все равно не работает..." и "Я скачал архив и что делать дальше? Я его залил на сайт, прописал, но он что-то не пашет..."
Из-за этого мне и пришлось написать данную тему, чтобы постоянно не отвечать всем в ЛС об установке и настройке скрипта.

Итак, начнем с генератора:
1. На первом этапе мы можем выбрать нужный нам размер иконок (всего три типа: 16x16, 24x24, 32x32), сами сервисы, в которые пользователи будут добавлять Ваш сайт и их расположение на панеле.
На этом этапе многие выбирают больший размер (32x32), из-за чего в дальнейшем у них происходят проблемы с отображением. Если Вы планируете выбрать все сервисы, то размер 32x32 Вам сразу не подойдет. Почему? Дело в том, что если у Вас разрешение монитора большое и вмещает их все, то это не значит, что у кого-нибудь другого они будут отображаться так же. И это сточит учитывать, поскольку желаемый сервис, в который бы пользователь хотел добавить Ваш сайт, он просто на просто не сможет найти, соответственно, это пойдет Вам в убыток, за счет которого, пользователь мог бы привести Вам на сайт новых посетителей.
Расположение иконок делать, желательно, по популярности сервисоа в Вашем регионе или Вашего сайта. Чем популярнее ресурс, тем иконку сервиса ставить выше. К примеру, Вы ведете свой твиттер (Twetter), и, конечно же, лучше всего чтобы пользователи порекомендовали его другим пользователям.
Из этого делаем следующий вывод: Не злоупотребляйте размерами и количеством сервисов. Скрипт может некорректно отобразиться на мониторах Ваших посетителей. И популярные сервисы были всегда на виду.

2. На втором шаге все намного проще. выбираем тип отображения панели: вертикальной или горизонтально. Выбираем так же кодировку Вашего сайта. Если у Вас русскоязычный сайт, и на нем основной контингент пользователей говорят на русском, то желательно выбрать кодировку Windows-1251 (ANSI), однако большинство сайтов сейчас переходит на кодировку UTF-8 (подробнее об этом читайте в интернете).
Так же по желанию Вы можете добавить иконку данного сервиса. Я считаю что это стоит сделать, таким образом Вы отблагодарите автора скрипта. Я не добавил иконку потому как пишу в настоящий момент эту статью =) да и тогда не было такой функции, а изменять что-либо в коде мне уже не охото...

3. На третьем шагу, я надеюсь, у Вас вопросов не возникнет. Просто тыкаем и скачиваем архив либо смотрим на наше творение.

4. Четвертый шаг является самым важным. Для начала переходим на сайте на страницу "Установка" и выполняем первые два шага, описанные там. Кстати, на втором шаге, при загрузке на сайт советую использовать программу Filezilla. Скачать программу можете здесь.
на третьем шаге в поле пишем полный адрес своего сайта, включая http:// и папку /share42/ обязательно поставьте слеш (/ - вертикальная наклоненная черта) на конце пути к папке, пример: http://site.ru/share42/
На четвертом шаге лучше всего выбрать пункт "Статический сайт без поддержки PHP". Для более опытных подойдет последний вариант "Прочие CMS". В коде замените [url]на адрес Вашего сайта (http://site.ru/) и [title] на $TITLE$ (при использовании Конструктора шаблонов [TITLE]).
Наш код примет такой вид:

Код:
<script type="text/javascript" src="http://site.ru/share42/share42.js"></script>
<script type="text/javascript">share42('http://site.ru/','http://site.ru','$TITLE$')</script>

После чего копируем выданный код и вставляем его по месту на своем сайте, например после <body>

Готово. На этом моя статья завершается. Благодарю за внимание!

+2

2

  • Автор: papas_tm_serjik
  • Журналист
  • papas_tm_serjik
  • Сообщений: 638
  • Уважение: +32

Admin
У меня не получается напишы в личку свою асю) или скайп.

0

3

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

papas_tm_serjik, очень редко когда захожу, обычно не сижу ни в том, ни в другом) К тому же форум для того и создан, чтобы все вопросы задавились на нем, а не только "спс", "кул шаб" и прочую ерунду писали http://www.kolobok.us/smiles/icq/biggrin.gif Так получится, что я помогу только Вам, а если у кого еще подобные вопросы будут, вот и будут все писать в асю и скайп, тогда никакой форум не нужен)

+1

4

  • Автор: papas_tm_serjik
  • Журналист
  • papas_tm_serjik
  • Сообщений: 638
  • Уважение: +32

1 что я делаю выбрал 24х24
2 вертикальная
   utf-8
   русский
   добавить иконку share42 я убрал
3 Скачал скрипт ))
4 зашол на вкладку установка
  Дальше иду по инструкцыи
Захожу в файл менеджер создаю папку share42 и туда из папки 2 файла   заливаю
Потом опять захожу на сайт share42.com вкладка установка в поле пишу --------_http://53.ucoz.ru/share42/
         Выберите наиболее подходящий тип сайта:
          Статический сайт без поддержки PHP
Вставьте в шаблон вашего сайта (обычно рядом с текстом статьи) следующий код:

Код:
<script type="text/javascript" src="share42.js"></script>
<script type="text/javascript">share42('','','',150,20)</script>

Добавьте в файл стилей вашего сайта (файл с расширением .css) следующие стили:

Код:
 #share42 {
  position: fixed;
  z-index: 1000;
  margin-left: -70px; /* смещение панели влево от края контента */
  padding: 6px 6px 0;
  background: #FFF;
  border: 1px solid #E9E9E9;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
* html #share42 {display: none}
#share42:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  -webkit-box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
#share42 img {margin: 0 !important; padding: 0 !important; border: none !important;}

И еще вопрос: если я напишу смещение панели впараво от края контента
То он будет с права ?

Добавлено:
Это мой шаблон куда тут вставлять ?

0

5

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

papas_tm_serjik, пожалуйста, используйте BBcode для форматирования текста в приятный к чтению вид.

papas_tm_serjik написал(а):

Вставьте в шаблон вашего сайта (обычно рядом с текстом статьи) следующий код:

Код:
<script type="text/javascript" src="share42.js"></script>
<script type="text/javascript">share42('','','',150,20)</script>

Надо код вставлять который дан на странице "Установка скрипта:", вы не указали в третьем пункте адрес своего сайта, вот и получился такой нерабочий код.

papas_tm_serjik написал(а):

Это мой шаблон куда тут вставлять ?

Код вставлять после

Код:
<body ...

Троеточие означает, что после <body может быть еще код.

papas_tm_serjik написал(а):

И еще вопрос: если я напишу смещение панели впараво от края контента
То он будет с права ?

Да. Все зависит от того, какое Вы поставите значение.

0

6

  • Автор: papas_tm_serjik
  • Журналист
  • papas_tm_serjik
  • Сообщений: 638
  • Уважение: +32

Admin

Я обязательна нада через прогу загружать ?
Или проста можна сразу через файловый менеджер ?

0

7

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

papas_tm_serjik, необязательно, но рекомендуемо https://forumupload.ru/uploads/0007/af/57/16341-1.gif Если нет времени и желания загружать каждую иконку вручную, используем программу для быстрой загрузки https://forumupload.ru/uploads/0007/af/57/16361-4.gif

0

8

  • Автор: dias68
  • Новенький
  • Сообщений: 3
  • Уважение: +0

Привет.
Делаю все,как и написано,НО в IE9 не работает, а в других браузерах вроде все нормально...может я вставляю код не туда?
Вот у Вас все четко работает,пожалуйста скажите,куда именно нужно вставить этот код...я хочу что-бы эти кнопки были на главной странице...и вот что я делаю:захожу в ПУ,управление дизайном,Редактор страниц,страницы сайта и там незнаю,куда именно вставить код...вообщем у меня не получается..
просьба объяснить по пунктам...
Спасибо

0

9

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

dias68, IE - это такой противный браузер, не зависимо от версии, под который многое приходится переписывать индивидуально для него. Поэтому советую не зацикливаться на этом браузере.

dias68 написал(а):

куда именно вставить код

Admin написал(а):

После чего копируем выданный код и вставляем его по месту на своем сайте, например после <body>

0

10

  • Автор: dias68
  • Новенький
  • Сообщений: 3
  • Уважение: +0
Admin написал(а):

dias68, IE - это такой противный браузер, не зависимо от версии, под который многое приходится переписывать индивидуально для него. Поэтому советую не зацикливаться на этом браузере.

согласен с вами...ужасный браузер..
но в данный момент я смотрю вашу страницу в IE9  и ваша панель прекрасно работает в этом браузере...

0

11

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

dias68, попробуйте вставить перед закрывающим тегом </body>

0

12

  • Автор: dias68
  • Новенький
  • Сообщений: 3
  • Уважение: +0
Admin написал(а):

dias68, попробуйте вставить перед закрывающим тегом </body>

ладно, ничего не получается...
В любом случае,спасибо за оперативные ответы и внимание...

0

13

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

dias68, отправьте мне свой сайт в ЛС. Может быть не все потеряно и не все так плохо https://forumupload.ru/uploads/0007/af/57/16341-1.gif

0

14

  • Автор: papas_tm_serjik
  • Журналист
  • papas_tm_serjik
  • Сообщений: 638
  • Уважение: +32

Установка скрипта:
1.Распакуйте архив со скриптом.
2.Загрузите папку "share42" на ваш сайт по FTP (при желании папку можно переименовать).
3.Укажите путь до этой папки:http://papas.clan.su/share42/, например, http://site.ru/share42/.
4.Выберите наиболее подходящий тип сайта:
  Статический сайт без поддержки PHP
5.Вставьте в шаблон вашего сайта (до или после основного текста статьи) следующий код:

Код:
<script type="text/javascript" src="http://papas.clan.su/share42/share42.js"></script>
<script type="text/javascript">share42('http://papas.clan.su/share42/','','',150,20)</script>

Я вставил в страница сайта после  <body>:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
 <head>
 <title>$SITE_NAME$ - $MODULE_NAME$</title>
<link rel="shortcut icon" href="/images/favicon.ico" />
<link media="screen" href="/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="/js/libs.js"></script>
 </head>
 <body>
 <script type="text/javascript" src="http://papas.clan.su/share42/share42.js"></script>
<script type="text/javascript">share42('http://papas.clan.su/share42/','','',150,20)</script>
 <div id="panel">
 <div class="inner">
 <div class="search">
 <form action="" name="searchform" method="post">
 <input type="hidden" name="do" value="search" />
 <input type="hidden" name="subaction" value="search" />
 <input id="story" name="story" value="Искать..." onblur="if(this.value=='') this.value='Искать...';" onfocus="if(this.value=='Искать...') this.value='';" type="text" />
 <input class="button" type="submit" value="" />
 </form>
 </div>
 
 
<?if($USER_LOGGED_IN$)?>


<div class="login">
 <ul>
 <li><a href="/news/0-0-0-0-1">Добавить новость</a></li>
 <li class="message"><a href="/index/14"><b>$UNREAD_PM$</b></a> <a href="/index/14">Сообщений</a></li>
 <li class="user"><a href="/index/8">Аккаунт</a>
 <ul>
 
 <li><a href="$PROFILE_URL$">Мой профиль</a></li>

 <li><a href="URL">Ссылка</a></li>
 <li><a href="URL">Ссылка</a></li>
 <li><a href="URL">Ссылка</a></li>
 </ul>
 </li>
 </ul>
 <a class="out" href="$LOGOUT_LINK$" title="Выйти"></a>
</div>
<?else?>


<div class="login">
 <form method="post" action="">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><img src="/images/login-text.png" alt="" /></td>
 <td><input type="text" name="suser" id="login_name" /></td>
 <td><input type="password" name="pasword" id="login_password" /></td>
 <td><input name="sbm" type="submit" class="button" value="Войти"/></td>
 <td><a class="register" href="/index/3"></a></td>
 </tr>
 </table>
 <input name="" type="hidden" id="login" value="submit" />
 </form>
</div>



<?endif?>


$GLOBAL_MENUCENTR$
 
 
$GLOBAL_MENULEFT$
 
 </div>
 
 <div id="content">
 
 
 <div id="info">
 $GLOBAL_VAJNO$
 </div>
 
 <div id='dle-content'>
 <!-- <body> -->$CONTENT$<!-- </body> -->
 </div>
$GLOBAL_REKLAMACTR$
 
 
$GLOBAL_MENURIGHT$
 
 <div id="footer"><div id="copy">&copy;2006 - $YEAR$ $POWERED_BY$ | <a href="http://top-video.ucoz.ru/forum/5">Скрипты для Ucoz</a></div>
 
 </div>
 </div>
 </div>
 </div>
 </div>
<script language="javascript" src="http://papas.clan.su/wb-rotator10.in"></script>
 </body>
</html>

6.Добавьте в файл стилей вашего сайта (файл с расширением .css) следующие стили:
Я это вставил в самый низ ксс:

Код:
#share42 {
  position: fixed;
  z-index: 1000;
  margin-left: -70px; /* смещение панели влево от края контента */
}

Для оформления панели можно также добавить следующие стили (не обязательно):
Этот код я не куда не вставлял

Код:
#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}

Что тут не правильна я не понимаю  https://forumupload.ru/uploads/0007/af/57/16341-2.gif
Я файлы загрузил на сайт через Filezilla

0

15

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

Да вроде все правильно... Прочем, это не так важно, важна суть - работает или нет? В исходном коде твоего сайта кода я так и не обнауржил

0

16

  • Автор: papas_tm_serjik
  • Журналист
  • papas_tm_serjik
  • Сообщений: 638
  • Уважение: +32

Я его уже удалил он мне сайт весь перекасил.Js файлы сразуже отключаются как я этот код вставил  https://forumupload.ru/uploads/0007/af/57/16341-3.gif
Может их скрипт с моим шаблоном конфликтует ?

+1

17

  • Автор: ALeX_tyt_9
  • Участник
  • Сообщений: 9
  • Уважение: +0

Блин у меня тоже не получается  https://forumupload.ru/uploads/0007/af/57/16341-2.gif

0

18

  • Автор: Артем
  • Администратор
  • Артем
  • Сообщений: 5084
  • Уважение: +358

papas_tm_serjik, навряд ли. Замечал этот скрипт уже на многих популярных ресурсах, построенных на uCoz.
ALeX_tyt_9, мы не телепаты и мысли читать не умеем https://forumupload.ru/uploads/0007/af/57/16415-1.gif Конкретно говорите что у вас не получается

0

Страница: 1

Вы здесь » Веб-мастеру » Подробный FAQ по uCoz » Скрипт кнопок социальных закладок и сетей