Кнопки социальных сетей на Ucoz - Кнопки - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Кнопки


Кнопки социальных сетей уже давно стали неотъемлемой частью любого сайта. К ним относятся и Ucoz сайты. Простой скрипт позволяет сказать спасибо автору сайта просто разместив на него ссылку, тем самым позвав еще людей на сайт.

Добавить на сайт кнопки поделиться довольно легко.

Как включить соц бар от Ucoz

Соц бар – нововведение от Ucoz, которое должно помочь вебмастерам в установке кода кнопок социальных сетей.


Внешний вид социальной панели с кнопками

Включить его довольно просто: зайдите в админ панель, а там откройте меню Настройки > Соц Бар



После этого в настройках смените в выпадающем меню с выключен на включен.



Далее можете редактировать настройки по своему усмотрению, к примеру выбрать более подходящий цвет. И настроить какие кнопки будут добавлены на сайт.

Как добавить кнопки на сайт

Для начала Вы должны определиться с местом размещения кнопок. Лучше всего размещать вначале или конце записи.

Чтобы вставить нужный код в шаблон зайдите в админ панель, во вкладку “Управление дизайном”, чтобы выбрать нужную часть кода. Не забудьте сделать резервную копию шаблона (вкладка справа сверху).

Прямое добавление

Можно просто добавить все кнопки на сайт по отдельности.

Для Вас мы собрали кнопки Google+, Вконтакте, Facebook, Твиттер и mail.ru кнпоки.

В место, где будут кнопки устанавливаете код:

Код
<table class="sharebut">
<tr>
<td>
<g:plusone></g:plusone>
</td>
<td>
<div id="vk-like"></div>
</td>
   
<td class="sharebut">
<fb:like href="" layout="button_count" show_faces="false" width="130" font="arial"></fb:like>
</td>
   
   
<td>
<a rel="nofollow" target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'width' : '150'}">Нравится</a>
</td>
   
<td>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="sytru5" data-lang="ru">Твитнуть</a>
</td>
   
</tr>
</table>


В подвал сайта (Нижняя часть сайта в шаблоне)

Код
<script src="http://vk.com/js/api/share.js?11" charset="windows-1251"></script>
<script>document.getElementById('vk-like').innerHTML = VK.Share.button(false,{type: "button", text: "Нравится"});</script>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
<script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>


Готово, теперь на сайте установлены кнопки из социальных сетей.

Добавление скрипта социальных кнопок

Если же Вы хотите добавить все кнопки за раз, идеальным решением будут сервисы предоставляющие скрипты совмещенные в одном месте. Мы рассмотрим два сервиса добавления кнопок – pluso и сервис от Yandex.

Скрипт социальных кнопок Яндекс для ucoz


Внешний вид скрипта Яндекс

Ничего не скажешь, разработчики Yandex постарались и подарили нам отличный инструмент социальных кнопок для сайта. Тут есть и счетчик и в чем огромный плюс – грузится только один скрипт, хоть и выбраны несколько социальных сетей.

Код можно посмотреть и взять на сайте Яндекса тут или же забрать отсюда:

Код
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru"
  data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"

></div>


Скрипт установки социальных кнопок Pluso для ucoz

Аналогично сервису яндекса в интернете есть и множество других. Вот к примеру Pluso, который имеет более широкий набор кнопок, чем ya share и встроенный счетчик, который выдает сумму всех “поделиться” социальных сетей.


Внешний вид кнопок pluso

Скрипт установки с настройкой всех параметров также расположен у них на сайте. Мы добавили сюда код самого простого скрипта, в котором установлены почти все популярные социалки:

Код
<script type="text/javascript">(function() {
  if (window.pluso)if (typeof window.pluso.start == "function") return;
  if (window.ifpluso==undefined) { window.ifpluso = 1;
  var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
  s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
  s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
  var h=d[g]('body')[0];
  h.appendChild(s);
  }})();</script>
<div class="pluso" data-background="#ebebeb" data-options="big,square,line,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div>


На этом всё друзья, остались вопросы? Пишите их в комментариях к записи!

Важно!

При копировании материала указывать ссылку на источник.

- 871
- 09-Февраля-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта