Добавление безопасных кнопок социальных сетей в материалы Joomla и товары Virtuemart

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

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

Когда я обновлял сайт wedal.ru, кнопки социальных сетей, которые присутствовали на страницах с материалами, утерялись. Из-за перехода сайта на Seblod, полностью изменились макеты страниц материалов и ранее интегрированные кнопки были потеряны.

Я некоторое время думал: «Стоит ли восстанавливать кнопки социальных сетей?». В итоге пришел к выводу: да, стоит. «Почему?» – спросите вы. В первую очередь, как ни странно, для себя. Для сайта wedal.ru есть отдельные профили Вконтакте и в других социальных сетях. Группу Вконтакте я не создаю, поскольку боюсь, что не буду успевать следить за ней, а вот профиль в самый раз. Если вы не хотите подписываться на новые выпуски по Email, то можете просто подать заявку в друзья, и получать новые статье в ленте новостей Вконтакте. Думаю, некоторым людям так удобнее.

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

Или другой вариант: вы – читатель. Вам понравилась статья, и вы не хотите ее потерять. Раньше мы бы добавили статью в закладки браузера или в социальные закладки. Сегодня проще добавить анонс статьи себе на стену в одной из социальных сетей. У многих людей стены как раз и играют роль закладок. Кроме того, статья, которую пользователь добавить на стену, используя социальные кнопки, автоматически показывается в ленте  всех его друзей (по крайней мере, во Вконтакте именно так), а это значит, что анонс увидит большее число людей. Кого-то он может заинтересовать, и, вуаля, к вам на сайт идут новые посетители.

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

Недостатки социальных кнопок для сайта.

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

Второй недостаток: вопрос безопасности. Сейчас развелось очень много сервисов, позволяющих интегрировать кнопки социальных сетей на сайт «буквально в пару кликов». Вы выбираете нужные для интеграции кнопки, после чего получаете готовый скрипт. Чаще всего этот скрипт обращается на сайт сервиса, через который уже происходит взаимодействие с социальными сетями. Какую информацию он собирает и передает? И главное, за счет чего существует сервис? Часто данные о посетителях, использующих кнопки таких сервисов у себя на сайте, собираются и продаются заинтересованным лицам. Репутация же может пострадать ваша.

«Какие кнопки социальных сетей выбрать?» – вот основной вопрос, к которому мы приходим.

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

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

«Пользователь понимает и соглашается с тем, что блок, с момента, установленного п. 2.2. Условий, собирает анонимные и обезличенные (без привязки к персональным данным посетителей сайта пользователя) данные о посещениях сайта Пользователя, а также анонимные и обезличенные данные о самом сайте Пользователя, и в автоматическом режиме передает их Яндексу для хранения обобщенной статистической информации, доступной для дальнейшего использования Яндексу в его собственных целях.»

Вообще, есть у меня подозрения, что любой скрипт от Яндекса, интегрированный на сайт (Директ, Метрика, Карты), собирает всё, что только может собрать. Такие данные могут, как помочь улучшить позиции сайта, так и подвести его под фильтры поисковой системы. Всё зависит от качества сайта. Что-то после прочтения этого пункта условий желание использовать кнопки от Яндекса лично у меня пропало.

Что в итоге имеем? Нам нужен скрипт социальных кнопок, который:

  • Загружается асинхронно
  • Не передает данные посторонним сервисам
  • Позволяет выбрать социальные кнопки по желанию
  • Позволят красиво отображать социальные кнопки на сайте

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

Для параноиков: исходный код Social Likes полностью открыт. Вы можете знать обо всем, что он делает.

Social Likes предоставляет возможность разместить на сайте кнопки:

buttons

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

Интеграция Social Likes в Joomla.

Интеграция Social Likes очень простая и состоит из двух этапов:

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

Если эти пункты кажутся сложными, спешу успокоить: все очень просто. Идем по шагам.

Шаг 1. Загрузка файлов на сервер.

В архиве, который вы скачаете со страницы конструктора, будет 3 файла:

  • index.html – содержит код кнопок
  • social-likes.min.js – содержит скрипты кнопок
  • social-likes_classic.css – содержит стили оформления кнопок

Файлы social-likes.min.js и social-likes_classic.css мы должны поместить в каталоги templates/ваш_шаблон/js/ и templates/ваш_шаблон/css/. Если каталогов css или js нет в папке с используемым вами шаблоном Joomla, просто создайте их.

На этом первый шаг закончен. Вроде несложно?)

Шаг 2. Подключение файлов и добавление кода кнопок.

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

Мы объединим код кнопок и код подключения файлов в общий код.

Этот код будет следующим:

<link rel="stylesheet" href="/templates/ВАШ_ШАБЛОН/css/social-likes_flat.css">
<script src="/templates/ВАШ_ШАБЛОН/js/social-likes.min.js"></script>

<div class="social-likes social-likes_light">                    
	<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
	<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
	<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
	<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
	<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Весь код, кроме первых двух строчек вы должны взять из файла index.html, который будет в скачанном архиве, но не из примера кода выше! Также обратите внимание на название CSS-файла в первой строчке. Его название в архиве может быть другим, в зависимости от того стиля оформления, который вы выбрали в конструкторе. Название этого файла в коде и на сервере, куда он был загружен, должны совпадать!

