Всем привет! Сегодня речь пойдет о пяти самых интересных сервисах, на которых просто и быстро можно выбрать внешний вид социальных кнопок для сайта и получить соответствующий код.
«Поделиться» от Яндекс
У Яндекса есть очень простой и удобный инструмент под названием «Поделиться», в котором можно сгенерировать код для добавления на сайт социальных кнопок самых популярных соц сетей и сервисов рунета:
- Вконтакте;
- Facebook;
- Twitter;
- Одноклассники;
- МойМир;
- Livejournal;
- Friendfeed;
- Мой круг;
- Google+.
Переходите на .
Галочками отметьте нужные пункты и выберете внешний вид блока. Код генерируется автоматически.
Google +1
Google +1 позволяет пользователям проголосовать за страницу вашего портала и рассказать о ней своим друзьям в социальной сети Google+. Чем больше голосов она соберет, тем лучше к ней будет относится Google, поэтому старайтесь выбирать размер для нее по-больше и располагать на видном месте.
Перейдите на .
Настройте размер и внешний вид кнопки, выберете русский язык. Расширенные настройки вам вряд ли пригодятся. Как видите, получит социальные кнопки от Яндекс и Google очень легко и быстро. Буквально два клика мыши, и все готово!
AddThis
AddThis.com предлагает разместить оранжевую кнопку Share (или оранжевый +), содержащую огромное количество всевозможных социальных сетей, закладок и сервисов. Самые популярные социалки можно вынести из общего списка и поместить отдельно рядом с Share. Помимо этого, сервис предлагает аналитику и статистику по активности читателей. Для доступа к ней на addthis.com следует зарегистрироваться.
Переходите на и выбирайте внешний вид панели:
Код генерируется автоматически в правом окне.
Кроме этого, AddThis для самых популярных платформ предлагает отдельные расширения.
Например, выбираем WordPress — самую популярную CMS для создания блогов. Для нее AddThis предоставляет бесплатный плагин и подробную инструкцию с картинками по его установке и настройке.
Share Pluso
Очень стильные и красивые социальные иконки предлагает сервис . Не сомневаюсь, что вы их уже много раз видели на всевозможных интернет ресурсах. Особенно красиво смотрятся черно-белые, которые прекрасно подойдут к любому дизайну.
Share Pluso поддерживает более 20 основных сервисов, закладок и социальных сетей рунета. Добавьте к этому несколько служебных функций: печать, в закладки, отправить на email и так далее.
В настройках можно задать цвет кнопок, размер, расположение (горизонтально или вертикально), наличие или отсутствие счетчика, цвет заднего фона. Все предельно просто! На выходе получаете готовый код для добавления на сайт.
Share42
По количеству доступных социалок Share42, конечно уступает рассмотренному выше AddThis, но он подкупает красотой.
Перейдя на , вы сразу же попадает в генератор, в котором по шага расписан процесс формирования блока социальных кнопок и добавление его на интернет ресурс.
1. Выбираете социальные сервисы, размер иконок и порядок их следования (просто перетаскивая иконки мышью).
2. Далее идут параметры социальных иконок:
- Тип панели с иконками — горизонтальный блок легче разместить, но плавающий вертикальный смотрится гораздо красивее и всегда находится на экране, поэтому читатель его обязательно заметит.
- Кодировка вашего сайта — если не знаете кодировку, оставьте как есть: UTF-8.
- Язык подсказок у иконок — русский сайт, следовательно и подсказки должны быть на русском.
- Добавить иконку сайта Share42.com — добавить к выбранным социальным кнопкам иконку, ведущую на страницу автора скрипта — Share42.com.
- Ссылка на RSS вашего сайта — данная опция будет активна, если вы выберете иконку RSS ленты. Напомню, RSS ленту новостей своего сайта обязательно следует добавить в сервис FeedBurner от Google.
- К вашему сайту подключен jQuery? jQuery — это библиотека языка JavaScript предназначенная для создания всевозможных визуальных эффектов. Если не уверены, подключена она или нет — галочку не ставьте.
3. Когда настройки пройдены, остается посмотреть на получившиеся социальные кнопки и скачать скрипт, если вас все в них устраивает.
4. Установка скрипта на сайт.
Распакуйте полученный архив и загрузите полученную папку share42 на сервер в корневой каталог. Для работы с ftp могу посоветовать использовать бесплатную программу — FileZilla.
Если вы все правильно сделали и папка со скриптом действительно загружена в корневой каталог, то ее адрес будет http://vash_site.ru/share42/. Укажите его в пункте 3 раздела «Установка скрипта на сайт».
На четвертом шаге вам предлагается выбрать CMS своего сайта, если вы ее используете. В зависимости от отмеченного пункта, код ниже несколько изменятся.
Теперь необходимо код из шага №5 вставить к себе на сайт. Для горизонтального блока социальных кнопок все просто — куда вставите, там он и отобразиться. С плавающим вертикальным несколько сложнее.
В последней строчке кода следует указать расстояние в пикселях от начала страницы (в примере 150) и от верха видимой области (в примере 20) до плавающей панели.
<script type="text/javascript">share42('http://site.ru/share42/',150,20)</script> |
Далее его следует вставить «прямо перед или сразу после основного текста страницы». Для того же WordPress это сделать не составит труда: открываем поочередно шаблоны single.php, page.php и index.php и вставляем код сразу после строчки, отвечающей за вывод контента страницы. В моей теме WordPress она имеет вид:
?php the_content('Читать полностью'); ?> |
Если не знаете, куда именно вставить код, на выручку всегда придет методом «научного тыка» — рано или поздно у вас все получится, и панелька отобразиться на нужном месте.
Последнее, что следует сделать, это скопировать стили из шага №6 в файл стилей вашего сайта — с расширением .css. Чаше всего этот файл носит название style.css.
А теперь гвоздь программы — социальные кнопки с счетчиками, которые я использую в настоящий момент на своем блоге! Смотрятся просто шикарно! Доступны два размера — маленький и крупный. Между прочим, на икони с счетчиками люди нажимают гораздо охотнее. Это я даже по себе заметил. 
О том, как их установить на свой блог, читайте в разделе «Важная информация» :
Как добавить код социальных кнопок на сайт
Со скриптом от Share42 разобрались, теперь давайте рассмотрим как лучше добавить на интернет ресурс код социальных кнопок от других сервисов.
Код кнопки состоит из двух частей:
1. Скрипта, заключенного между тегами имеющими примерно следующий вид:
<script type="text/javascript">...</script> |
2. Блока, отвечающего за отображение иконок — весь остальной код.
Так вот, все используемые на странице скрипты лучше размещать в одном месте — в самом низу html кода страницы, перед следующими закрывающими тегами:
</body> </html> |
А уже код, отвечающий за отображение социальных кнопок, вставлять в любое место на сайте.
На этом все, спасибо за внимание. Берегите себя!
Консультация по Skype
