Скрипт красивых кнопок социальных сетей. Pluso — кнопки социальных сетей. Как быстро установить и настроить. Позиционирование плавающей панели Share42

Не клюет? И средств на прикормку посетителей уже много потратили. А кнопки социальных сетей для сайта установили? Понятно! Все симптомы заболевания на лицо – асоциальность сайта. Будем лечить.

Зачем сайту нужны кнопки социальных сетей?

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

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

Что представляет собой обычная социальная кнопка?

Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:

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

Второй кусок кода нужно поместить в той части страницы, где будет отображаться кнопка:

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

Варианты легкого размещения

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

Место расположения панели социальных кнопок можно выбрать на нескольких шаблонах. В бесплатной версии аккаунта доступна выдвигаемая боковая панель. Также есть бесплатная версия плагина для WordPress . После прохождения регистрации на сайте сервиса предоставляется доступ к статистике переходов по социальным кнопкам.

• Share42 – понятный и простой интерфейс с возможностью «тонкой» настройки внешнего вида панели социальных кнопок. При этом процесс настройки сопровождается пошаговыми инструкциями с описанием действий, которые необходимо осуществить. Поэтому сервис подходит даже для не опытных вебмастеров:

Еще одним плюсом данного сервиса является генерация скрипта панели социальных кнопок с поддержкой нескольких популярных CMS .

Социальные кнопки и WordPress

Для популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress .

Положительными сторонами этого расширения является полностью русскоязычный интерфейс, простота настройки и «заточенность » под популярные социальные сети Рунета:

Порядок действий при установке плагина социальных кнопок для WordPress .

1) Заходим в административную панель сайта. Слева выбираем вкладку «Плагины », «Добавить новый ».
2) На странице «Установить плагины » в поисковое поле вводим название расширения и нажимаем на кнопку «Поиск плагинов »:

3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:

4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:

5) После его активации в левой консоли инструментов появится новый раздел «Share Buttons »:

Настройки плагина состоят из нескольких пунктов:

Еще несколько проверенных плагинов для WordPress :

• Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
• Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.

Социальные кнопки и Joomla

Под этот движок также создано много плагинов для работы с социальными кнопками. Рассмотрим процесс установки расширения на примере SocButtons . Особенности этого плагина:

• Поддержка всех наиболее популярных версий движка;
• Простота настройки;
• Характеристики внешнего вида задаются для каждой кнопки отдельно;
• Малый вес инсталляционного пакета.

Порядок действий:

1) Заходим в административную часть сайта на Joomla и выбираем значок «Менеджер расширений ».
2) Здесь определяемся с источником для загрузки расширения:

3) После инсталляции расширения переходим в «Менеджер плагинов » и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:

4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:

Еще несколько проверенных расширений для Joomla:

• Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении (горизонтально, вертикально, или вообще сделать ее плавающей );
• JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.

Скрипт или плагин?

Установка плагина является самым простым и быстрым вариантом. Чаще всего после его инсталляции весь сайт работает исправно. Но все может разрушиться сразу после обновления версии движка на более новую.

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

В новой версии движка на php структура методов и функций меняется очень редко. Поэтому скрипт легко «переносит» процесс такого обновления.

Код социальных кнопок можно получить на одном из специализированных сервисов. Их обзор представлен выше. Для примера возьмем сервис Share42 . Он поддерживает создание социальных кнопок для популярных движков. Порядок действий.

Доброго времени суток уважаемые пользователи сайта — сайт , в сегодняшней статье я хочу рассказать вам, о замечательном сервисе Share.Pluso.ru . Данный ресурс предлагает красивые и функциональные кнопки социальных сетей, для вашего сайта.

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

Преимущества и особенности сервиса

Существует много сервисов, плагинов (Socbuttons — плагин социальных сетей для Joomla) и других методов по добавлению кнопок социальных сетей на сайт, чем же отличается сервис Pluso и какие его преимущества?

• Огромный выбор вариации дизайна кнопок — более 300 вариантов
• Все что требуется, для установки кнопок себе на сайт — зайти на Pluso, выбрать дизайн кнопок и скопировать код, регистрация не требуется
• Если вы решите зарегистрироваться на сервисе, то вы сможете просматривать подробную статистику по использованию установленных кнопок.
• Сервис Pluso предлагает большое количество социальных сетей, а также кнопку печати и закладок.

Настройка внешнего вида кнопок социальных сетей от сервиса Pluso

Первым делом заходим в конструктор сервиса — https://share.pluso.ru/ , после чего приступаем к настройке дизайна кнопок.

1. Выбираем стиль кнопок и количество отображаемых социальных сетей. Выбор происходит простым перетаскиванием, между полями «Выбранные сети» и «Доступны к выбору», также вы можете менять порядок расположения кнопок.

2. В окне «Предпросмотр» можно наглядно посмотреть, как будут выглядеть наши кнопки. Справа есть дополнительные настройки:

• Размер иконок — большие, средние, маленькие
• Форма — квадратные или круглые
• Расположение кнопок — в одну или две строки
• Горизонтальные или вертикальные кнопки
• С счетчиком или без (имеется ввиду общий счетчик для кнопок)
• С фоном или без

3. После настройки внешнего вида кнопок, копируем код и вставляем у себя на сайте.

Как установить кнопки социальных сетей от Share.Pluso.ru на сайте Joomla

Вставить скопированный код кнопок от Share Pluso на сайт Joomla, можно несколькими способами:

• Используя модуль «HTML-код»
• С помощью «Компоненты» — «Баннеры»
• Непосредственно в код страницы

На примере будем использовать первый способ: в админ панели заходим в «Сайт» -> «Общие настройки» — > «Редактор по умолчанию» — выбираем «Редактор без редактора» — нажимаем «сохранить и закрыть». Далее переходим в «Расширение» -> «Менеджер модулей» -> «Создать» -> «HTML-код». Вставляем скопированный код в поле «Текст», задаем заголовок и позицию (другие настройки по желанию), ставим «Опубликовано» и сохраняем. После сохранения можно выбрать другой «Редактор».

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

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

Pluso — как убрать иконку «плюс»

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

Если вам необходимо скрыть данную иконку, то вам необходимо добавить следующий код в вашу таблицу со стилями (css):

Pluso - more { display : none ! important ; }

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

Статистика по кнопкам от сервиса Pluso

Как я уже упоминал ранее, для получение расширенной статистики по кнопкам социальных сетей, необходимо зарегистрироваться на сервисе http://share.pluso.ru.

Статистика собирается и отображается по 4 критериям:

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

Популярный модуль вывода групп Вконтакте для вашего сайта на Joomla.

«Зачем она нужна?» — спросите вы. Наверное, пытаюсь идти в ногу со временем — мы плетемся в хвосте буржунета, а у них раскрутка сайта несколько отличается от нашей текущей действительности.

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

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

Зачем нужна панель Share42, ее достоинства

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

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

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

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

Потом уже я наткнулся на сервис Шаре42 и, увидев на нем те же самые кнопки социальных сетей, был немного удивлен — Dimox использует штамповку. Это вроде как искусный сапожник будет ходить в ширпотребе. Однако, немного покопавшись в сети, наткнулся на , где он пишет о запуске бесплатного сервиса по самостоятельному подбору, настройке и получению готового кода скрипта социальных кнопок .

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

Теперь про минусы:

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

Также нужно будет представлять хотя бы примерно, как устроена используемая вами . В , например, не обязательно копаться в коде — можно использовать (правда, для этого скрипта не пробовал).

Если минусы для вас не существенны (или вы готовы потоптаться на месте в поиске истины), а плюсы являются значимыми, то милости прошу читать данную статью дальше. Что называется — не переключайтесь. Я расскажу про очень простую настройку и просмотр созданной панели кнопок соцсетей на Share42, а также про ее установку на . Не обессудьте, но именно на этом движке работает мой блог.

Настройка Share42 и установка скрипта на сайт

Я кинул эту папку в директорию с плагинами WordPress, поэтому на четвертом шаге мастера мне пришлось указать именно этот путь:

А также я вынужден был поставить галочку напротив WordPress, ибо именно этот движок использует мой блог. Все, с настройками Share покончено, осталось только вставить предложенный на пятом и шестом шаге мастера Html и CSS код. Собственно, здесь обычно и возникают серьезные проблемы у неподготовленных пользователей.

Обратите внимание, что содержимое этого кода мгновенно изменяется при внесении изменений в ваши настройки (Аякс, очевидно, великий и ужасный). Поэтому, при выборе вертикальной плавающей панели, вам придется вставлять два фрагмента CSS кода вместо одного (при выборе горизонтальной панели). Но это все детали, хотя и очень даже впечатляющие и приятные (славься Димокс).

Давайте сначала поговорим про простое — вставку CSS кода . Скопируйте один или два фрагмента с правилами и найдите тот файл таблиц каскадных стилей, который использует ваш шаблон или тема оформления.

В WordPress он обычно называется Style.css, живет в папке с используемой вами темой оформления (/wp-content/themes/название темы). В Joomla файл стилей нужно искать в папке с используемым вами сейчас шаблоном (/templates/название шаблона)

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

Ну, а теперь пришла пора разобраться с тремя строчками Html кода скрипта Share42 . Автор советует вставить их перед или после статей. В WordPress сделать это не просто, а очень просто. Открываете на редактирование файл single.php из папки с вашей темой оформления (помните, она живет по адресу /wp-content/themes/название темы WordPress).

Можно вставить код сразу после статей. Для этого найдите строчку с функцией the_content и вставьте предложенный фрагмент сразу после нее, например, так: