Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Кнопки социальных сетей для сайта: обзор онлайн-сервисов

social

Ведя речь об инструментах вебмастера, к которым я отношу и онлайн-сервисы Интернета, полезные для сайтостроения, я не могла не затронуть такую важную тему, как кнопки социальных сетей. Конечно, если вы являетесь поклонником CMS WordPress, как впрочем и я, вы можете просто установить плагин, однако не рекомендую перегружать систему лишними плагинами, без которых легко можно обойтись.
В моем обзоре представлены сервисы кнопок социальных сетей, которые наиболее популярны, их достоинства и недостатки, ведь только так можно определить, что подходит именно вам. Хороших сервисов сейчас много, так что новичку есть из чего выбирать.

Share42

Первым номером по праву выступает Share42buttuns (http://share42.com) разработки Dimox’а.
Какие преимущества?

Установить кнопки в этом сервисе просто как раз, два, три…))

Первым шагом выбираем размер наших иконок (32, 24 или 16) и кликая по ним выбираем те, которые хотим видеть на сайте. Дополнительное удобство в том, что  их можно менять местами путем простого перетаскивания мышью. Можно воспользоваться опциями выбрать все/инвертировать все.

Настройки Share42

На ваш вкус определяем тип панели с кнопками: горизонтальная, вертикальная или плавающая.

Далее указываем кодировку utf-8 или windows-1251.

Дополнительные настройки Share42

Нажимаем на кнопку скачайте готовый скрипт. Загружаем папку share42 на сайт и указываем путь до этой папки.

Копируем полученный код и вставляем его до или после статьи.

Вставка кода Share42

В WordPress за это отвечает файл single.php, в DLE – файл шаблона fullstory.tpl

Интересная деталь: возможность добавления специальных параметров в приведенном коде, таких как ссылка на страницу, заголовок страницы, ссылка на изображение, описание к странице. Эти атрибуты могут заполняться автоматически, если вы присвоите им теги вашей CMS, на сервисе есть готовый код для WordPress и Drupal.

Есть возможность изменить оформление блока с помощью стилей, приведенных внизу(их можно модифицировать по собственному вкусу и вставить в файл таблицы стилей на сайте).

AddThis

Второй по популярности – зарубежный  AddThis, который используют более 14 миллионов сайтов во всем мире)). Он позволяет работать более чем с 300 закладками.

Зайдя на главную страницу первым делом нажимаем красивую синюю кнопку Free!Get started. Мы попадаем сразу  в настройки кнопок, однако предварительно нас попросят войти под своим именем или зарегистрировать аккаунт. Можно избежать этой необходимости, если нажать внизу на ссылочку Don’t want analytics?(Дело в том, что этот сервис предоставляет вам возможность отслеживать статистику, полный анализ аудитории из социальных сетей).

Вход на сайт AddThis.com

Слева требуется задать для чего получить кнопки, оставим по умолчанию Website, если вы выберете WordPress, или некоторые другие CMS, которые открываются при нажатии на ссылку More options…, вы увидите инструкции по установке плагина AddThis, при желании можно установить его для простоты и удобства.

Основные настройки AddThis.com

Какие тут еще настройки? Настройки стиля.
В горизонтальном виде представлены варианты со счетчиками, кнопки 32×32, стандартные кнопки и все сервисы в виде одной кнопки.
И имеется три варианта, выполненных в вертикальном виде первый также со счетчиками и просто кнопки двух размеров. Вертикальные кнопки удобны тем, что они фиксируются  и остаются на месте при прокрутке в определенном месте экрана. Положение можно изменить непосредственно в том коде, который вам будет предложено скопировать(ниже код для вертикальных кнопок размером 32х32) – за это отвечает участок в первой строчке

Теперь осталось только выбрать нужные мне кнопки. Тут возникает закономерный вопрос: как это сделать? Поскольку мы уже знаем, что AddThis поддерживает более чем 300 видов всевозможных сервисов, такая возможность есть. Переходим по адресу http://www.addthis.com/services/list. Там напротив названия каждого сервиса стоит код кнопки (code), который можно скопировать в ваш код вместо текста preferred, например код кнопки для Одноклассников будет выглядеть следующим образом

Но, как оказалось, все может быть гораздо проще! Вверху страницы под Preview находится малозаметная надпись
AddThis boosts sharing by automatically showing the right buttons to each user based on their location and activity across the web. И ссылка – Disable and select your own buttons. (AddThis повышает обмен, автоматически показывая нужные кнопки для каждого пользователя в зависимости от его расположения и деятельности в Интернете. Отключите и выберите свои собственные кнопки).
Нажимаем на эту ссылку и открывается возможность выбора определенных соц.сетей  за счет перетаскивания их из списка Button Options в список Selected Buttons, ненужные сервисы можно убрать  перетаскиванием в список Button Options. Вот такая маленькая хитрость)).
Кстати, посредством AddThis можно также установить кнопки для последователей(Follow Buttons), которые ведут на ваш аккаунт в Твиттере или Фейсбуке или иной социальной сети, перечисленной в списке слева. Можно вписать требуемый заголовок (Следуй за нами) и настроить размер и положение кнопок с помощью выпадающего меню Design(слева).

Настройки follow buttons

Еще есть возможность установить Welcome bar (специальную панель или бар). Она располагается в верху экрана,  при щелчке может сворачиваться в миниатюрную закладку, есть настройки цветов фона, кнопки, текста, то есть внешний вид можно переделать полностью на свой вкус.

Из колонки слева выбираем социальную сеть, если ее нет, то можем добавить нажав на пункт Add visitor type. Откроется окошко, в котором надо будет выбрать вкладку From service и в выпадающем списке найти нужный нам сервис.

Выбор социального сервиса AddThis4

На самой панели текст  можно задавать произвольный, равно как и текст на кнопке (поля  Massage и Button text). Функциональности кнопки(button action): это может быть стандартная кнопка поделиться(Share) или Follow button (кнопка для последователей), тогда вы должны будете указать еще и свой аккаунт в данном сервисе и третий вариант – Go to URL, можно ввести любой адрес, т.е. кнопку на панели можно использовать для перехода на любую другую страницу.Вот такая замечательная панель!

Настройка панели AddThis

Впечатления: красивые кнопки, хороший, добротный сервис, один из лучших в своем роде!

Единственное, что не понравилось 2 размера кнопок, один – слишком большой, другой – слишком маленький, не хватает промежуточного, и не  нашла как настроить))

ShareThis

Третьим мы рассмотрим еще один буржунетовский ресурс под названием ShareThis. Вообще он очень похож на AddThis, но есть и различия))

Заходим на сайт и щелкаем в верхнем меню пункт GET SHARING TOOLS.

ShareThis

Получение кнопок  социальных сетей состоит из трех шагов:

На этапе получения кода этих виджетов(после 3 шага) возникла маленькая проблема – потребовалась регистрация, так что будьте бдительны! К счастью, сервис предлагает возможность авторизации через социальные сети и я благополучно воспользовалась аккаунтом Google.

Как добавить сюда наши отечественные ВКонтакте, Одноклассники и прочие? Многие зарубежные соцсети у нас малоизвестны и не пользуются спросом.

Да легко! На заключительном этапе, какой бы виджет вы не выбрали вам будет предложено создать список выводимых соцсетей путем перетаскивания из списка доступных. А если воспользоваться поиском(Search services) и набирать названия нужных элементов(например Odnoklassniki) они будут найдены и доступны также для перетаскивания.
Выбор социальной сети ShareThis
Настроек довольно мало,но зато его можно смело использовать, как альтернативу, если вас интересуют новые, нестандартные, не так широко распространенные виджеты.

Pluso

Screenshot_18
Четвертый  в нашем списке – сервис Pluso. Мне очень нравятся кнопки представленные здесь, чистый стиль, красивые цвета, возможность выбора из 8 видов оформления. При этом подкупает понятный, удобный интерфейс, наверно установить кнопки здесь еще проще, чем в Share42.  Из столбика Доступны к выбору перетаскиванием добавляем нужные социальные сети в столбик Выбранные сети, также и ненужные сервисы из этого столбика можно перетащить обратно в Доступны к выбору.

Далее смотрим блок на странице отвечающий за настройки внешнего вида кнопок. Чего здесь только нет! Три размера иконок, в одну строку или две, располагать панель вертикально или горизонтально, со счетчиком или без счетчика. Есть даже возможность добавления пользовательского фона и задания формы кнопок: квадратные или круглые.

Настройка кнопок Pluso

Но не обойдется без ложки меда в бочке дегтя. Какие же недостатки у Pluso?

Блок «Поделиться» для вашего сайта

Этот простой блок предлагает вам Яндекс установить на страницы вашего сайта. Конструктор находится по адресу http://api.yandex.ru/share/.

Блок поделиться от Яндекса

С одной стороны находится набор сервисов, кнопки которых вы выбираете для установки на своем ресурсе. Есть возможность все-таки настроить(хоть и примитивно) внешний вид: это может быть кнопка и иконки, ссылка и иконки, меню и иконки или одни иконки.

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

Для тонкой настройки можно использовать API, обзор которого дается в разделе документация (меню вверху страницы).

У меня были мысли также рассмотреть сервис Одна кнопка, так как знаю, что раньше он был популярен, но передумала: расширение WOT для моего браузера Firefox, которое оценивает рейтинг сайтов сообщило, что он небезопасен, есть опасения, что он содержит вредоносное содержимое, наверное никто и не пользуется им сейчас…

На этом мой краткий обзор закончен, до новых встреч! В качестве примера, можете посмотреть видео

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*