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

Куда внедрять?
Какие и где взять?
  Блок Поделиться от Яндекса и панель от Pluso
  Плавающая вертикальная панель от Share42
Выборочное размещение


Upd: English version of the article: Social Media Buttons in Joomla 2.5. Share42 horizontal panel.


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

Блок "Поделиться" от Яндекса

Неплохой вариант для русскоязычного сайта. Идем на http://api.yandex.ru/share/ и настраиваем панель. В группе Набор сервисов выбираем интересующие нас соцсети. Почему-то включены только 12 сервисов, хотя на деле поддерживается 21 (включая Яндекс.Закладки), в чем можно убедится на странице документации. Как добавить остальные - чуть позже.

Теперь выберем внешний вид блока, кликнув на одном из вариантов в соответствующем меню. Скопируем содержимое раздела Код. Полученный скрипт вставляем согласно инструкции из предыдущей статьи. Чтобы добавить сервисы, не вошедшие в сгенерированный код, кликаем на линк Документация и скроллим вниз до раздела Список поддерживаемых сервисов. Я, например, зарегистрирован в LinkedIn. Нахожу его в списке, копирую ID сервиса - linkedin и добавляю к скрипту: data-yashareQuickServices="yaru, vkontakte, facebook, twitter, odnoklassniki, moimir, lj, gplus, linkedin". В результате код приобрел такой вид:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus,linkedin"></div>

Если есть желание добавить панель как перед содержимым, так и после (как вариант - интегрировать с JComments), то первую строку - ссылку на JavaScript - можно добавить один раз - перед содержимым, а сам блок DIV - перед и после.

Панель соцкнопок от Pluso.

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

На сайте производителя строим подходящий макет. Копируем сгенерированный код. Вот мой:

<script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('head')[0] || d[g]('body')[0]; h.appendChild(s); })();</script> <div class="pluso" data-options="big,square,line,horizontal,counter,theme=06" data-services="facebook,twitter,vkontakte,odnoklassniki,yandex,moimir,google,linkedin" data-background="transparent"></div>

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

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

Комментарии  

Алексей
0 # Алексей 28.08.2013 08:30
Почему то не получается не отображаются кнопки от яндекса.
Может надо отключать редактор при вставке кода? :o
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 28.08.2013 11:18
Похоже, вы вставляете код прямо в тело статьи через редактор. Здесь же описано, как вставить его в файлы шаблона статьи (см. первую статью цикла). Файл для этого надо стянуть с хоста через FTP, отредактировать и залить обратно. А вообще лучше все делать на локальном веб-сервере (Denver, OpenServer), тестить и лишь затем заливать на хост.
Ответить | Ответить с цитатой | Цитировать
Алексей
0 # Алексей 16.10.2013 14:53
А как сделать чтобы кнопки Pluso отображались во всех материалах?
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 16.10.2013 15:35
Так же, как и все остальные. Методика описана в заглавной статье цикла - ogri.me/ru/web-design-development/410-knopki-sotsialnykh-setej-v-joomla-2-5. Там разобрано, куда внедрять код кнопок, чтобы панель присутствовала в материалах (в теле статьи, или интегрировалась с комментариями).

Если же вы хотите, чтобы соцкнопки висели на любой странице сайта - почитайте, как внедрить их в index.php шаблона - вот здесь ogri.me/ru/web-design-development/417-knopki-sotsialnykh-setej-v-joomla-2-5-plavayushchaya-panel-ot-share42. Там на примере share42, но у Pluso тоже есть теперь выбор между горизонтальной и вертикальной панелями, можете прилепить ту или другую в удобном месте страницы.

Если не разберетесь, пишите - помогу. Удачи!
Ответить | Ответить с цитатой | Цитировать
ЕРА
0 # ЕРА 27.05.2014 12:32
Здравствуйте. Когда нажимаю ПОДЕЛИТЬСЯ, то отображается КЛЮЧЕВЫЕ СЛОВА, а самого материала нет. Почему? как убрать
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 28.05.2014 12:26
Навскидку: или скрипт кнопок внедрен с ошибкой, или на странице баг в javascript. Для начала проверьте, не поменяли ли скрипт разработчики кнопок.
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 29.10.2013 09:40
Здравствуй, делаю все, как ты писал в прошлой теме, но мне выдает ошибку на сайте что лишний значок мол есть в 66 строке, удалял его, пишет синтакс эрор другой...я так понял его просто нужно заменить, не подскажешь на что?

Parse error: syntax error, unexpected T_STRING in /home/enicun/enicun.com.ua/www/templates/1005003/h tml/com_content/article/default.php on line 66
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 29.10.2013 09:42
Parse error: syntax error, unexpected ' < ' in /home/enicun/enicun.com.ua/www/templates/1005003/h tml/com_content/article/default.php on line 66
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 29.10.2013 09:41
Parse error: syntax error, unexpected '
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 29.10.2013 09:42
епт половина коментария вставляется
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 29.10.2013 09:47
Вообщем вот эта ошибка у меня на сайте после вставки кода с сайта Pluso
Parse error: syntax error, unexpected ' < ' in /home/enicun/enicun.com.ua/www/templates/1005003/h tml/com_content/article/default.php on line 66
Лишней скобочки там нету, пересматривал сотню раз, просто её, по идеи, нужно чем-то заменить...только вот чем...?
Ответить | Ответить с цитатой | Цитировать
Олег
0 # Олег 29.10.2013 09:59
Шаблон тоже делал в Artiseer
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 30.10.2013 15:39
Есть пару мыслей, но зачем гадать? Пришли мне свой файл на , попытаюсь выяснить, в чем там дело.
Ответить | Ответить с цитатой | Цитировать
Алекс
0 # Алекс 26.06.2014 12:27
Здравствуйте.
Помогите разобраться, в предыдущей статье Вы писали куда вставить код в шаблоне сделаном в Артистер, у меня именно такой.
Так вот если после этой строчки
$content .= $article->event('beforeDisplayContent');
вставить



