Главная » Создание сайта » Раскрутка сайта » Установка кнопок социальных закладок на сайт uCoz

Установка кнопок социальных закладок на сайт uCoz

30.01.2012 в 11:40
Автор: greenkas     

Я думаю, каждый пользователь интернета хоть раз видел на некоторых сайтах кнопки социальных сетей «Вконтакте», «Мой Мир», «Я.Ру», «Одноклассники» и другие. Эти кнопки называются – социальные закладки. В этом уроке я расскажу, как поставить социальные закладки к себе на сайт.
Для начала нужно получить код для вставки этих закладок:
1. Идем на Yandex

2. Выбираем те сервисы, кнопки которых будут на Вашем сайте (1).
3. Выбираем внешний вид блока (2).
4. В рамке под номером 3 появится код, который мы и будем встраивать на сайт. Копируем сначала верхнюю часть кода:
Code
<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script>

5. Переходим в Панель управления -> Дизайн -> Управление дизайном (шаблоны)

6. Здесь переходим в тот раздел, в который Вы будете встраивать социальные закладки. Я встраивал в модуль «Статьи». Поэтому выбрал пункт «Вид материала и комментариев к нему»
7. Вставляем код
Code
<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script>
между тегами
Code
<head>
и
Code
</head>


8. Теперь копируем нижнюю часть кода с Яндекса. У меня она выглядит так:
Code
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>

9. Ищем место для наших кнопок. Я разместил их под кнопкой рейтинга в статьях:

10. Для этого нужно немножко поменять код дизайна блока:
Code
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock">
<tr><td class="eText" colspan="3">$MESSAGE$ <?if($SOURCE$)?><br /><br /><!--<s5174>-->Источник<!--</s>-->: <a href="javascript://" rel="nofollow" onclick="window.open('$SOURCE$');return false;">$SOURCE$</a><?endif?></td></tr>
<tr><td class="eDetails1" colspan="3"><?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?><!--<s3179>-->Категория<!--</s>-->: <a href="$CAT_URL$">$CAT_NAME$</a> | <!--<s3178>-->Добавил<!--</s>-->: <a href="$PROFILE_URL$">$USER$</a> ($ADD_DATE$)  
<?if($AUTHOR_NAME$)?> | <!--<s5173>-->Автор<!--</s>-->: <u>$AUTHOR_NAME$</u><?endif?>  
</td></tr>
<tr><td class="eDetails2" colspan="2"><!--<s3177>-->Просмотров<!--</s>-->: <b>$READS$</b> <?if($COMMENTS_NUM$)?>| <!--<s3039>-->Комментарии<!--</s>-->: <b>$COMMENTS_NUM$</b><?endif?>
<?if($TAGS$)?> | <!--<s5308>-->Теги<!--</s>-->: $TAGS$<?endif?>
  <?if($RATING$)?>| <!--<s3119>-->Рейтинг<!--</s>-->: <b><span id="entRating$ID$">$RATING$</span></b>/<b><span id="entRated$ID$">$RATED$</span></b><?endif?></td><td width="140px" class="eDetails2"><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div></td></tr>
</table>

Т.е., здесь я добавил еще одну ячейку в таблицу:
Code
<td width="140px" class="eDetails2"><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div></td>
и разместил в ней код социальных закладок.

Теперь заходим на страницу любой статьи и любуемся результатом! smile

социальные кнопки, Закладки, социальные закладки


Рейтинг: 23  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 18892          Комментариев: 11

Похожие инструкции

11.08.2013 в 06:12      0  

Сделал немного по своему, но все равно спасибо за инструкцию smile
07.04.2013 в 02:48      0  

Подскажите пожалуйста, как сделать чтоб такие закладки были под каждым сообщением на форуме. Если я вставляю код в "Общий вид страниц форума", то кнопки появляются только вверху каждой страницы. А надо, чтобы любое из сообщений можно было транслировать в социальную сеть.
07.04.2013 в 09:09      +1  

Соответствующий код Вы можете установить в шаблоне дизайна Вашего сайта: Панель управления → Управление дизайном → Форум: Вид материалов. Вами указанное пожелание не имеет как такового логичного решения, поскольку вне зависимости от присутствия кнопки соц. закладок в каждом сообщении пользователей в модуле "Форум" или в целом на странице темы – ссылка на страницу темы при передачи в соц. сети будет передана единственная.
07.04.2013 в 10:43      0  

Т.е. транслировать отдельное сообщение в соц.сеть нельзя? Я правильно поняла, только всю страницу?
07.04.2013 в 12:11      0  

Производя установку кнопок соц. сетей в отдельности, Вы можете попробовать регулировать значения, на примере виджета от "ВКонтакте":
Цитата
VK.Widgets.Like('vk_like', {width: 500, pageTitle: 'Article no. 321', pageDescription: 'Article no. 321 description'}, 321);

Также, Вы можете задействовать "pageUrl" – где необходимо указывать системную переменную: "$NUMBER$" (также, потребуется задействовав функцию "substr" – для получения точного адреса на страницу с ответом пользователя).

Документация: https://vk.com/pages.p....+Widget
25.03.2013 в 13:35      0  

Инструкция просто СУПЕР!!!!!!!!!!!!!!!! с первого раза все получилось!!! при чем поставила на все странички сайта!!!!! Огромное вам спасибо!!!!!!!!!! up

Маришка)))

Спам
02.02.2012 в 15:38      0  

До 8 пункта все понятно, а дальше не понятно куда вставлять скопированное?
03.02.2012 в 08:48      0  

"Я встраивал в модуль «Статьи». Поэтому выбрал пункт «Вид материала и комментариев к нему» " Вот там и ищем табличку, в которой идет отображение Категории, рефтинга статьи...
22.09.2012 в 11:50      0  

найди код похожий на:
<tr>
<td class="eDetails2" colspan="2">
<!--<s3177>-->Просмотров<!--</s>-->: <b>$READS$</b> <?if($COMMENTS_NUM$)?>| <!--<s3039>-->Комментарии<!--</s>-->: <b>$COMMENTS_NUM$</b><?endif?>
<?if($TAGS$)?> | <!--<s5308>-->Теги<!--</s>-->: $TAGS$<?endif?>
<?if($RATING$)?>| <!--<s3119>-->Рейтинг<!--</s>-->: <b><span id="entRating$ID$">$RATING$</span></b>/<b><span id="entRated$ID$">$RATED$</span></b><?endif?>
</td>
</tr>
и вставь перед тегом </tr> это: <td width="140px" class="eDetails2"><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div></td>
-------------
в принципе это можно вставить и на новой строке таблицы:
после </tr> в вышеуказанном коде просто вставьте <tr><td width="140px" class="eDetails2"><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div></td></tr>
только там допишите по необходимости colspan=""
01.02.2012 в 04:55      +1  

Хорошая инструкция, от меня +!
Способ, конечно, сложный, соцзакладки можно вставить намного проще, есть готовый юкозовский виджет с ними, но знать все варианты всегда пригодится smile
22.09.2012 в 11:56      0  

я обычно подгоняю соцшару под каждый сайт.. т.е. каждую кнопку в css и а в html уже подписываю линками на шару и классом кнопки =)
например: <a class="vk" href="share"></a>, где:
vk - css class : .vk {background: url(vk.png) no-repeat;} + можно прикрутить :hover
share - ссылка шары ну это можно узнать у соцсети в которую будем расшаривать..