Сервисы 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;}

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

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: SMO и SMM (социальные сети)

23 отзыва

  1. Роман

    Спасибо за статью.
    У меня остался 1 вопрос: поставил кнопки pluso, теперь бьюсь над тем, как поставить им атрибут "nofollow".
    Если есть такая возможность, расскажите, пожалуйста, как это можно сделать.

  2. Игорь Горнов

    Роман, ставить атрибут "nofollow" нет смысла, поскольку ссылки в данном случае выводятся через скрипт и поисковики их не видят.

  3. Наталья Грамоткина

    Здравствуйте, Игорь. Скажите, а как можно установить кнопки от PLUSO на сайт вертикально? куда в шаблон нужно для этого вставить предлагаемый код?

  4. Игорь Горнов

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

  5. Наталья Грамоткина

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

  6. Игорь Горнов

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

  7. Ирина

    Большое количество сервисов. Здорово. Правда иногда приходится повозиться что бы поставить кнопки на тот или иной шаблон. Не всегда подходят кнопки от плюсо, даже яндекс иногда не становится.

  8. Игорь Горнов

    Что же делать, Ирина. Такая у нас, вебмастеров судьба, многое приходится подгонять под свои нужды. Хорошо, что выбор есть.

  9. Chtokak

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

  10. Игорь Горнов

    Конечно, видит, причем не только Яндекс, но и Гугл, иначе вообще теряется смысл использования сервисов социальных кнопок.

  11. Валентин

    Здравствуйте, вписал в код шаблона "Блок социальных кнопок от Яндекса" на сайт http://bastille.com.ua но столкнулся с одной неприятностью - размером кнопок, подскажите как увеличить размер иконок социальных сетей?

  12. Игорь Горнов

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

    <div class="yashare-auto-init" data-yashareL10n="ru" 
    data-yashareType="small" 
    data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,
    moimir" data-yashareTheme="counter"></div>

    Попробуйте удалить вот этот фрагмент:

    data-yashareType="small"

    Или прописать вместо параметра "small" значение "large". Кнопки станут больше.

  13. Влада

    Добрый день!
    Установила Блок "Поделиться от Яндекса" и никак не могу разобраться где можно указать ссылку на страницу, которой требуется поделиться? потому что некоторые материалы на сайте состоят из нескольких урл адресов

  14. Игорь Горнов

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

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

  15. Влада

    Спасибо за ответ. Вы меня не так поняли. Я имела ввиду, что, например, один большой материал на сайте разбит на несколько страниц с продолжением. И получается что все последующие посты связаны между собой и должны ссылаться на начало материала.

  16. Игорь Горнов

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

    Если у Вас материалы делятся на несколько частей, то присутствует перелинковка, то есть каждая часть ссылается на другие, или я не прав? В этом случае, если пользователь поделится даже одной частью статьи, всегда можно перейти к другим частям по предоставленным ссылкам. Вас такой расклад не устраивает?

  17. Влада

    Совершенно верно, материалы делятся на несколько частей с перелинковкой. Жаль, что простая вставка нужного URL не предусмотрена(( Благодарю за ответ.

  18. Василий

    Спасибо за подборку, как рас выбираю между Плюсо и Яндексом. Сокрее всего Яндекс возьму

  19. Виталий

    Добрый день. Подскажите как Вы сделали общий счетчик публикаций для Share42?
    Спасибо.

  20. Игорь Горнов

    Нет, Виталий, я эту опцию не использую.

  21. Александр

    Два года у меня на сайте висели эти кнопки, а тут случайно обратил внимание на то, что при загрузке страницы подгружается непонятный сайт belesta.ru само собой начал гуглить и вот что нашел: http://searchengines.guru/showthread.php?t=944541 короче снёс эти кнопки и все левые утечки прекратились! Вот тебе и UpToLike.... Установил кнопки от яши больше хрени не замечаю!

  22. Константин

    gogetlinks.net "научился" находить ссылки от UpToLike. Как закрыть их?

  23. Игорь Горнов

    Константин, Вы желаете закрыть ссылки UpToLike от индексации поисковиками? Тогда попробуйте поместить скрипт, полученный от UpToLike, в отдельный файл и запретить его индексирование в robots.txt.

Добавить комментарий

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

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.