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

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

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

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

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

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

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

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

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

<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

Для добавления кода Вам понадобится доступ на FTP-сервер, где хранятся файлы сайта.

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

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

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

{call_hook name="Templates::Article::MoreInfo"}
Чтобы кнопки не «прилипали» к верхним или нижним элементам сайта, например, именам авторов, нужно добавить перед вставляемым кодом и/или после него тег <br> .
Код социальных кнопок можно вставить одновременно внизу и вверху страницы отдельной научной статьи.

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

soc_icons2

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

Управление журналом >>> Установка >>> 5. Внешний вид журнала >>> 5.4 Нижний колонтитул страницы журнала с помощью кнопки «HTML». Более детально см. здесь.

Еще один способ отобразить код на всех страницах сайта — добавить его в файлы шаблона, которые отвечают за «шапку» сайта templates/common/header.tpl и «подвал» сайта templates/common/footer.tpl. Дополнительные файлы шаблона также можно найти в директории: lib/pkp/templates/common/ … место отображения Вы можете выбрать на свое усмотрение.

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

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

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

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

soc_icons3

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

logo

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

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

arrow_01

Изображение появится в визуальном редакторе. После этого нужно или отменить действие (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" />

soc_icons4

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

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

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

addthis_23


Надеемся, данная информация будет полезной.