Как установить социальные кнопки на сайт: Как добавить социальные кнопки на сайт?

Содержание

Как установить социальные кнопки на сайт вордпресс

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

К этому посту меня подтолкнул сегодняшний вебинар, организованный Александром Борисовым, который проводил Руслан, где он рассказал о многих ошибках на блогах начинающих веб-мастеров.

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

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

Содержание

Мнение о вебинаре Александра Борисова
Основные критические ошибки начинающих вебмастеров
Немного размышлений о кнопке социальных сетей на сайте
Как установить лучшие социальные кнопки на сайт
Сайт предоставляет 3 вида скина:
Горизонтальные
Вертикальные
Добавляем социальные кнопки на свой сайт
Как установить социальные кнопки на сайт wordpress
Видео Как установить социальные кнопки на сайт

Мнение о вебинаре Александра Борисова

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

Основные критические ошибки начинающих вебмастеров

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

Юзабилити сайта — удобство пользователя при просмотре блога. Многие веб-мастера, считают, что привлекая посетителей из поисковых систем однажды — они смогут их удерживать постоянно. К примеру, на мой блог только из поисковых систем в среднем приходят 90% посетителей, а лишь единицы остаются.

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

Имейте терпение и выдержку, ну хотя бы пока не напишите 100 статей и трафик не станет 300 хостов в сутки — тогда и карты в руки!

Конечно, это не все ошибки, но очень важные!

Немного размышлений о кнопке социальных сетей на сайте

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

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

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

Как установить лучшие социальные кнопки на сайт

В интернете существует много различных серверов, которые помогают с установкой кнопок социальных сетей на ваш сайт, среди них и такие именитые, как Яндекс и Google, но мы рассмотрим не менее интересный способ с простой установкой социальных кнопок… Итак, встречаем — //sapegin.github.io/social-likes/ru/ (скопируйте и вставьте в браузер).

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

Сайт предоставляет 3 вида скина:

Горизонтальные

Классический

Плоский

Бирман

Вертикальные

Классический

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

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

Оставшиеся скины я покажу в сокращённом варианте, используя только две социальные сети. А то и так статья, наверное, утомляет? Дальше, постараюсь короче писать. Хотя думаю с выбором вида, вы определитесь самостоятельно. Переходим к коду установки кнопок.

Добавляем социальные кнопки на свой сайт

На самом деле установка этих кнопок проста до не могу, но тем не менее даже я столкнулся с проблемой при их установке на блог. Что я только не делал, когда скачал код они никак не хотели отображаться.

А я всего-то не скачал один файл с этого сайта — jquery-1. 11.3.min (откроется в новом окне).

Открываем и качаем указанный, стрелочкой файл — Download the compressed, production jQuery 1.11.3, возможно, на момент прочтения статьи версия файла будет выше, сейчас 1.11.3.

В случае если ваша версия отличается от моей просто в коде, который вам выдаст система Social Likes, замените на свой.

В моём случае система предложила этот код:

Как многие догадались, вот эту строчку:

< script src = "jquery.min.js" > </ script >

Меняем на эту:

 < script src = "JQuery-1.11.3.min .js" > </ script >

(не забывайте учесть полный путь к файлу, если он у вас установлен не в корневой директории, то запрос будет выглядеть так)

< script src = "ваш путь к файлу/JQuery-1.11.3.min .js" > </ script >

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

Поля, адрес страницы, название — можете не заполнять. У вас должен быть примерно такой код.

Открываем, главную страницу вашего сайта, обычно это index.html либо index.php. Если вы используете wordpress — header.php, если DLE — main.tpr. Ищем в коде — /head

И вставляем выше кода

/head, следующее:

< link rel = "stylesheet" href = "social-likes_classic.css" >
 < script src = "jquery.min.js" > </ script >
 < script src = "social-likes.min.js" >
 </ script >

У меня получилось вот так:

Оставшийся код вставьте в то место, где хотите видеть кнопки социальных сетей.


