Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Performance

Как опубликовать с помощью Facebook Instant Articles

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Tatsiana Bochkareva (you can also view the original English article)

Эффективность имеет значение, и крупные игроки в Интернете обращаются к вопросу о производительности по-своему. Ответ Google приходит в форме его противоречивой AMP; формат которой предлагает обычный список для мобильных результатов поиска. Google даже ранжирует списки, которые лучше используют AMP.

Аналогичным образом Facebook разработал свою собственную идею с помощью Instant Articles, которая позволяет мгновенно обслуживать общий веб-контент в мобильном приложении с помощью мобильного телефона. Содержимое, которое было подтверждено как мгновенная статья, будет помечено эмблемой молнии, когда она будет размещена в любом месте на Facebook.

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

1. Регистрация

Во-первых, вам нужно будет иметь доступ администратора или редактора к опубликованной странице Facebook.

На момент своего создания Instant Articles был доступен только для издателей большого или среднего размера, у которых на Facebook-странице было по крайней мере сто тысяч подписчиков или активной аудитории; удивляло то, что мои страницы не имели тогда права подписываться на мгновенные статьи! В настоящее время Facebook открыл Instant Articles для всех издателей всех размеров, вам просто нужно зарегистрироваться.

Затем, выберите страницу.

2. Проверьте ваш веб-сайт

Вам нужно будет убедиться, что вы владеете соответствующим сайтом, добавив мета тегfb:pages в head . Не забудьте добавить URL-адрес и нажать Claim URL, чтобы завершить проверку. Вы можете проверить несколько URL-адресов, если ваш сайт содержит несколько каналов или субдоменов, таких как Medium и Tuts+ (webdesign.tutsplus.com, code.tutsplus.com и т.д.).

Введите данные и нажмите «Claim URL».

3. Отформатируйте разметку

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

Как вы можете видеть выше, формат Instant Articles - это простая семантическая структура HTML со специальными классами и атрибутами. Например, у изображения есть атрибутdata-mode установленный в fullscreen, который отобразит полный экран изображения. В другом изображении у нас есть атрибутdata-feedbackкоторый позволит нашим пользователям ставить «Мне нравится» и прикреплять комментарии непосредственно к изображению.

Пара обычных мета-тегов также добавляется вheadtag, например тег fb:article_style который определяет стили содержимого. Кроме того, canonical метатег должен указывать на оригинальную статью; фактор, который заставляет многих издателей предпочитать мгновенные статьи Facebook через Google AMP.Google AMP гораздо скрытнее в отношении местоположения работы.

4. Отправьте свой контент

После того, как вы готовы, отправьте контент на Facebook.

Существует два способа это сделать. Во-первых, вы можете опубликовать его прямо через свою учетную запись Facebook. На экране Publishing Tools вы должны найти кнопку + Create, которая приведет вас к форме для размещения кода HTML.

Второй подход предусматривает предоставление URL-адреса фида, который содержит контент. Этот подход может занять некоторое время, чтобы настроить его в зависимости от платформы, на которой разработан ваш веб-сайт. К счастью, плагин доступен для популярных платформ, таких как WordPress и Drupal, что упрощает преобразование содержимого в совместимый формат XML.

Тем не менее, отправка контента вручную - это самый быстрый способ опубликовать ваш контент как мгновенную статью, особенно на этих ранних этапах.

5. Предварительный просмотр статьи

Чтобы просмотреть содержимое, которое вы отправили, вам необходимо установить мобильное приложение Facebook Page Manager. Instant Articles доступны в меню Settings на странице Toolbar.

6. Настроить стили содержимого

Styling Instant Articles прост, но ещё также ограничительный. Facebook предоставляет интерфейс для изменения некоторых компонентов статьи, таких как семейство шрифтов, цвет шрифта, логотип и т.д. Если вы создали собственный стиль, убедитесь, что имя стиля совпадает со значением, установленным в метатегеfb:article_style.

7. Ожидание результатов процесса рассмотрения

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

Тем не менее, после того, как всё было одобрено, вы можете приступить к добавлению URL-адреса фида для автоматического продвижения контента в Instant Articles.

Заключение

Facebook Instant Articles представляет некоторые ограничения, которые могут стать препятствием для некоторых веб-сайтов. Например, он не поддерживает элемент pre , который является общим тегом, используемым в блогах разработки для рендеринга фрагментов кода. Статьи, содержащие этот тег, недействительны в соответствии со стандартом Instant Articles. По этой причине вы можете не увидеть сайты, такие как Envato Tuts+ или Smashing Magazine, на Instant Articles. 

Это даже не касается конкретно того, что должно быть. Как заявил Джон Грубер, конкретно при обсуждении Google AMP:

«Если вы являетесь издателем, и ваши веб-страницы быстро не загружаются, разумное решение - это исправить ваш ч***ов веб-сайт, чтобы страницы загружались быстро, а не сдаваться и внедрять AMP» - Джон Грубер

Наша работа в качестве веб-разработчиков все больше и больше поддерживать контент, который будет совместим на разных платформах, таких как AMP, Instant Articles, и, если вам повезет на Apple News (не говоря уже о том, как процесс работы с интерфейсом существенно изменился всего за пару лет с появлением новых инструментов, таких как Webpack, React, Vue и т. д.).

Недавно разработчики придумали новую идею, разработанную Progressive Web App (PWA). Для сайтов, которые не могут реализовать Instant Articles или AMP, PWA может стать отличной альтернативой. Мы рассмотрим это в следующем уроке, увидимся там!

Дополнительные ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.