16.04.2013

Как вставить кнопки социальных сетей на сайт

Без кнопочек "Поделиться" ссылкой в социальных сетях не обходится ни один приличный сайт. А как их вставить на свой сайт? Попробуем разобрать несколько самых легких вариантов.

 

Кнопки социальных сетей от Яндекса 

Самый простой и в большинстве случаев самый правильный выбор - это воспользоваться сервисом Яндекса.

Переходим вот по этой ссылочке   http://api.yandex.ru/share/ и попадаем на такую страницу (картинка кликабельна, по щелчку увеличивается):

Как вставить кнопки социальных сетей на сайт

В столбике, обозначенном стрелкой 1 ставим галочки возле тех иконок, которые хотим добавить на сайт. Чаще всего это Одноклассники, ВКонтакте, МойМир, Я.Ру, ну и всякие фейсбуки и твиттеры, кому что нравиться.

Стрелкой под номером 2 обозначены варианты вывода уже выбранных кнопок, то есть, будут ли они выводится со списком, с кнопкой "поделиться" или это будет просто набор иконок.

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

То есть в итоге должно получиться как на вот этой картинке

 

Блок

Куда вставлять код зависит от того, на каком движке создан ваш сайт. Немного ниже разберем этот вопрос как для сайта на Вордпресс, так и для сайта на DLE.

Посмотреть сразу куда вставлять код.

 

Кнопки социальных сетей от share42.com

Кнопки от Яндекса имеют один небольшой недостаток - они устанавливаются "как есть", то есть изменить размер или рисунок на кнопках нельзя.

А вот, например, на этом сайте кнопки, по моему мнению, гораздо приятнее яндексовских. И скрипт для них получен на сайте share42.com.

Этот сервис http://share42.com дает гораздо большую свободу для выбора вариантов вида кнопок

Итак, заходим на сайт и видим огромный выбор социальных сетей, социальных закладок, сервисов и так далее: 

Как вставить кнопки социальных сетей на сайт

Можно выбрать один из трех предложенных размеров, порядок кнопок тоже можно поменять, просто перетаскивая их мышью.

Затем выбираем тип панели - вертикальная или горизонтальная. Указываем кодировку сайта.

Как вставить кнопки социальных сетей на сайт

Если не знаете, какая кодировка у вас на сайте, просто просмотрите код страницы в любом браузере (щелкаем правой кнопкой мыши прямо на странице, выбираем пункт "просмотр кода страницы" - для chrome, "просмотр HTML-кода" - для explorer, "исходный код" - для opera ) и вначале текста ищем такую строчку:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

или такую:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

И выбираем соответственно нужную кодировку.

После того, когда вы выбрали все, что надо, нажимаете на кнопку "скачать скрипт" и получаете готовый скрипт для вашего сайта. Остается его установить на вашем сайте.

Не уходя с сайта share42, выполните следующие действия:

1. Распакуйте папку со скриптом. Она по умолчанию имеет имя share42.

2. Загрузите папку share42 на ваш сайт по FTP или через панель управления хостингом (при желании папку можно переименовать).

3. На сайте share42 выберите подходящий тип сайта, то есть укажите на каком движке ваш сайт. Для WordPress и Drupal есть специальные кнопки, если сайт на DLE нужно выбрать пункт "Прочие CMS".

Для вертикально расположенных кнопок код будет такой.

Код для WordPress:

<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src="http://site.name/share42/share42.js"></script>

Код для DLE:

<div class="share42init" data-url="[url]" data-title="[title]" data-top1="150" data-top2="20" data-margin="0"
<script type="text/javascript" src="http://site.name/share42/share42.js"></script>

Обратите внимание на текст, выделенный красным цветом.

Вместо site.name вставляем название сайта.

Для сайта на DLE заменяем [url] на {full-link} и [title] на Как вставить кнопки социальных сетей на сайт.

То есть должно получиться так:

<div class="share42init" data-url="{full-link}" data-title="Как вставить кнопки социальных сетей на сайт" data-top1="150" data-top2="20" data-margin="0"></div>
<script type="text/javascript" src="http://site.name/share42/share42.js"></script>

Изменяем значение следующих атрибутов:

data-top1="150" data-top2="20" data-margin="0"

data-top1 - расстояние от начала страницы до панели, в пикселях;

data-top2 - расстояние от верха видимой области страницы до панели, в пикселях;

data-margin - смещение панели по горизонтали, в пикселях (отрицательно значение - влево, положительное значение - вправо).

Дополнительно можно скопировать и вставить  в файл стилей вашего сайта (файл с расширением .css) дополнительные стили для кнопок.


Вставка кода в шаблон сайта

У кнопок от Яндекса расположение горизонтальное. Значит ищем описание куда вставлять горизонтальные кнопки.

Для сайта на DLE:

Если использовать горизонтальные кнопки, ищем в шаблоне файл fullstory.tpl (путь - site.name/templates/имя-шаблона/fullstory.tpl).

После полной новости {full-story} вставляем код социальных кнопок.

Если использовать вертикальные кнопки, можно код вставить в файл main.tpl прямо перед закрывающим тегом </body>

Для сайта на WordPress:

Если использовать вертикальные кнопки, полученный код вставляем в файл footer.php перед закрывающим тегом </body>.

Если использовать горизонтальный блок кнопок, то рекомендую вставить скрипт в файл single.php в любое место, где хотите увидеть соц. кнопочки.