Как вставить кнопки социальных сетей в материал 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
И видим что создалось переопределение.
Теперь можно открыть файл
Открыть его можно через FTP или через панель хостинга, где вам удобнее.
Шаг 2. Вставляем код, полученный из конструктора кнопок.
Теперь нужно скопировать предложенный код для блока поделиться — https://tech.yandex.ru/share/
Скопировали? Ок.
Как вы могли заметить в файле default.php содержится html код вперемешку с php.
Если вы читаете эту статью, то наверное, разбираетесь в html.
Если нет, то вот бесплатный курс >>
Примерно на 111 строке видим блок div с itemprop = articleBody
Код кнопок можно вставить перед этим блоком или после него.
Смотря где вы хотите выводить социальные кнопки.
Я создал ещё один блок div с классом my_share_buttons и поместил в него код из конструктора.
Дополнительный блок я создал чтобы им можно было управлять через CSS стили.
Получилось так:
А в статье выглядит так:
Дополнительно для блока .my_share_buttons можно добавить отступы, фон и другие стили.
Шаг 3. Проверяем работу сайта и кнопок.
Не забываем проверить работу сайта и самих кнопок.
Попробуйте поделиться статьёй в своей соц.сети.
Таким образом мы вставили социальные кнпоки, без использования всяких модулей и плагинов.
Теперь Яндекс.Метрика будет учитывать клики по этим кнопкам и мы можем видеть эту статистику.
Примечание: вставлять кнопки лучше на сайте, который размещён на хостинге.
На локалке они будут долго загружаться.
Также посмотрите как вставить социальные кнопки в карточку товара JoomShopping.
Полезный модуль кнопок соцсетей.
Возможно вам будет интересен модуль для вывода кнопок социальных сетей.
Он бесплатный, поэтому скачивайте и пользуйтесь.
Спасибо за внимание.
как установить ссылку на соцсеть
Один из удачных инструментов улучшения поискового продвижения — это кнопки социальных сетей для вашего сайта. Виджеты соцсетей позволят посетителю веб-страницы сохранять и взаимодействовать с информацией в удобном ему месте.
Прежде чем узнать как устанавливать такие виджеты, рассмотрим их назначения:
— “Like”/”Мне нравится” — привычные значки, выражающие оценку человека, его интерес к информации на сайте. Отмеченная такой кнопкой публикация становится рекомендованной другим пользователям соответствующей сети = потенциально увеличивает вашу аудиторию.
— «Share»/“Поделиться” — кнопка репоста, обычно идет вместе с “Like” и дает возможность рассказать другим людям о вашем проекте. За ней закреплена ссылка на заинтересовавшую посетителя статью или продукт. Переход по ссылке отмечают поисковые системы, сайт прибавляет в «полезности» и продвигается выше по поиску.
— “Подписаться” — скрывает ссылку на страницу аккаунта вашего проекта в социальной сети, где посетитель сайта может следить за новостями, а также связаться с вами в удобном для него мессенджере.
На что обратить внимание при установке
— Разместить виджеты социальных сетей удобнее в конце статьи или описания продукта.
Еще один вариант размещения — плавающие сбоку иконки, но их надо лаконично соотнести с дизайном сайта, чтобы избежать навязчивости при просмотра контента.
— Кнопки должны быть хорошо заметны и узнаваемы. Размер рекомендуем установить внутри диапазона от 10*10 до 40*40 пикселей. Не стоит перегружать их анимационными эффектами: миганием или неожиданным появлением. Можно добавить плавное изменение цвета при наведении курсора.
— Не выбирайте большое количество значков, оставьте ссылки популярных для вашей аудитории социальных сетей (Instagram, Facebook, YouTube, “ВКонтакте”, WhatsApp, Twitter).
Как установить виджеты
1. Использовать HTML-код. Так отдельно настраивается кнопка каждой социальной сети. Код генерируется в разделе для разработчиков отдельно взятой сети и вставляется в HTML-коды страниц сайта. Вы получаете код от выбранной сети, без лишних скриптов, но требующий впоследствии обработки с помощью CSS.
2. Использовать сервисы конструкторы.
Они позволяют не тратить время на генерацию отдельного кода социальной кнопки, а предлагают массив из нескольких соцсетей.
Наиболее удобные на наш взгляд:
— Сервис Hipolink. Подходит для работы с мини-сайтами, предусматривающий добавление кнопок социальных сетей. Оптимальный вариант к современным проектам, основывающихся преимущественно в Инстаграме — блоги, интернет-магазины. Иконки мессенджеров и других соцсетей при любом наборе адаптированы под общий дизайн сайта, а значит точно будут выглядеть заметно, но ненавязчиво.
Подробнее об установке читайте здесь.
— Блок “Поделиться” от Яндекса. Сервис генерирует готовые элементы кода добавления стандартных кнопок “Поделиться” различных соцсетей. Эти коды определяют внешний вид иконок и самой панели репостинга. Лаконично и без излишеств. Дополнение — функция счетчика, позволяющая отслеживать количество поделившихся публикацией.
— Конструктор uSocial. Русскоязычный сервис обладающий широким функционалом. Содержит широкий выбор настроек внешнего вида значков “Like”, “Share”, имеет дополнительную кнопку “Наверх”, а также функцию “Социальный замок”, которая скрывает нужную ссылку до выполнения условия “Поделиться”.
Генератор uSocial содержит личный кабинет, сохраняющий предыдущие настройки наборов кнопок с возможностью дальнейшего редактирования.
3. Вариант без самостоятельного редактирования HTML-кода — использование плагинов. При работе с WordPress для установки расширения социальных виджетов в разделе администратора нажмите “Плагин” → “Добавить новый” и выберите подходящий на вашу веб-страницу, настройте внешний вид виджета, расположение или отсутствие на выбранной странице сайта панели с кнопками “Share”, “Like”.
Теперь вы знаете способы установки социальных кнопок и сможете улучшить продвижения своего сайта.
Как добавить кнопки «Поделиться» в социальных сетях на свой веб-сайт
Кнопки «Поделиться в социальных сетях» — это кнопки для различных платформ социальных сетей, таких как Facebook, Instagram и Twitter, которые вы добавляете на свой веб-сайт, чтобы люди могли делиться вашими страницу в соответствующем аккаунте в социальной сети. По сути, это ссылки в социальных сетях, которые приводят к увеличению трафика вашего веб-сайта, поскольку, надеюсь, вы можете привлечь больше клиентов, когда люди будут делиться вашим контентом.
По сути, кнопки социальных сетей позволяют читателю легко делиться вашим контентом на своих платформах социальных сетей. Ключевая задача кнопок — облегчить акт обмена. Если бы читателю было тяжело поделиться вашим контентом, который ему понравился, он, скорее всего, не поделился бы им. Поэтому кнопки «Поделиться» в социальных сетях — отличная возможность добавить на свой сайт.
Существует три разных типа кнопок социальных сетей. Это:
- Кнопка общего доступа
В этой статье основное внимание будет уделено кнопкам «Поделиться» в социальных сетях, которые следует добавить на ваш веб-сайт, чтобы поделиться своими продуктами или статьями с остальным миром.
- Кнопка следования
Кнопки отслеживания в социальных сетях также являются отличной функцией для добавления на ваш веб-сайт. Это позволяет читателю легко следить за вами в социальных сетях.
- Кнопка «Нравится»
Как и две предыдущие кнопки, кнопки социальных сетей также являются отличной функцией; читатели могут легко оценить ваш контент, что приведет к увеличению онлайн-трафика.
Чем больше лайков вы получите от того, что вы загрузили, тем больше вероятность того, что вы получите новых клиентов. Думайте об этом как о процессе «сарафанного радио».
Желательно, в конце статьи можно добавить кнопки соцсетей.
Сегодня социальные сети стали одним из самых популярных способов продвижения вашего бренда. Если вы хотите предложить услуги на своем веб-сайте или написали отличный контент, предоставление читателям возможности поделиться вашим контентом — отличный способ продвижения вашего имиджа.
Например, когда посетитель вашего веб-сайта приобрел товар, вы можете добавить кнопку «Поделиться» рядом с подтверждением его заказа. Таким образом, они могут поделиться тем, что они купили, на своих платформах в социальных сетях или даже со своими друзьями и семьей. Это увеличивает ваш онлайн-охват, что только положительно.
Давайте приступим к добавлению кнопок обмена в социальных сетях на ваш сайт.
В WordPress есть различные плагины, которые вы можете использовать.
- Кнопки «Поделиться» от AddThis. У этого плагина более нескольких сотен тысяч пользователей и хороший рейтинг.
- Shareaholic. У этого плагина более нескольких сотен тысяч пользователей и хороший рейтинг.
- Реактивный ранец. Jetpack — это плагин с множеством функций, в том числе позволяющий добавлять кнопки на ваш сайт.
- Компаньон Орбит Фокс. Этот плагин имеет более 20 кнопок обмена в социальных сетях, которые вы можете выбрать.
- Социальная вилка. Бесплатный плагин, который позволит вам настроить ваши кнопки.
Теперь, когда вы выбрали плагин, который лучше всего соответствует вашим потребностям, давайте начнем добавлять его в ваш WordPress.
Чтобы лучше понять процесс установки плагина, мы опишем и проиллюстрируем шаги. В этом примере мы выберем кнопки «Поделиться» плагина AddThis.
- Установить
- Войдите в свою панель управления WordPress.
- Перейти в меню навигации.
- Выберите плагины и найдите «Поделиться кнопками от Addthis».
- Установите плагин и нажмите «Активировать».
- Регистрация
После активации плагина вам нужно будет войти в свою учетную запись AddThis. Если у вас его еще нет, вы можете просто создать учетную запись. Войдя в систему, вы получите доступ ко всему набору инструментов AddThis; вы можете, конечно, пропустить эту часть, если вас интересуют только функции кнопок общего доступа.
- Добавить это
- После того, как вы вошли в систему, вернитесь к панели навигации панели управления и нажмите на только что установленный плагин Addthis.
- Щелкните вкладку «Кнопка общего доступа» на вкладке «Добавить это».
- Оказавшись там, нажмите «Добавить новый» и выберите, какой стиль кнопок общего доступа вы хотите активировать. Вы можете выбрать между боковой панелью и встроенной. С боковой панелью ваши кнопки плавают на вашем веб-сайте и будут следовать за вашими пользователями, когда они прокручивают вашу страницу, тогда как встроенные могут быть где угодно на странице, вверху, внизу — на ваше усмотрение.
Вы можете выбрать между боковой панелью и встроенной. С боковой панелью ваши кнопки плавают на вашем веб-сайте и будут следовать за вашими пользователями, когда они прокручивают вашу страницу, тогда как встроенные могут быть где угодно на странице, вверху, внизу — на ваше усмотрение.- Выбрать
Выбрав тип стиля, который вы хотите использовать на своем веб-сайте, выберите тип настроек, которые вы хотите использовать. Например, выберите между различными типами платформ социальных сетей, которые вы хотите включить, положением кнопок «Поделиться» на рабочем столе и мобильном телефоне, стилем и т. д.
Кроме того, вы также можете выбрать, где должны располагаться кнопки появляться. На вашей домашней странице? Или по конкретной статье? Твой выбор.
- Опубликовать
Теперь вы готовы поделиться всеми своими продуктами, услугами и/или статьями со всем миром.
Как здорово!
Если вы используете Конструктор веб-сайтов от one.com, очень легко разрешить людям делиться вашим контентом. Конструктор веб-сайтов предлагает социальные ссылки, где вы можете указать ссылку на страницу в социальной сети. Вы можете связать свой контент с лентой Facebook или Instagram. Кроме того, вы можете связать свой контент со страницей Facebook с баннерами, логотипом, кнопкой «Нравится», кнопкой «Поделиться» и новейшими сообщениями.
Начало работы
5 лучших стратегий размещения кнопок социальных сетей
5 стратегий и методов, которые вы должны учитывать при размещении кнопок социальных сетей в своем блоге или на веб-сайте.
По мере того, как социальные сети продолжают расти, маркетологи, блоггеры и компании экспериментируют с различными способами усиления своих маркетинговых усилий с помощью кнопок и профилей социальных сетей.
Нет никаких сомнений в том, что предоставление простого механизма для пользователей, клиентов и читателей для обмена вашим контентом может определенно увеличить доступность вашего блога или веб-сайта.
Знание некоторых кнопок социальных сетей, которые можно и нельзя делать, повысит ваши шансы на успех. Рассмотрите следующие стратегии, прежде чем принять решение о плане действий для своего блога или веб-сайта.
5 лучших стратегий размещения кнопок социальных сетей:
1. Используйте узнаваемые значки кнопок
Убедитесь, что кнопки и значки, которые вы используете для представления различных социальных сетей, узнаваемы. Если вы только начинаете, вероятно, лучше всего использовать официальные кнопки «Поделиться», предоставляемые каждой конкретной социальной сетью, такие как официальные кнопки Facebook и официальные кнопки Twitter.
Эти кнопки будут легко узнаваемы вашими читателями — повысьте вероятность того, что они поделятся вашим контентом.
Использование настраиваемых кнопок социальных сетей может работать, если все сделано правильно. Важно убедиться, что создаваемые вами кнопки узнаваемы зрителями.
Например, вы можете унифицировать цвета кнопок, но сохранить логотип каждой сети, как это сделано в блоге WordStream:
Пользовательские кнопки общего доступа могут помочь придать вашему сайту более профессиональный вид, если все сделано правильно.
Это баланс между персонализацией и узнаваемостью.
2. Разместите кнопки социальных сетей рядом с основной частью контента
Эта стратегия может показаться очевидной, но если ее игнорировать, она может серьезно помешать успеху вашей кампании по распространению в социальных сетях. Убедитесь, что ваши социальные кнопки находятся близко к основной части вашего контента. Размещение социальных кнопок в темных углах вашего блога не принесет желаемых результатов.
Один из способов добиться этого — использовать фиксированный заголовок или плавающую панель. Эти элементы будут по-прежнему оставаться фиксированными, когда пользователь прокручивает страницу вниз, поэтому параметры обмена в социальных сетях всегда видны пользователю.
У этой стратегии есть свои преимущества и недостатки. Если все сделано со вкусом, это может стать очень приятной особенностью вашего сайта.
С другой стороны, эти элементы могут замедлять загрузку страницы и в некоторых ситуациях могут показаться пользователю навязчивыми.
Не делайте кнопки «Поделиться» слишком большими при использовании этой стратегии, иначе они могут отвлекать от вашего контента. Также рекомендуется убедиться, что различные кнопки имеют одинаковый размер и форму при использовании этого метода — это будет выглядеть намного чище для ваших читателей.
Лучше всего делать фиксированные заголовки простыми с помощью CSS, а не с помощью плагинов или JavaScript.
Если вы не готовы использовать фиксированный заголовок или плавающую панель, лучше всего разместить кнопки социальных сетей в верхней части вашего контента. Это гарантирует, что читатель не пропустит их, даже если он не дойдет до конца страницы.
Если пользователь решит активно делиться вашим контентом, он, скорее всего, посмотрит вверху и внизу вашей страницы, чтобы найти варианты обмена, прежде чем отказаться.
При этом размещать кнопки общего доступа внизу страницы — неплохая идея — вы просто рискуете, что пользователь никогда их не увидит.
Вы также можете подумать о размещении кнопок как вверху, так и внизу вашего контента.
Это сделает ваши кнопки общего доступа видимыми на странице и их будет легко найти.
Однако при этом следует соблюдать осторожность, поскольку, если они слишком большие или заметные, они могут отвлекать пользователя. Также может показаться, что вы отчаянно нуждаетесь в социальных сетях, а не в том, что вы хотите, чтобы ваши пользователи думали.
Чтобы быть в безопасности, социальные кнопки в верхней части вашего контента, вероятно, будут правильным решением, пока вы не разработаете красивый фиксированный заголовок или плавающую панель для своего сайта.
3. Выделяйте контент, который нравится другим людям
Чем больше лайков или твитов на Facebook получают ваши статьи, тем больше вероятность того, что другие читатели сочтут ваш контент достойным публикации.
Зная это, может показаться хорошей идеей отображать счетчики рядом с вашими кнопками общего доступа, чтобы новые читатели могли видеть, сколько раз вашим контентом делились в прошлом.
Эта стратегия может сработать, но также важно помнить, что некоторые пользователи могут судить о качестве статьи до того, как прочтут ее, основываясь исключительно на количестве полученных ею отметок «Нравится» в Facebook.
Если ваш блог новый, и вашим контентом еще мало делятся, вероятно, лучше скрыть счетчики, пока вы не наберете больше социальной поддержки.
Один из способов решить эту проблему — отображать счетчики репостов только после того, как сообщение получило минимальное количество репостов. Например, счетчик репостов не будет отображаться до тех пор, пока пост не наберет 50 лайков / репостов в Facebook.
Существует ряд плагинов, которые могут помочь вам реализовать это в зависимости от того, какую систему управления контентом вы используете.
4. Отдайте предпочтение социальным сетям
Может возникнуть соблазн разместить ваши статьи с кнопками общего доступа на как можно большем количестве социальных сайтов. Это, однако, может быть ошеломляющим и запутанным для пользователя.
Лучше всего выбрать 4-5 известных сетей, с которыми ваши пользователи, скорее всего, будут связаны. Есть несколько очевидных — Facebook, Twitter, Google+ и LinkedIn.
Помимо этих 4, вы можете рассмотреть возможность добавления кнопки отправки электронной почты, Reddit, StumbleUpon или другой сети, связанной с вашим блогом или веб-сайтом.
Некоторые подключаемые модули, такие как Share by Sumo, автоматически отображают ваши кнопки общего доступа в том порядке, в котором сеть уже публиковала ваш контент чаще всего. Это хороший способ подчеркнуть, сколько пользователей делятся вашим контентом, но делает ваш сайт немного более непоследовательным, если пользователи собираются просматривать несколько страниц.
5. Поддерживайте чистоту и простоту
Существует множество вариантов размещения кнопок социальных сетей в вашем блоге или на веб-сайте.
Можно легко переусердствовать, в результате чего скорость загрузки вашей страницы снизится, а ваши пользователи будут разочарованы и сбиты с толку.
Помните, что вы хотите, чтобы ваши пользователи знали о кнопках обмена на вашем веб-сайте, но вы по-прежнему хотите, чтобы ваш контент был в центре внимания.
Плагины для обмена в социальных сетях могут показаться отличной идеей, но они являются распространенной причиной проблем со временем загрузки страницы.