OJS: кнопки соцсетей

В данном материале мы расскажем о том, как добавить кнопки социальных сетей в сайт на OJS (Open Journal Systems).

Реализация данной функции сделает сайт более посещаемым, а журнал более популярным в Интернете.

Для этого Вам нужно предпринять несколько шагов:

1. Выбрать один из специальных сервисов, настроить блок с кнопками и получить код;
2. Добавить полученный код в страницы сайта на OJS;
3. По желанию добавить и настроить отображение логотипа сайта.

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

Как правило, сервисы, которые предоставляют кнопки соц.сетей, не требуют регистрации, предлагают выбор платформы сайта, а также гибкий и интуитивно понятный интерфейс формирования виджета с кнопками.

• AddToAny
• AddThis
• ShareThis
• Pluso
• Share42
• Yandex

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

В качестве примера можем воспользоваться кнопками от Яндекса.

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

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir"></div>

2. Добавляем код в страницы сайта OJS

Чтобы расположить кнопки социальных сетей вверху страницы отдельной статьи на сайте, открываем файл в директории /templates/article/article.tpl и добавляем наш код после строки:

div id="authorString"><em>{$article->getAuthorString()|escape}</em></div>

Чтобы расположить кнопки социальных сетей внизу страницы отдельной статьи на сайте, в этом же файле /templates/article/article.tpl добавляем наш код после строки:

{call_hook name="Templates::Article::MoreInfo"}

Результат будет приблизительно такой:

3. Настраиваем отображение логотипа для соцсетей

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

Правильный образец:

Чтобы решить эту проблему, нужно создать изображение логотипа журнала (сайта, организации и пр.). Желательно квадрат 200х200 точек в формате PNG с название латиницей, например, «logo».

Далее нужно загрузить изображение с ПК в файлы OJS. Для этого идем: Управляющий журнала >>> Установка >>> Внешний вид журнала.

В любом из полей нажимаем кнопку «загрузить фото» (см. скриншот ниже). Загружаем с ПК наш файл.

Изображение появится в визуальном редакторе. После этого нужно или отменить действие (Ctrl + Z) или просто удалить изображение любым удобным способом. Оно уже было загружено на сервер.

Загруженное таким способом изображение в формате PNG и названием «logo» будет иметь приблизительно такой адрес: http://your-site.com/public/site/images/admin/logo.png

Далее закрываем «Внешний вид журнала» без всяких сохранений и в административной панели идем: Управляющий журнала >>> Установка >>> 1. Детали .

В пункте «1.8 Индексация для поисковых машин» находим поле «Теги пользователя» и вставляем в него следующий код, содержащий ссылку на наше изображение:

<meta property="og:image" content="http://your-site.com/public/site/images/admin/logo.png" />

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

Т.о. после загрузки изображения и добавления данного кода большинство социальных сервисов и сетей будут «подтягивать» фирменный логотип с сайта.

В конце можно (на всякий случай) очистить кэш шаблона… Для этого идем в «Администрирование сайта» и нажимаем «Очистить кэш шаблонов»…

Надеемся, данная информация будет полезной. С уважением. Участники OSU.