Интеграция социальных кнопок от uptolike.ru с Drupal. Модуль Uptolike для Drupal.

image

27.06.15
Comments 8

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

CMS Drupal занимает особенное место в своей нише. Это исключительно мощный инструмент, на базе которого можно строить самые разнообразные сайты, от банальной «визитки» до корпоративного портала.

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

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

Итак, попробуем подключить социальные кнопки Uptolike к сайту. Чтобы было интереснее, эксперимент ставим на тестовом ресурсе, где есть не только обычные данные, вроде постов или статей. Это неинтересно. Выберем что-нибудь более сложное, например, добавим модуль WebForm.

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

Код модуля Uptolike оформлен грамотно и соблюдением стандартов Drupal. Модуль разделен на отдельные подсистемы, что экономит память (зачем загружать функции администрирования при обращении к основной странице?). Многие авторы плагинов, к сожалению, об этом не думают.

JavaScript модуля кнопок занимает около 20 Кб, сам виджет загружается в асинхронном режиме, не тормозя процесс обработки страницы.

Авторы не стали изобретать велосипед и для некоторых технических функций использовали модуль Chaos tool, стандартный для современных сайтов на Drupal. С одной стороны, это означает, что появляется зависимость от внешней библиотеки, придется ставить и обновлять Ctools. С другой, без «Инструментов Мерлина» (автор Ctools известен под ником Merlin of Chaos) сегодня не обходится практически ни один проект и, скорее всего, на сайте он уже установлен.

Устанавливаем модуль Uptolike. Все как обычно: загрузили в каталог /sile/all/modules, включили в админке. Права доступа настраивать особо не надо, право там только одно, на администрирование модуля.

Есть возможность создания профилей с предварительно заданными настройками. В каждом из них можно указать кнопки для конкретных сетей (Facebook, «ВКонтакте», Twitter, «Одноклассники», Google+, Pinterest, Mail.ru, LiveJournal, LiveInternet, Evernote, «По почте» — просто отправка по электронной почте и т. д., примерно два с половиной десятка).

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

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

======================

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

Если говорить о функциональности, то в модуле Uptolike учтены специфичные для Drupal приемы. Технически, кнопки выводятся несколькими методами.

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

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

В наборе по умолчанию не выводится кнопка «По почте» (не шарит, отправляет ссылку на email), ее стоит включить.

Дополнительные функции: цитирование, кнопка «Наверх», подписка и др.

Смена визуального стиля позволяет оформить значки по вкусу.

========================

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

Кнопки на страницу можно вставить и через фильтр контента, только сначала надо настроить (Управление / Конфигурация / Работа с содержимым / Форматы текста).

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

Вставляем в текст тег [uptolike:default_preset]...

И получаем результат в виде кнопок. Мелочь, а полезно.

=====================

Интерфейс модуля переведен на несколько языков: английский, русский, украинский, немецкий, испанский, итальянский, литовский и польский.

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

И обратите внимание на интерактивную подсказку в правом блоке. Она динамически реагирует на изменение настроек, избавляя вебмастера от рутины типа «изменил-сохранил-посмотрел».

========================

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

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

Итак, пресет настроен, теперь настало время активировать его на страницах. Идем в раздел «Блоки».

Схема блоков выбранной темы (стандартная для Drupal 7 тема Bartik). В любой из регионов, выделенных желтым можно установить Uptolike.

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

Настройки доступны и в параметрах блока.

Список пресетов можно сортировать, фильтровать и т. д., ну как обычно у Drupal.

====================

Итак, пресет выбран, блок активирован, идем на страницу нашей тестовой Web-формы и… видим там полный набор кнопок. Клик по любой из них отправляет анонс ссылки в выбранную социальную сеть.

Итак, результат наших трудов. Создано два пресета, один поставлен в блок «Содержание», второй — в боковом блоке.

Кнопка «...» открывает список всех соцсетей. Ее можно выключить, помните?

=================

Единственное, к чему можно придраться в текущей версии модуля — не очень хорошо захватываются картинки и тексты со страницы. Да, парсингом контента для заметки занимается сама социальная сеть, но у вебмастера обычно есть возможность повлиять на этот процесс, задав OG-теги. Для Drupal существуют спецмодули (например, Open Graph Meta), однако эта задачка напрашивается в список функций Uptolike.

Шарим ссылку в Facebook...

А так выглядит функция цитирования.

Одним кликом цитату в сети!

=====================

Еще одна полезная возможность Uptolike — импорт кода пресета. Тем, кто имеет дело с сетями сайтов (сателлиты, спецпроекты, блоги, дорвеи — что греха таить и т. д.) знает насколько неудобно тыкаться мышкой, добавляя нужную функцию на десятке ресурсов. Режим импорта избавляет от рутины, пресет можно загрузить сразу в виде кода. При желании и некоторых навыках работы с iMacros эта задача легко автоматизируется.

Пресет можно экспортировать (и затем, естественно, импортировать). Только если это делается на одном сайте, не забывайте править название пресета и его машинное название.

Пресет можно и клонировать, тоже полезно.

======================

Статистика Uptolike доступна для просмотра непосредственно в интерфейсе модуля. Для доступа к ней нужно указать адрес электронной почты и секретный ключ (придет на указанную почту).

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

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

Но тогда нужно снова зарегистрироваться.

===================

В отчетах указано число посетителей, лайков и Share, просмотров, фолловеров — для заданной страницы или соцсети. Статистика выдается в настройках модуля, а не в стандартной подсистеме отчетов Drupal, но это не просто лог, а именно аналитический инструмент (с графиками, диаграммами), так что некоторое отступление от традиций можно простить.

Модуль Uptolike для Drupal реализован грамотно, со знанием особенностей и традиций этой CMS. Он вполне совместим с другими модулями, во всяком случае, на тестовой сайте с типичным набором модулей (CCK, Views, CTools, Token, Pathauto, ImageCache, это вот все) проблем не замечено.

Вебмастеру не придется (как бывает в Drupal) долго и мучительно тестировать плагины на совместимость между собой. Не отмечено и проблем с версиями PHP, модуль вполне уверенно живет на хостинге с PHP 5.5, виджет хорошо совместим с темами оформления, даже нестандартными.

Есть настройки пресета, а есть настройки модуля. Не путайте их. Здесь задаются параметры вывода кнопок в сущностях (материал, словарь таксономии, пользователи). Галочка «Добавить код на всех страницах» нужна, если используются фильтры контента (см. скриншоты выше).

=====================

В модуле Uptolike отлично сделана система статистики, там наглядно отображаются не только «сырые» данные, но и аналитика. С точки зрения визуального оформления придраться тоже не к чему.

По количеству социальных сетей, с которыми он совместим, Uptolike можно сравнить с плагином service_links, однако по удобству и гибкости Uptolike значительно его опережает (не говоря уже о том, что service_links занимает около 300 Кб, а Uptolike — менее 70 Кб — это важно при установке сайта на бюджетном хостинге с ограниченными ресурсами).

На моих сайтах Uptolike уже заменил виджеты, которые использовались до него.

Комментарии

Александр 05.08.15

То что искал, модуль стал отлично. Спасибо за подробную инструкцию!

Елена 27.08.15

Очень полезная статья. Только у меня 6 релиз! А Uptolike только с 7 версии( Сижу плачу( может для 6 есть модуль аналогичный?

Sipth 04.11.15

У uptolike есть на сайте настройки лайков. Они предлагают это все через сгенерированный код.
А через модуль это как то настроить можно?

Андрей 07.12.15

А чем эти кнопки лучше чем яндекскнопки?

Sipth 05.01.16

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

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

Sipth 05.01.16

интересно все что писалось потерялось...

Андрей 16.04.16

Оказывается есть готовый модуль, а я делал с нуля.

Sipth 22.04.16

Я от модуля Дупала с кнопками Uptolike отказался. какой то он не стабильный. Интегрировал их кодом через блоки.

Комментировать