У кого есть есть сайт? А инстаграм? Сейчас почти у всех есть и то и другое. Публиковать посты на сайте и instagram одновременно достаточно проблематично по двум причинам: первая — писать текст, копировать, вставлять, загружать картинки сначала в инстик, а потом делать это еще раз на сайт затратно по времени, а время дорого стоит; вторая — у постов в инстаграме определенный узнаваемый стиль и повторять его с помощью CSS захочет не каждый. К тому же вам просто надоест это уже после 10-20 таких постов.

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

Первый шаг — скачать скрипт

Второй шаг — подключите скрипт на сайт

Для HostCMS нам нужно зайти в раздел Структура сайта — Макеты и выбрать нужный макет, после чего нажать на кнопку редактирования. В самом низу макета перед закрывающимся тегом body добавляем подключение скрипта. Предварительно нужно загрузить скрипт, который вы скачали в папку со скриптами, но а путь до папки будет у каждого свой (в данном примере скрипты хранятся в папке assets)

<script type="text/javascript" src="/assets/embeds.js" ></script>

Скрипт мы подключили, нужно создать информационную систему.

Шаг третий — создаём инфосистему для записей Instagram

добавление инфосистемы в HostCMS

Затем заполняем название и сохраняем. Заполнять остальные поля необязательно, потому что они не будут использоваться абсолютно — всё будет подгружаться со стороны инстаграма.

создание информационной системы для постов инстаграма

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

hostcms создаем допсвойства для инстаграма

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

hostcms допсвойство кода для инстаграма

Теперь создаём информационный элемент и в появившейся вкладке Дополнительные свойства вставляем код нужного поста. А где взять код записи видно из скриншота:

как вставлять код инстаграма в Hostcms

Кроме кода больше ничего заполнять не надо, применяем и повторяем столько раз сколько нужно постов. Предпоследний этап — поработаем с XSL.

Шаг четвертый — Добавляем XSL-шаблон для инстаграма

XSL-шаблон для встраивания постов из инстаграма будет очень простым:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

  <xsl:template match="/">
    <xsl:apply-templates select="/informationsystem"/>
  </xsl:template>
  
  <xsl:template match="/informationsystem">
    <xsl:if test="informationsystem_item">
      <div class="row">
        <xsl:apply-templates select="informationsystem_item"/>
      </div>
    </xsl:if>
  </xsl:template>
  
  <xsl:template match="informationsystem_item">
    <div class="col-xs-12 col-md-6 col-lg-6">
      <blockquote class="instagram-media" data-instgrm-captioned="true" data-instgrm-version="7" style=" background:#FFF; border:0; margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
        <a href="https://www.instagram.com/p/{property_value[tag_name='insta']/value}/" target="_blank"></a>
      </blockquote>
    </div>
  </xsl:template>
</xsl:stylesheet>

В данном случае обязательным требованием будет использовать весь тег blockquote и его внутренние теги. Обратите особое внимание на вывод дополнительного свойства, которое мы с вами добавили в предыдущем шаге property_value[tag_name=’insta’]/value. Именно благодаря выводу этого свойства скрипт понимает какой именно пост выцеплять из инстаграма.

На этом всё — пользуйтесь. Если будут вопросы по тому как встроить посты инстаграма на сайт с HostCMS или вывести ленту — пишите на почту help@nivaks-studio.ru или через форму ниже.