Инструкция по установке Relap.io

  • Установка виджета
  • Установка виджета с помощью CSS селекторов
  • Инструкция по установке виджета-вставки
    • Перед установкой виджета проверьте, есть ли у вас OG:image, иначе может возникнуть проблема с отображением картинок.

    Для определения заголовка, описания и картинок, которые показываются в блоке, мы используем Open Graph Protocol (OG)

    Ruogp.me

    Протокол очень популярный и используется для определения названия/картинки/ и тому подобного при шэйринге страниц в социальных сетях.

    Мы узнаем о том, какую картинку показывать в рекомендациях из тэга og:image

    <meta property="og:image" content="http://сайт/абсолютный/путь/до/картинки.jpg"/>

    Важно! Не устанавливайте релап-скрипт (head.js) на те страницы, которые не должны попадать в рекомендации. 

    Установка проходит на Relap.io.

    После регистрации на сайте:

    1. Впишите ваш домен в соответствующую форму в личном кабинете:

    2. Вставьте Relap-скрипт внутрь тега <head></heаd>:

    Важно! Не устанавливайте код виджета на главную страницу, страницы разделов, контакты и тп. Это приводит к некорректному отображению материалов в блоке.

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

    4. Выбрав нужный домен, добавьте виджет. Затем он появится чуть ниже в списке добавленных:

    5.Запустите виджет:

    Если вы хотите установить стандартный или боковой виджет, то:

    6. Зайдите в настройки виджета:

    7. Скопируйте якорный код для вставки и вставьте его уже непосредственно туда, где хочется, чтобы появился виджет:

    Удаление страниц из виджетов:

    Если во время установки виджета head.js попал на те страницы, которые не нужно отображать в рекомендациях, вам необходимо поставить на них исключающий мета-тег  <meta property="relap:article" content="false">, после этого сайт переиндексируется и данные урлы пропадут из выдачи. 

    Инструкция по работе с селекторами:

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

    Основные виды селекторов:

    1) по имени тега

    Селектор равен названию тега. Т.е. если ищем элемент с тегом <article>, то селектор будет:  article

    Подробнее о селекторах здесь  

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

    Рассмотрим ситуацию. На странице существует такой html код: 
    <p>
<body>
<article id="post">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
es. In malesuada efficitur massa, vel consectetur felis rhoncus rutrum. Aliquam feugiat scelerisque aliquet
</p>
<p>
Duis gravida odio a mauris rhoncus, ac fermentum tellus auctor. Proin vitae viverra ipsum, eu interdum mauris.
llus mollis mauris tempus vestibulum. Curabitur id condimentum nisi. Curabitur laoreet luctus metus
</p>
<p>
Curabitur varius nulla justo, non dictum erat sagittis a. Donec ac cursus mi. Aenean luctus nibh vel magna congue imperdiet.
t mauris interdum, et iaculis diam interdum. Etiam at velit tristique, pellentesque turpis nec, sodales elit. 
pis et mi accumsan condimentum. Vivamus id malesuada nunc, ut tincidunt augue. 
</p>
<p>
Nullam convallis suscipit leo vitae varius. Morbi ultricies tellus sit amet enim varius pharetra. 
ulis faucibus. Vivamus at leo a est interdum faucibus non id neque. Phasellus laoreet arcu vel nisi aliquet accumsan.
</p>
</article>
<footer>
</footer>
</body>
</p>

    В данном случае возможно использовать селектор по имени тега для элемента с тегом <footer> (он будет равен: footer), так как этот элемент на странице один. Если бы выбрали селектор для элементов с тегом <p>, то нужно учитывать то, что, так как таких элементов на странице несколько, то будет найден первый элемент. В данном случае это элемент с текстом "Lorem ipsum dolor sit amet...". Однако, если на странице появится другой тег <p>, расположенный выше найденного ранее, то будет выбран этот новый элемент. 

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

    2) по названию класса

    Селектор равен названию класса, перед которым ставится точка. Т.е. если ищем элемент <div>, то селектор будет: .article

    Подробнее о классах здесь.

    Также как и в случае с селекторами по имени тега, следует выбирать классы, которые являются уникальными. Например, для кода, указанного выше, селектором для элемента с тегом <footer> будет: .copyright

    Аналогично, плохим селектором будет селектор ".block", так как таких элементов на странице много. Однако, если нам необходимо найти третий параграф статьи (содержит текст "Curabitur varius nulla..."), то его селектором будет: .anchor

    3) по идентификатору

    Селектор равен названию идентификатора, перед которым ставится знак решетка. Т.е. если ищем элемент <div id="article">, то селектор будет: #article

    Подробнее об идентификаторах здесь

    Все идентификаторы могут быть только уникальными.

    В большинстве случаев этих селекторов достаточно, однако существуют и более сложные селекторы. Например, такие.

    Инструкция по установке виджета-вставки

    1) указать CSS-селектор блока статьи

    2) указать CSS-селектор параграфа статьи

    3) указать либо процент статьи, на котором нужно ставить виджет, либо порядковый номер параграфа, перед которым нужно поставить виджет

    Предположим, что у нас следующий html на странице

    <div>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
</div>
</p>

    Если мы хотим поставить виджет перед третьим параграфом, то необходимо заполнить поля следующим образом:

    1) CSS-селектор блока статьи: .article

    2) CSS-селектор параграфа статьи: p

    3) Расположить виджет по номеру параграфа: 3

    Если мы хотим поставить виджет в середине статьи, то нужно заполнить поля так:

    1) CSS-селектор блока статьи: .article

    2) CSS-селектор параграфа статьи: p

    3) Расположить виджет в процентах от длины статьи: 50

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

    К примеру, есть 2 страницы с одинаковым html

    <p>
<div>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
</div>
</p>

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

    <p>
<div>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
<p>...</p>
</p>
<p>
	</div>
</p>

    Тогда в поле "CSS-селектор блока статьи" ставим: .article.include-relap-widget

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

    Установка виджетов вставок происходит следующим образом. Сперва ищется элемент "статья" по своему селектору. Потом внутри него ищутся элементы "параграфы" по другому селектору. Ключевой момент тут в том, что "параграфы" ищутся именно внутри. А "нутро" может быть глубоким. Предположим, что у нас такой html: 

    <article class="article-content">
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet...</p>
  <blockquote class="quote">
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
  </blockquote>
</article>

    Если выбраны такие селекторы для статьи и параграфов  `.article-content` и `p`, то в качестве "параграфов" будут выбраны и `<p>` внутри `<blockquote>`,  что в большинстве случаев не нужно, так как там могут оказаться другие стили, которые серьезно исказят внешний вид нашего виджета. На месте `<blockquote>` может оказаться что угодно, в том числе сторонние баннеры.
    Один из вариантов решения проблемы - убедиться, что у "параграфов" будут специальные классы: 


    <article class="article-content">
  <p class="paragraph">Lorem ipsum dolor sit amet...</p>
  <p class="paragraph">Lorem ipsum dolor sit amet...</p>
  <p class="paragraph">Lorem ipsum dolor sit amet...</p>
  <blockquote class="quote">
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
  </blockquote>
</article>

    В таком случае селектором "параграфов" будет  `.paragraph`. Однако присвоить специальный класс возможно не всегда. В таком случае можно ограничить поиск параграфов одним уровнем. Тогда селектор "параграфов" будет  `.article-content > p`. Тут важно понимать, что ищется именно на одном уровне. Т.е. если html внезапно окажется таким: 

    <article class="article-content">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <blockquote class="quote">
      <p>Lorem ipsum dolor sit amet...</p>
      <p>Lorem ipsum dolor sit amet...</p>
    </blockquote>
  </div>
</article>

    В таком случае предыдущий селектор не сработает. Тогда селекторы могут быть такими:
    селектор статьи:  `.article-content .inner`
    селектор параграфов:  `.article-content .inner > p

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

      Вопросы и ответы