Еще одна важная особенность! В используемом шаблоне Joomla должен быть подключен JS-фреймворк jQuery. Если у вас Joomla 3+, то практически наверняка он уже подключен.

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

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

Если вы хотите добавить социальные кнопки в материал Joomla, то вам нужно поместить данный код в макет материала Joomla. Для этого файл:

components/com_content/views/article/tmpl/default.php

нужно скопировать в:

templates/ваш_шаблон/html/com_content/article/

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

 

<?php echo $this->item->text; ?>

 

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

Добавление социальных кнопок в товар Virtuemart 2 - 3+

Если вы хотите добавить социальные кнопки в товар Virtuemart, то вам нужно поместить данный код в макет товара Virtuemart. Для этого файл:

components/com_virtuemart/views/productdetails/tmpl/default.php

нужно скопировать в:

templates/ваш_шаблон/html/com_ virtuemart/productdetails/

и в скопированном файле подобрать место, в которое вы хотели бы вставить социальные кнопки по аналогии с тем, как это описано для материала Joomla.

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartY_77 19.07.2017 16:24
Подскажите пожалуйста, как вывести Extra Vote как у вас снизу материала и сверху?
Можно было бы сделать поля и выводить в них, но если вставлять {mainvote} Tag не в материал то он не превращается в звездочки.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 27.07.2017 06:05
Y_77, да, через {mainvote}. Только здесь используется SEBLOD и все немного по-другому. Но вообще, теоретически, это должно работать и через дополнительные поля. Вам нужно поле редактора в Joomla 3.7. Важно, чтобы оно обрабатывалось плагинами. В нем пишите {mainvote}, выводите на страницу материала под контентом. Должно работать. Попробуйте.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartY_777 03.08.2017 13:16
К сожалению не отображает. Вот как я настроил поле:

Отображает просто Звезды: {mainvote}
Ответить | Ответить с цитатой | Цитировать
0 # Проблема с FacebookZenMan 03.11.2016 17:28
Спасибо за отличную статью, все получилось но есть одна проблема. На Facebook добавляет заголовок статьи и текст из мета-тег description для сайта. Не подскажите в чем проблема? Joomla 3.6.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Проблема с FacebookWedal 05.11.2016 06:21
ZenMan, а в чем проблема? По-моему, так и должно быть.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartIlya 19.09.2016 13:10
Спасибо !
Ответить | Ответить с цитатой | Цитировать
0 # Метрика и кнопкиКсения 23.05.2016 08:22
Виталий, здравствуйте! А Вы никогда не прикручивали цели Яндекс Метрики к этим кнопкам? У меня вот что-то не выходит)) А очень бы хотелось считать количество шеров. Спасибо)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Метрика и кнопкиWedal 24.05.2016 05:44
Ксения, так количество же показывается рядом с кнопкой?
Ответить | Ответить с цитатой | Цитировать
0 # Метрика на кнопкахКсения 24.05.2016 10:31
Виталий, если страниц с десяток, тогда, конечно, можно ручками это все смотреть, но с бОльшим количеством страниц возникают проблемы. Да и для разного рода анализов сайта иметь такую статистику полезно. Пока мне удалось заставить мерять количество щелчков по твиттерной кнопке (и, кстати, апи твиттера не поддерживает нынче показ количества щелчков, т.е. возле иконки они не отображаются и узнать количество поделившихся другим-то путем кроме сторонней статистики и невозможно), остальное еще в стадии "научного тыкания". Собственно вопрос в модификации файла social-likes.min.js и к прикручиванию в нужное место события onclick. Но поскольку я в js чуть меньше чем полный ноль, то испросила помощи в надежде,ч то либо Вы либо кто-то из Ваших читателей решал уже эту проблему :)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Метрика на кнопкахWedal 25.05.2016 05:26
Ксения, ваши доводы разумные. У меня не было такой задачи. Вы можете попробовать обратиться к разработчику Social Likes: https://github.com/sapegin . Он, я так понимаю, говорит на русском.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartОлег_с_огорода 31.03.2016 06:18
если добавляю код в уже существующий файл default.php, то сайт падает
пока всунул код в модуль - одно неудобство, что нужно его(модуль) добавлять каждый раз в статью
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 01.04.2016 05:53
Олег, если сайт "падает", значит некорректно вставляете код. Смотрите при вставки внимательно. Скорее всего вы просто где-то нарушили открывающиеся и закрывающиеся теги php.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartОлег_с_огорода 28.03.2016 15:47
Добрый день! все делаю как вы и говорили, но когда переношу файл default из tpl в папку с шаблоном, то в статьях пропадает фон материала, или как правильно сказать - не знаю, ну фон на котором статья публикуется, становится прозрачным...
вот ссылка сайта: http://ogorod777.ru
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 29.03.2016 04:45
Олег, когда вы переносите этот файл, вы заменяете уже существующий или он добавляется без замены?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartОлег_с_огорода 30.03.2016 05:45
заменяется, вот с него код:
// include config and layout
$base = dirname(dirname(dirname(__FILE__)));
include($base.'/config.php');
include($warp['path']->path('layouts:'.preg_replace('/'.preg_quote($base, '/').'/', '', __FILE__, 1)));
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 31.03.2016 04:44
Олег, значит в вашем шаблоне уже переопределен этот макет. Вам не нужно заменять файл, а нужно добавить код социальных кнопок в уже существующий. Тогда описанной проблемы не будет.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 11.03.2016 05:03
Dina, я не совсем понял ваш вопрос. Вообще, при нажатии на кнопку скрипт сам определяет адрес текущей страницы и ее заголовок для передачи в социальную сеть. Т.е. по умолчанию ничего указывать не нужно. Если же вы хотите, чтобы при нажатии кнопки на странице "А" в социальную сеть добавлялась страница "Б", то здесь как раз можно указать адрес этой страницы. Это актуально, если вы хотите, чтобы с любой страницы нажатие кнопки постило в социальную сеть главную страницу сайта.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartDina 11.03.2016 09:17
Я поняла, спасибо. Теперь у меня два вопроса :-) :
1. Для Пинтереста конструктор запрашивает url картинки. То есть для кнопки Пинтереста все-таки нужно указывать каждый раз новый url картинки, которую хотим там расшарить?
2. когда я начала копировать файл default.php из components/com_content/views/article/tmpl/ в templates/ваш_шаблон/html/com_content/article/, я обнаружила что там уже есть свой default.php. Если я его из папки компонентов перепишу в папку шаблона, ничего страшного не произойдет? на мой дилетантский взляд файлы идентичные. В итоге я не стала переписывать, добавила кнопки в emplates/ваш_шаблон/html/com_content/article/default.php, а css & js файлы в index.php своего шаблона (потому что в дефолтный файл совсем непонятно где прописывать стили и скрипты. И у меня теперь соц кнопки только на главной странице, а не на страницах статей :-( Help! :-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 14.03.2016 04:25
Dina,
1) Про Пинтерест ничего сказать не могу - никогда не подключал его.
2) Если файл макета в шаблоне уже существует, заменять его не нужно, а нужно добавить код кнопок в уже существующий файл.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartDina 24.03.2016 18:58
Эх, все сделала, как вы сказали. Пинтерест не работает. Я бы еще погрешила на себя, но с Яндексом была та же беда. И остальные кнопки тоже срабатывают через раз: то картинка не подхватывается, то предыдущая страница шарится (я пробовала расшарить в разных сетях разные страницы, скрипт начал подхватывать картинки с третьей попытки, а твиттер шарил предыдущие страницы). Придется сдаваться всяким сервисам, которые собирают информацию! если они при этом еще и логин через соцсети предлагают, то у меня не останется против них аргументов. Вы не планируете писать о логинах через соцсети? ;-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 25.03.2016 04:06
Цитата:
Вы не планируете писать о логинах через соцсети?
Dina, хорошая идея. Вполне может быть.
Ответить | Ответить с цитатой | Цитировать
0 # Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartDina 10.03.2016 14:37
Спасибо за статью! Начала внедрять и тут возник вопрос: для каждой страницы, на которую я хочу добавлять эти иконки, нужен отдельно сконструированный набор иконок? Меня смутили окна типа: "Адрес страницы" (если отличается от адреса страницы, где размещены кнопки), "Название" и URL для Пинтереста. То есть фактически если я хочу кнопку Пинтереста на всех товарах магазина, мне придется заново ее создавать... Как и все остальные?
Такая же загвоздка была с кнопками Яндекса. Ну, помимо безопасности, конечно ;-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartНаталья070682 29.02.2016 08:12
Здравствуйте,простите за глупый вопрос.Но я чайник в этом деле...не могу понять ГДЕ находятся эти файлы-
"...Если вы хотите добавить социальные кнопки в товар Virtuemart, то вам нужно поместить данный код в макет товара Virtuemart. Для этого файл:

components/com_virtuemart/views/productdetails/tmpl/default.php

нужно скопировать в:

templates/ваш_шаблон/html/com_ virtuemart/productdetails/
спасибо
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 01.03.2016 04:58
Наталья, файлы в файловой системе Joomla, начиная от корня. Т.е. в корне сайте есть каталоги components и templates, а дальше идете по указанным путям.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartMiheich 24.02.2016 13:54
Красивые кнопки Спасибо!
Я сейчас использую https://share.pluso.ru/, собирают они данные о посетителях?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары Virtuemartkkaazzoo 24.02.2016 17:02
Собирают
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление безопасных кнопок социальных сетей в материалы Joomla и товары VirtuemartWedal 25.02.2016 04:22
Miheich, у них в пользовательском соглашении написано:
Цитата:
3.3. Правообладатель при условии сохранения надлежащего выполнения Сервисами своих основных функций вправе одновременно выборочно направлять конечных пользователей Сервисов по адресам партнеров.
Ответить | Ответить с цитатой | Цитировать

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх