Search for goods and services | Товары и услуги

Кнопки соцсетей для сайта. Установка, настройка.

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

КНОПКИ СОЦСЕТЕЙ. img

Просматривая картинки и фото — просто нажмите левой кнопкой мыши на картинку. Картинка откроется в новом окне в реальном размере и качестве.

В этой статье я проведу вас по самым широко распространенным сервисам и объясню, как установить кнопки соцсетей на свой рукописный сайт, блог на world press, Joomla, drupal. Это наиболее используемые GSM которые используют блогеры.

Разберем несколько сервисов: Pluso, блок «Поделиться» от яндекса и uSocial.


Pluso.

Очень распространенный сервис социальных кнопок. Пользуется огромным спросом и имеет кнопки 38 соцсети на данный момент.

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

Здесь вы сможете выбрать 9 различных дизайнерских вариаций кнопок. Набор из 6 кнопок плюс выпадающее меню с еще 32 иконками социальных сетей.

иконки img

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

Меню настройки.

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

настройка кнопок соцсетей img

Настроили свой виджет, посмотрели, если кнопки нам нравятся, спускаемся ниже и видим окно с кодом нашего виджета, нажимаем «копировать» и сохраняем в текстовом редакторе (world, блокнот и т.д.)

код кнопок соцсетей img

Нам остается разместить свои кнопки соцсетей на свой сайт и наслаждаться ростом посетителей.


Установка виджета на рукописный сайт.

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

код формы подписки img

Открываю редактор кода. Нахожу код формы подписки и перед закрывающим тегом </div> вставляю код своих кнопок.

код виджета кнопок соцсетей img

В итоге у меня получился вот такой виджет кнопок соцсетей.

кнопки соцсетей под формой подписки картинка

Если хотите вставить в другое место, ищете в коде страницы то место куда хотите вставить и вставляете. Все. Если возникнут сложности – пишите в комментариях — отвечу. Если вы считаете, что кнопки сильно прижаты к форме, можно их отпустить при помощи тега <br/>.


Установка на world press.

Открываем консоль. Выбираем «Внешний вид»«Редактор».

установка кнопок соцсетей ворд пресс картинка

С правой стороны будет меню настроек сайта. Выбираем «Отдельная запись (single.php)». Далее – «template-parts» — «content-single.php».

Вставляем код перед тегом «footer». Сохраняем.

вставка кода кнопок соцсетей картинка

Вот что получилось. Наш виджет стоит после каждой статьи на блоге.

виджет кнопок соцсетей в ворд пресс картинка


Установка кнопок соцсетей на Joomla.

Переходим в панель управления.

панель управления joomla картинка

Выбираем «Менеджер шаблонов».

установка кнопок соцсетей менеджер шаблонов картинка

Нажимаем вкладку «шаблоны».

шаблоны картинка

Ваш шаблон.

ваш шаблон картинка

Дальше «изменить шаблон главной страницы».

картинка настройка установки

Вставляем код между тегами <body> и </body>, там, где вы хотите видеть ваши кнопки соцсетей.

код вставки кнопок соцсетей картинка

При размещении сразу после тега <body> кнопки будут вверху сайта.

виджет сверху картинка

Если нужно поставить кнопки внизу – вставляем код перед тегом </body>.

виджет снизу картинка

Чтобы выровнять кнопки по центру – перед кодом вставить тег <center>.

Если вы хотите, чтобы кнопки соцсетей были отодвинуты ниже, их можно отодвинуть тегом <br/>.


Установка на drupal.

Заходим к себе на хостинг или запускаем FTP менеджер и выбираем папку с нашим сайтом. Скорее всего это будет папка «www» или «public_html».

выбор www картинка

Выбираем папку «themes».

выбираем themes картинка

Выбираем «Ваша тема».

ваша тема картинка

Далее – «templates».

templates картинка

Выберите файл «node.tpl.php», и скопируйте его к себе на компьютер.

копируем файл картинка

Откройте скопированный файл с помощью блокнота и вставьте туда скопированный html код после строк

print render($content);

?>

</div>

код файла картинка

Сохраните изменения и загрузите файл обратно. На сайте кнопки соцсетей будут выглядеть так.

виджет кнопок соцсетей на drupal картинка

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


Кнопки соцсетей от яндекса.

Всего на яндексе имеется 26 кнопок соцсетей. Заходим на страницу «Блок поделиться». С левой стороны мы имеем столбик со списком соцсетей, в котором можем выбрать интересующие нас кнопки. Справа – внешний вид блока и код.

блок &amp;quot;поделиться&amp;quot; от яндекс картинка

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

Как устанавливать код на различные сайты, мы обсудили выше, а вот. Что рекомендует сам яндекс.

Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async=»async».

<script src=»https://yastatic.net/share2/share.js» async=»async»></script>

Если требуется поддержка старых браузеров (например, Internet Explorer 8), дополнительно подключите скрипт es5-shims. Этот скрипт должен быть подключен перед скриптом блока:

<script src=»https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js»></script>

<script src=»https://yastatic.net/share2/share.js» async=»async»></script>

Поместите блок в контейнер. В качестве контейнера можно использовать любой блочный элемент, добавив атрибут class=»ya-share2″.

<div class=»ya-share2″ data-services=»vkontakte,twitter,facebook,gplus» data-counter></div>

Так же рекомендую просмотреть таблицу поддерживаемых атрибутов здесь.

Можно указать атрибуты для каждой соцсети отдельно.


Как установить кнопки соцсетей от uSocial.

Заходим по ссылке: usocial и попадаем на страницу выбора различных возможностей.

главная страница кнопок соцсетей uSocial картинка

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

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

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

Так вот данный сервис как раз предоставляет возможность создавать такие социальные замки.

создание наборов кнопок соцсетей картинка

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

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

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

Итак, выбираем «Создать набор».

создание кнопки поделиться картинка

Слева находиться окно предварительного просмотра. Перетаскиваем кнопки справа в окно ПП. Можем добавить кнопки закладки, сполер, печать и e-mail.

Настраиваем форму и стиль иконок, расположение, ориентацию и размер. Можно поставить общий счетчик или счетчик для каждой иконки отдельно. Добавляем кнопку «Вверх», если нужно.

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

Сохраняем и копируем код и вставляем к себе на сайт. Вот как выглядит все это в действии.

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

А вот ссылка на данный сервис: uSocial

Теперь вы знаете, где взять и как установить кнопки соцсетей на сайт. Желаю вам скорейшего продвижения своего сайта в топ.

С увжением, Александр.

477

Комментарии

Нет комментариев. Ваш будет первым!

Разместите свою статью, нажмите здесь