<div>
<div title="Поделиться ссылкой на Фейсбуке">Facebook</div>
<div title="Поделиться ссылкой в Твиттере">Twitter</div>
<div title="Поделиться ссылкой в Моём мире">Мой мир</div>
<div title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
<div title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
<div title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

У меня вышло так, я вставлял код в файл single.

php (wordpress):

Теперь, остаётся только проверить отображения на сайте. Если не будет отображаться, попробуйте почистить КЭШ сайта и браузера. Кстати, если будет близко отображаться к контенту просто пропишите </br>, сверху <div>.

Как установить социальные кнопки на сайт wordpress

UpToLike Social Share Buttons — это один из инструментов, который сможет с лёгкостью настроить социальные кнопки на ваш блог, но его работа немного тормозить скорость загрузки сайта (незначительно).

Установить этот плагин проще, простого. Открываем админ раздел wordpress — плагины — добавить новый.

В строке поиск, пишем — UpToLike Social Share Buttons, и жмём enter.

Жмём кнопку установить плагин. После установки просто откройте настройки плагина.

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

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

Видео Как установить социальные кнопки на сайт

Бала ли вам статья полезной?

Как вставить кнопки социальных сетей в материал Joomla

25.05.2019 | Category Веб-разработка

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

Конструкторов подобных кнопок великое множество.
И здесь есть один момент!

Учитывать нажатия на кнопки соц.

сетей, Яндекс может только если на сайте установлен их блок «Поделиться».
Ссылка на конструктор блока >>

Это подтверждает наличие в Я.Метрике отчётов по кнопке «Поделиться».

Если установлены другие соц.кнопки, то Яндекс ничего не может гарантировать. Скорее всего он не зафиксирует переходы, а значит не учтёт поведенческие факторы.

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

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

Шаг 1. Выясняем есть ли в установленном шаблоне переопределение макета для материалов.

Немного поясню: в Joomla существуют макеты для каждого компонента и модуля. Это типа маленьких шаблонов.
И эти макеты можно переопределить и сделать их по своему. Что мы и сделаем)

В установленном шаблоне должна быть папка html — в ней хранятся все переопределения макетов.
Внутри этой папки должна быть папка com_content — здесь хранятся переопределения макетов для материалов.
Они сгруппированы по принадлежности.

article — шаблоны для полного текста материала
categories — шаблоны страницы со списокм категорий
category — шаблоны страницы категории (в виде списка и в виде блога)
featured — шаблоны страницы избранных материалов

Как видно из скриншота шаблонов в папке может быть несколько.
Напрмиер в папке article (шаблоны для полного текста статьи), есть 2 шаблона:

default.php — основной шаблон
default_links.php — шаблон для отображения дополнительных ссылок статьи.

нам нужен файл default.php

Полный путь до него:

ваш_сайт/templates/ваш_шаблон/html/com_content/article/default.php

Если папки html/com_content нет в вашем шаблоне.

Такое может быть.
Значит идём в адимнку Joomla -> Менеджер шаблонов.

Вы увидите список шаблонов, кликаем по вашему шаблону (в 2-ой колонке — шаблоны), который стоит по умолчанию.

Далее идём на вкладку «Создать переопределение».

В колонке «Компоненты», находим com_content, разворачиваем и кликаем по article

И видим что создалось переопределение.

Теперь можно открыть файл default.php, который лежит в папке /html/com_content/article

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

Шаг 2. Вставляем код, полученный из конструктора кнопок.

Теперь нужно скопировать предложенный код для блока поделиться — https://tech.yandex.ru/share/

Скопировали? Ок.

Как вы могли заметить в файле default.php содержится html код вперемешку с php.
Если вы читаете эту статью, то наверное, разбираетесь в html.
Если нет, то вот бесплатный курс >>

Примерно на 111 строке видим блок div с itemprop = articleBody
В этом блоке, через $this->item->text, выводится текст статьи.

Код кнопок можно вставить перед этим блоком или после него.
Смотря где вы хотите выводить социальные кнопки.

Я создал ещё один блок div с классом my_share_buttons и поместил в него код из конструктора.
Дополнительный блок я создал чтобы им можно было управлять через CSS стили.