Сайт вообще работать не будет, видимо надо вставлять как то по хитрому, но Вы не указали как.
Ответить | Ответить с цитатой | Цитировать
Алекс
0 # Алекс 26.06.2014 12:28
код после слова вставить не отобразился....в общем там был код блока "Поделиться" от Яндекса.
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 26.06.2014 13:46
Алекс, доброго времени суток.

Вы не можете вставить код как есть, поскольку в вашем случае (да и в моем) скрипт страницы присваивается переменной $content. Просто добавьте в нее ваш код в строковом представлении:

$content .=
   '<div class="yashare-auto-init" ........></div>
    <script type="text/javascript" src="'.$this->baseurl.'/js/share_yaru.js" charset="utf-8"></script>';

И всё махом заработает. Вы правы, я это явно не уточнил в статье, надо будет поправить.

Кстати, если хотите постить в комментах код, заменяйте в тегах открывающую угловую скобку "<" на "& lt;" (без пробела и кавычек).
Ответить | Ответить с цитатой | Цитировать
Интернет магазин
0 # Интернет магазин 21.02.2015 07:37
это все вода! нужны кнопки "Класс"
Ответить | Ответить с цитатой | Цитировать
Ануарбек
0 # Ануарбек 21.04.2015 12:53
Цитирую ЕРА:
Здравствуйте. Когда нажимаю ПОДЕЛИТЬСЯ, то отображается КЛЮЧЕВЫЕ СЛОВА, а самого материала нет. Почему? как убрать
У меня тоже самое. скрипт правильно
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 23.04.2015 20:27
Мне трудно ответить, не видя ваш код. Скрипт самих кнопок может быть правильным, но при этом конфликтовать с другими скриптами на той же странице. Если вы нажмете ПОДЕЛИТЬСЯ на панели, помещенной мною перед текстом этой статьи в тестовых целях, - убедитесь, что все отображается как надо. Скрипт используется тот самый, что в описании.

Попробуйте на тестовой площадке отключить все остальные скрипты. Если заработает - то действительно конфликт. Включайте по одному, после какого проблема вернется - с тем и конфликтует. Если такой метод не сработает - надо копать в другом напавлении. В каком - навскидку не скажу, не поковыряв.
Ответить | Ответить с цитатой | Цитировать
Валентин
+1 # Валентин 08.05.2015 12:07
Здравствуйте, вписал в код шаблона "Блок социальных кнопок от Яндекса" на сайт но столкнулся с одной неприятностью - размером кнопок, подскажите как увеличить размер иконок социальных сетей?
Ответить | Ответить с цитатой | Цитировать
Ogri
+1 # Ogri 23.05.2015 01:43
Валентин, я с большой задержкой вам отвечаю, извините. Да и за ответ тоже заранее прошу прощения. Вам не о кнопках надо думать, а о чувстве меры. Когда я открыл ваш сайт, то получил конкретный удар по глазам. Ваши цвета - это что-то! Да и сам шаблон - тихий кошмар. Даже с учетом специфики вашего магазина. Я не эксперт, но скажу вам как потенциальный покупатель: я после первого взгляда закрыл страницу и ощутил облегчение. Извините за резкость.

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

Удачи, искренне!
Ответить | Ответить с цитатой | Цитировать
Валентин
0 # Валентин 31.12.2015 07:50
Есть еще векторные кнопки https://share.itraffic.su/
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 04.01.2016 23:26
Понравились. Надо будет потестить.
Ответить | Ответить с цитатой | Цитировать
Георгий
0 # Георгий 08.06.2016 07:32
Подскажите в какой файл надо вставить код что бы социальные кнопки были только в статьях?
Ответить | Ответить с цитатой | Цитировать
Георгий
0 # Георгий 08.06.2016 07:33
что бы отображались только в категории blog
Ответить | Ответить с цитатой | Цитировать
Ogri
0 # Ogri 08.06.2016 08:47
Георгий (или Валентин? ;), куда вставлять код соцкнопок - описано в первой статье цикла - ogri.me/ru/web-design-development/410-knopki-sotsialnykh-setej-v-joomla-2-5. Чтобы кнопки отображались только в категории 'blog', нужно добавить условие. Вначале найдите ID категории в Менеджере категорий админки. Допустим, ваш ID=10. Вставляете следующий код:

$jinput = JFactory::getApplication()->input;
$temp = $jinput->getInt('catid');
$cat_id = $temp[0] + 0;

if ($cat_id==10) {
====Код кнопок=====
}

Или воспользуйтесь функцией content_filter - см. статью ogri.me/ru/web-design-development/816-joomla-filtruem-kontent-po-materialam-kategoriyam-i-komponentam. Она позволяет создать гибкое условие по материалам, категориям и компонентам.
Ответить | Ответить с цитатой | Цитировать

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


© 2011-2017 ogri.me
Использование и перепечатка материалов сайта разрешены и приветствуются. Прямая индексируемая ссылка на используемую статью или, на худой конец, на сам сайт была бы хорошей наградой автору за его нелегкий труд.