Сервисы Pluso, UpToLike и блок «Поделиться» от Яндекса — красивые и функциональные социальные кнопки

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Я уже довольно подробно описывал, как вставить на сайт Вордпресс одиночные социальные кнопки от Гугл+ и Фейсбука, а также от других соцсетей, в том числе Твиттера и ВКонтакте.

Конечно, такое решение имеет право на жизнь, поскольку обладает своими плюсами. Например, вы можете вдоволь дать волю творческим способностям, создав свои иконки в том же редакторе Pixlr (здесь подробно описан этот упрощенный аналог Фотошопа).

Сегодня же я хочу предложить вам несколько специальных генераторов (Pluso, UpToLike, кнопки Поделиться от Яндекса), которые позволяют сконструировать панель кнопочек социальных сетей в 2-3 клика. Кроме быстроты исполнения, такой комплекс будет активироваться лишь небольшим скриптом, который не окажет существенной добавки в качестве нагрузки на сервер. Каждый из этих конструкторов имеет свою изюминку, так что выбор за вами.

Конструктор Pluso

Пожалуй, одним из самых популярных подобных сайтов на данный момент является Pluso, который быстро развивается и уже предлагает довольно широкий выбор. Для получения блока кнопочек (buttons) надо проследовать на страницу конструктора (pluso.ru), где можно выбрать внешний вид иконок и социальные сети, которые будут представлены в вашей подборке:

Сначала выбираем стиль иконок Pluso, затем перетаскиваем влево в колонку «Выбранные сети» названия тех соцсетей, иконки которых вы желаете лицезреть на своем сайте. Соответственно, лишние, на ваш взгляд, можете отправить в правый список «Доступны к выбору». Одновременно с этими телодвижениями в окошке предпросмотра можно увидеть генерируемую панель Pluso:

Справа в конструкторе Pluso есть возможность изменять величину buttons, их форму, расположение (в одну, в две строки; горизонтальная, вертикальная панель), а также оформление (с фоном, без фона) и функционал (со счетчиком и без). Кстати, счетчик будет показывать общее количество расшариваний во всех социалках.

Обратите внимание, что наряду с иконками в конце блока будет красоваться кружок со знаком «+», при подводе курсора к которому появится выпадающий список, включающий полный перечень всех сетей. Выбрав из него нужную социальную сеть, пользователь также может поделиться интересным материалом, обнаруженным на вашем ресурсе:

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

Для скрипта (выделен красным) в стандартном блоге WordPress наиболее оптимальным местом считается его расположение сразу перед закрывающим тегом BODY. В большинстве тем с этой целью придется открыть файл FOOTER.PHP. Кстати, для тех, кто еще не совсем готов адекватно и в полном объеме воспринимать написанное мною, дополню, что все файлы темы находятся по адресу:

ваш_сайт/wp-content/themes/название_темы

Дополню это скриншотом, чтобы стало понятнее:

С помощью редактора (лучше использовать для этой цели Notepad++) открываем файл FOOTER.PHP и помещаем туда скрипт:

Ну и необходимо решить, куда разместить часть кода для отображения кнопочек Pluso (выделен зеленым). Я, например, считаю, что наиболее оптимальный вариант — сразу после статьи. Для этого открываем шаблон темы, который отвечает за вывод записей. В большинстве случаев это SINGLE.PHP, но могут быть исключения. Итак, в SINGLE находим строчку с функцией вывода статей:

<?php the_content('Читать полностью'); ?>

Полностью строка может немного отличаться от предоставленного мной варианта, но сути дела это не меняет. Прямо под ней мы и помещаем вторую часть кода:

<div class="pluso" data-background="transparent" data-options="big,square,line,horizontal,counter,theme=03" data-services="google,facebook,vkontakte,odnoklassniki,twitter,livejournal,moimir"></div>

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

UpToLike — конструктор с широчайшим функционалом

Функциональные возможности данного генератора явно превышает доселе мне известные. В чем вы, продолжив чтение настоящей статьи, несомненно, убедитесь. Но обо всем по порядку. Итак, для начала переходим на официальную страницу UpToLike.

Можете сразу зарегистрироваться, поскольку это позволит вам отслеживать статистику по панели кнопок, которыми воспользовались посетители вашего ресурса. Но в любом случае произвести регистрацию придется, поскольку без этого вы не получите код от UpToLike. В принципе, вначале можно настроить блок без регистрации, этим мы сейчас и займемся. Сначала посмотрим основные настройки:

Здесь я позволю себе дать некоторые пояснения:

1. Назначение кнопок — наиболее оптимальным вариантом для SEO оптимизации и продвижения вебресурса является значение «Share» (поделиться). Однако, возможно, вам в силу специфики сайта больше необходимо, например, получение лайков или фолловеров (Like, Follow).

2. Расположение — можете выбрать любое (горизонтальное, вертикальное, слева, справа, сверху, снизу). Естественно, настраивая положение блока UpToLike, вы сразу онлайн получите визуальное представление, поскольку, как и положено на современных продвинутых ресурсах подобного рода, включена функция предпросмотра.

3. Показывать счетчик — очень важная функция, поскольку позволяет мониторить число расшариваний, производимых посетителями ресурса. Причем, подсчет можно настроить как для каждой соцсети (раздельный), так и для всех вместе (общий).

4. Дополнительные возможности — а вот такого я нигде больше пока не встречал, только на UpToLike, поэтому остановлюсь поподробнее:
4.1 Цитирование — активация этой опции дает возможность пользователю, выделив понравившийся фрагмент текста статьи, тут же поделиться им со своими друзьями:

4.2 Following — для применения данной опции откроется меню «Настройки Follow», где надо указать адреса ваших аккаунтов в выбранных соцсетях:

В результате читатель, поделившийся с друзьями понравившимся материалом, получит вдобавок приглашение стать вашим фолловером. Так сказать, возможности в одном флаконе:

4.3 Кнопка наверх — еще одна полезная фишка в функционале UpToLike. Я писал как-то подробно о создании такой составляющей дизайна как кнопка вверх для сайта, которая дает возможность улучшить юзабилити проекта. Здесь вы ее получаете, так сказать, ни за грош.

Раздел «Выбор социальных сетей» предоставляет возможность дополнить вашу панельку недостающими сетями. А вот вкладка «Настройки стилей» гораздо интереснее. Тут вы еще раз можете убедиться в высоком уровне функциональности UpToLike. Судите сами:

Можно выбрать размеры кнопочек (маленький, средний, большой) и их форму (круглые, квадратные, с закруглением углов). Можно установить разные эффекты (при подведении курсора иконка делает вращение либо увеличивается в размерах). Безусловно, это тоже каким-то способом вдохновляет посетителя сделать дальнейший шаг, а именно, нажать на нее.

Кроме этого, существует возможность определить не только фон кнопочки UpToLike, но и фон счетчика, цвет текста на нем, а также с помощью ползунка добиться нужного размера текста на счетчике. В окне предпросмотра наблюдаете за всеми изменениями:

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

После того, как вы добьетесь необходимого результата, нажимаете «Получить код» от UpToLike, вот тут таки придется зарегистрироваться:

Впрочем, этот процесс не займет много времени. Просто введите в соответствующие поля свой e-mail и адрес ресурса, после чего нажимаете «Получить код». Одновременно с появлением кода выскочит сообщение, что к вам на почтовый ящик отправлен пароль для авторизации в сервисе UpToLike. В дальнейшем можете его использовать для входа в аккаунт. Приобретенный код вставляете на страницы своего блога или вебсайта точно по такой же схеме, какая была дана выше при описании получения и размещения блока соцкнопок от сервиса Pluso.

Теперь немного о нюансах при размещении панели слева, справа, вверху или внизу области просмотра. Эта панель не является плавающей в случаях вертикального расположения (слева или справа), как это осуществлено в случае Share42, где можно изменять отступы от края активного окна. Если вы желаете, чтобы панель появлялась на всех страницах вашего WordPress блога, то полученный код можно смело вставить полностью перед закрывающим тегом BODY в опять же в шаблоне футера:

В результате социальные кнопки будут на сайте располагаться примерно так (пример для случая, когда в настройках расположения вы выберете «слева»):

Поскольку блок UPToLike будет появляться на всех страницах (включая главную и категории) и будет всегда на виду, то есть смысл сделать его в этом случае неприметным, чтобы не раздражать читателей, как на картинке выше. Возможно, для некоторых покажется излишним делать панельку UpToLike сквозной (размещенной на всех вебстраницах).

Тогда скриптовый фрагмент вы размещаете опять же по накатанной схеме в футер, а вторую часть в тот шаблон, который отвечает за отображение нужной вэбстраницы (это может быть INDEX, ARCHIVE, SINGLE, Category). Причем, его можно воткнуть в принципе в любое место (чтобы не путаться, ту часть, которая не является скриптом, опять же можно поместить сразу после функции вывода статьи php the_content). Подозреваю, для некоторых это может оказаться темным лесом, поэтому почитайте этот материал и прояснится многое.

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

Ну и напоследок помучаем конструктор социальных кнопок, который предлагается Яндексом. Честно говоря, пока я остановился именно на нем, хотя здесь функционал весьма жиденький и не идет ни в какое сравнение с выше описанными конкурентами. Почему я так решил? Ответ до банальности прост: это Яндекс.

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

Итак, конструктор соцкнопочек находится на этой странице. Переходим и производим настройки:

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

Думаю, здесь дополнительные пояснения не нужны, нюансы настроек обозначены на скриншоте выше. Просто копируете из окошка код, который по традиции состоит из двух частей, и вставляете по правилам, уже описанным подробно мною в этой статье выше (все происходит точно также, как и при размещении кнопок Pluso и UpToLike). Уж простите, повторяться не буду.

После размещения на сайте панель будет выглядеть примерно так:

Однако, я нашел, что он смотрится как-то неказисто, поэтому решил немного расширить кнопочки и увеличить расстояние между ними. Для этого прописал в файле style.css своей темы два правила стилей:

.b-share__handle {margin-left: 15px;}
.b-share-counter {padding: 0 0 0 20px !important;}

В результате изменения интерпретировались таким образом:

Да, чуть не забыл. Установив панель от Яндекса, у вас будет в дальнейшем возможность мониторить статистику нажатий по кнопочкам, если, конечно у вас установлен счетчик Яндекс Метрики. Это, кстати, еще один плюс в пользу яндексовского сервиса. Подобная информация может быть весьма полезной при анализе поведения посетителей сайта, а эта очень важная часть продвижения.

Я постарался описать в одной статье несколько сервисов, чтобы вы могли выбрать для себя самый подходящий. Ведь, несмотря на то, что наши блоги на Вордпресс в массе своей стандартные, у каждого свои нюансы, в том числе темы, направленность и тематика ресурса. А это уже предполагает некую индивидуальность. Поэтому хорошо подумайте и поэкспериментируйте с различными вариантами, отобрав наиболее эффективный, тем более, что сменить блок социальных кнопок можно в любой момент.