Получилось так:

А в статье выглядит так:

Дополнительно для блока .my_share_buttons можно добавить отступы, фон и другие стили.

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

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

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

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

Также посмотрите как вставить социальные кнопки в карточку товара JoomShopping.

Полезный модуль кнопок соцсетей.

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

Спасибо за внимание.

Блок

социальных иконок — поддержка WordPress.com

Блок социальных иконок позволяет добавлять значки социальных сетей на любую страницу или сообщение и направлять людей в ваши профили в социальных сетях.

Вот пример:

СОДЕРЖАНИЕ

ВИДЕО ОБДОВЛЕНИЕ

↑ СОДЕРЖАНИЕ ↑

Чтобы добавить Block Block , нажмите на + Block ICON и поиск «Социальные значки». Нажмите на нее, чтобы добавить блок к публикации или странице.

💡

Используя клавиатуру, вы также можете ввести /social в новой строке и нажать Enter, чтобы быстро добавить новый блок Social Icons.

Когда вы добавляете блок в первый раз, вы также увидите параметр Размер, который поможет вам определить размер ваших значков:

Для получения дополнительной информации посетите наши подробные инструкции по добавлению блоков.

↑ Содержание ↑

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

Появится список всех доступных значков. Вы можете выбрать нужный из списка или использовать функцию поиска для поиска значка, например «Facebook». Таким образом вы можете добавить иконки во все свои социальные сети.

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

Как привязать значок социальной сети

⚠️

Если вы не добавите ссылку на значок, вы не увидите значок в предварительном просмотре или на активном сайте.

↑ Содержание ↑

Добавить новые значки

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

Добавление новой иконки.

Если нужного значка нет, вместо него можно использовать общую кнопку ссылки:

Общий значок ссылки

↑ Содержание ↑

Список поддерживаемых значков

Для использования доступны следующие значки:

500px
Бэндкемп
Беханс
CodePen
DeviantArt
Дрибббл
Дропбокс
Этси
Фейсбук
Flickr
Четыре квадрата
Гитхаб
Goodreads
Гугл
Инстаграм
Last. fm
LinkedIn
Электронная почта (mailto: ссылки)
Мастодонт
Встреча

Средний
Патреон
Пинтерест
Карман
Реддит
RSS-канал (URL-адреса с /feed/)
Скайп
Снэпчат
Саундклауд
Спотифай
Телеграмма
ТикТок
Тамблер
Подергивание
Твиттер
Vimeo
ВК
WordPress
Визг
Ютуб

↑ Содержание ↑

Удаление значка

Чтобы удалить значок, нажмите на него, чтобы открыть его отдельную панель инструментов. Нажмите кнопку с многоточием (три точки) для этого значка и выберите Удалить:

Удаление значка социальной сети

↑ Содержание ↑

Настройки блока

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

Нажмите на значок ⚙️, чтобы открыть настройки блока.

Только логотипы

Форма таблетки

Настройки блока

Макет

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

Вы можете отображать кнопки вертикально (т. е. располагать их столбцом) с помощью Ориентации 9Настройка 0004 на боковой панели родительского блока кнопок .

При включении параметра Разрешить перенос на несколько строк кнопки будут перемещаться на следующую строку, когда на мобильном устройстве недостаточно места (рекомендуется). Если этот параметр отключен, все кнопки останутся на одной линии, несмотря ни на что.

Настройки ссылок

Вы также можете открыть социальные ссылки в новой вкладке, переключив параметр Открыть ссылки в новой вкладке .

Щелкните место рядом с последним значком, чтобы выделить весь блок социальных значков .
В правой боковой панели включите параметр Открывать ссылки в новой вкладке .

Открывать ссылки в блоке значков социальных сетей в новой вкладке
Настройки цвета
В настройках цвета есть два параметра, которые можно изменить.
Цвет значка : Изменяет цвет значков в блоке значков социальных сетей.
Цвет фона значка : Изменяет цвет фона всех значков.
Если вы не выберете цвет, значок будет использоваться в цвете этой социальной сети (например, синий для Facebook, красный для YouTube). вы добавляете класс CSS в свой блок, что позволяет вам писать собственный CSS и стилизовать блок по своему усмотрению. Учить больше.
Расширенный раздел позволяет добавить в блок класс CSS.
Каждая иконка социальных сетей также может иметь свой индивидуальный класс. Добавьте класс к значку, выбрав его, и измените поле Дополнительный класс CSS для этого значка.
Универсальные планы и ценообразование
Как добавить кнопки социальных сетей на веб-сайт
3817
HOW-TO -8 мин. Прочтите
99. себя в социальных сетях с помощью пользователей и сотрудников компании, которые делятся вашим контентом на личных страницах. Разберемся, как добавить удобные кнопки на сайт и увеличить ваше присутствие в социальных сетях.
Зачем нужны лайки и репост на сайте
В эпоху социальных сетей необходимо создать взаимодействие сайта с социальными сетями, чтобы максимально охватить свою аудиторию. Для ряда тем, особенно новостных, кнопки «Поделиться в социальных сетях» просто необходимы. Если вы добавите кнопки «Поделиться», пользователи будут рекламировать ваш сайт в один клик или выражать свою лояльность к контенту лайком, его увидят и их друзья, например, в Facebook.
Благодаря счетчикам посетители видят, что ваша аудитория лояльна, а платформа популярна. Это повлияет на поведенческие факторы. А поведенческие факторы улучшат позиции в поисковой выдаче. Технически, при нажатии « Поделиться » копируются заголовок, картинка, часть контента и ссылка на статью. Публикация создается автоматически в личном кабинете посетителя, и ее увидят все подписчики.
Кнопки позволяют разместить ссылку на свой сайт в социальной сети, что сильно снижает популярность ссылки. Наличие этих кнопок повышает удобство использования веб-сайта, помогая пользователю осуществлять быстрый обмен информацией.
Представьте ситуацию, что посетитель заинтересовался событием, которое описано на вашем сайте-афише. А если не установить кнопку поделиться событием, пользователю остается сохранить ссылку на страницу, зайти в соцсеть или мессенджер, вставить ссылку и отправить. Как правило, он не захочет тратить на это время и уйдет со страницы.
Приступим к установке.
Установка кнопок «Мне нравится» и «Поделиться» на вашем сайте
Установить кнопки на свой сайт можно несколькими способами. Один из них — вручную сгенерировать код , встраиваемый в веб-ресурс. Второй — автоматический способ — предполагает установку специальных плагинов.
Формирование кода кнопок
Рассмотрим генерацию кода кнопок на примере Facebook. Перейдите по ссылке на конфигуратор кнопок. Конфигуратор позволяет настроить внешний вид кнопок, размер и включить опцию общего доступа.
Выберите тип кнопки для сайта в «Композиция» . В нижнем поле изображение изменится в зависимости от выбранного вами типа. Посмотрите несколько вариантов и определите подходящий к общему стилю вашего веб-ресурса.
Установить «Тип действия» — лайк или репост. Если вы хотите добавить на сайт только одну кнопку, выберите ее в этом поле. Если хотите и то, и другое, выберите кнопку нравится , как поделитесь (рекомендую) присоединится позже:
Выберите размер кнопок. Отталкивайтесь от того, насколько гармонично кнопки смотрятся на сайте. В нижнем поле есть примеры:
Чтобы добавить кнопку «Поделиться» к кнопке «Нравится», поставьте галочку под окном настроек:
Последний шаг — нажмите «Получить код» . Элемент кода необходимо перенести в основной код страницы, на которой должны появиться кнопки. Если это статьи, то кнопки обычно располагаются после текста.
Пример кода добавления лайков и репостов на сайт:
Автоматическое размещение кнопок
Если вы не готовы самостоятельно редактировать код сайта и разбираться в его нюансах, настройте кнопки автоматически через плагины. Готовые решения разработаны практически для всех CMS и их легко найти в магазинах платформ. Чтобы добавить плагин для WordPress, зайдите в админку в раздел «Плагины» и нажмите кнопку Кнопка «Добавить новый» . В поле поиска введите запрос лайков.
Рассмотрим для примера несколько плагинов.
#1
Easy Social Share Buttons
Easy Social Share Buttons — это платный плагин, который поддерживает более 40 социальных сетей. Его преимущество в функциональности. Он позволяет размещать панель кнопок в любом месте, использовать счетчик подписчиков, отслеживать показатели производительности и многое другое. Плагин предлагает более 25 различных шаблонов для своих иконок.
Активация плагина стоит 12$. После нее можно перейти в настройки кнопок.
Выберите первый « Социальные сети» конфигуратор, отметьте нужные социальные сети:
В меню настроек «Шаблоны и стиль» определите внешний вид иконок, то есть шаблон, который будет выглядеть лучшее на вашем сайте:
В разделе «Счетчики репостов» установите счетчик, который будет фиксировать количество пользователей, сделавших репост, если вам это нужно:
В меню «Аналитика» при необходимости можно настроить отслеживание лайков и репостов. Отрегулируйте положение значков на веб-сайте в разделе «Где отображать» :
#2
Положение счетчика «Нравится» и «Поделиться» для WordPress
Проверенные стратегии для автоматизации роста электронной торговли или SUMO — это бесплатный плагин, содержащий плавающую или статическую панель с кнопками социальных сетей.
После установки зарегистрируйтесь, чтобы активировать плагин. Введите адрес электронной почты и пароль:
После регистрации авторизуйтесь и зайдите в личный кабинет плагина. Настроить кнопки в меню «Smart Bar».
Плагин позволяет отображать кнопки пятью способами. Просмотрите параметры шаблона, выберите подходящие конфигурации и сохраните настройки.
#3
AddToAny Share Buttons
AddToAny Share Buttons имеет те же функции, что и предыдущие плагины. Разница в том, что он поддерживает более 90 социальных сетей, сообществ и сервисов. Установите плагин по стандартной схеме. Зайдите в настройки:
Настройте размер иконок, их расположение на сайте, стиль. Сохраните изменения.
Заключение
Кнопки «Нравится» и «Поделиться» позволяют пользователям делиться ссылками на ваш контент с друзьями в социальных сетях. Когда посетитель сайта нажимает кнопку «Поделиться», копируется ссылка на страницу, часть контента и изображение. Публикация создается автоматически в сети на странице личного кабинета. Кнопка «Нравится» позволяет отмечать понравившиеся материалы вне ленты социальной сети.
Упоминания в социальной сети — это путь к вашей целевой аудитории косвенным путем. Ссылки в социальных сетях подсказывают поисковой системе, что публикация сайта «Х» отмечена пользователями, а значит, контент полезен.
Кнопки устанавливаются:
вручную, путем встраивания фрагмента кода в страницы;
автоматически, с помощью плагинов.
Чтобы создать фрагмент кода для социальной сети, например Facebook, перейдите в ее конфигуратор. Задайте параметры: внешний вид иконок, размеры и нажмите на кнопку Кнопка «Получить код» . Перенести код на страницу сайта.

Эта статья является частью контрольного списка Serpstat. ход работ над конкретным проектом Инструмент содержит шаблоны с обширным списком параметров разработки проекта, куда вы также можете добавлять свои элементы и планы
Попробуйте Контрольный список сейчас
Узнайте, как получить максимальную отдачу от Serpstat
Хотите получить личную демонстрацию, пробный период или множество успешных вариантов использования?
Отправьте запрос и наш специалист свяжется с вами 😉
Оцените статью по пятибалльной шкале
Статью уже оценили 0 человек в среднем из 5
Нашли ошибку? Выберите его и нажмите Ctrl + Enter, чтобы сообщить нам
Рекомендуемые сообщения
How-To
Denys Kondak
Как проанализировать субдомены
HOW-TO
DENYS KONDAK
Как оптимизировать одностраничные сайты применения
.