8 компонентов AMP для интеграции с социальными сетями

Самый большой конфликт, что мобильный веб-стандарт Google, Ускоренные мобильные страницы нужно решить это сделать мобильные сайты быстрее, в то время как сохраняя их функциональными и содержательными. В наши дни богатый и увлекательный контент вряд ли можно представить без вставок с популярных социальных сетей - твиты, видео, аудио, посты, фотографии.

Расширенные компоненты AMP - среди других замечательных функций - обеспечить отличный способ интеграции AMP документы с различными типами социального контента.

Как работают расширенные компоненты AMP

В основе философии AMP лежат лучшие практики производительности. Для улучшения времени загрузки страницы стандарты AMP ограничивают как вы можете использовать передовые технологии. Например, вы не можете использовать пользовательский JavaScript, внешние таблицы стилей и любой элемент HTML, который загружает внешние ресурсы, такие как тег.

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

Компоненты AMP являются конкретные теги HTML это можно использовать аналогично обычным тегам HTML. Некоторые из них встроенный во время выполнения AMP, в то время как большинство работает как расширение. Компоненты, которые делают возможной интеграцию в социальные сети на страницах AMP все расширенные компоненты.

Расширенные компоненты AMP требуют от вас импортировать принадлежащий скрипт в раздел вашего документа AMP HTML. Поскольку AMP - это проект с открытым исходным кодом, число расширенных компонентов в будущем может возрасти..

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

1. `амп-facebook`

позволяет встроить пост в Facebook или видео на страницу AMP.

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

Вы также обязаны добавить URL данного поста в данных HREF приписывать. Вы можете найти URL, нажав на отметку времени в сообщении Facebook, и браузер вставит уникальный URL в адресную строку..

Если хотите вставлять видео без поста в Facebook, добавить опционально данных встраивать-а = «видео» атрибут

Если хотите сделайте вашу вставку отзывчивой использовать расположение атрибут с «Отзывчивый» значение. Вы также можете использовать дополнительный расположение атрибут любого другого компонента AMP для управления его макетом.

Пример кода:

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

Скрипт для включения:

2. `амп-твиттер`

Вы можете вставлять твиты на страницы AMP с помощью составная часть.

Для этого вам нужно указать идентификатор твита в данное tweetid приписывать. Вы можете изменить способ отображения твита, добавив любой из параметров отображения API Twitter в виде данные-* Атрибут HTML5.

Например, в приведенном ниже примере я использовал API Twitter linkColor опция отображения как Канальный цвет (его данные-* формат), чтобы изменить цвет ссылки по умолчанию на цвет, который Hongkiat.com использует в своей учетной записи Twitter.

Пример кода:

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

компонент еще не совершенен, Github Docs говорит, что В настоящее время Twitter не предоставляет API, который дает фиксированное соотношение сторон..

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

Перед публикацией страницы AMP всегда полезно проверить, как выглядят встроенные твиты..

Добавить заполнитель

Хотя это не обязательно, документация рекомендует добавление заполнителя если твит не загружается сразу.

заполнитель Атрибут может использоваться на каждом компоненте AMP. Заполнитель показано сразу если окончательные ресурсы недоступны. Когда элемент AMP загружается, он скрывает его заполнитель.

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

тег.

Пример кода с заполнителем:
   Как проверить ускоренные мобильные страницы (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Хонгкиат (@hongkiat)  15 августа 2016 г. 
  
Скрипт для включения:
  
3. Усилитель-Instagram

С , вы можете вставлять Instagram фото и видео в ваши страницы AMP.

Вы обязаны указать размеры вставлять с ширина а также рост атрибуты, и вы также должны добавить идентификатор фото или видео из Instagram, используя данных шорткод атрибут.

Вы можете найти идентификатор в конце URL-адреса, для примера для фотографии ниже URL-адрес https://www.instagram.com/p/-PFt7tF8Km/, поэтому мне нужно использовать -PFt7tF8Km в качестве значения для данных шорткод атрибут.

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

Для адаптивных макетов, AMP автоматически рассчитывает необходимое пространство, которое также включает в себя “Instagram Chrome” (имя аккаунта, дата, количество лайков и т. д.).

Это означает, что вы можете использовать любое значение для ширина а также рост, до два значения равны (Фотографии в Instagram обычно квадратные), поскольку среда выполнения AMP изменит размер изображения в соответствии с доступным пространством.

Если фотография не является квадратом, вы должны указать ее фактическое ширина а также рост ценности.

За фиксированные макеты, вам нужно включить дополнительное пространство (сверху и снизу: +48 пикселей, слева и справа: + 8 пикселей), необходимые для хрома Instagram при расчете размеров изображения.

Скрипт для включения:
  
4. Усилитель-Pinterest

позволяет вам встроить виджет Pin или кнопку Pin It в документ AMP HTML.

Вставить виджет Pin

Чтобы встроить виджет «Пин», необходимо указать размеры, URL-адрес пина с помощью данная URL атрибут, и вам также нужно добавить данных делать = «embedPin» атрибут.

Пример кода (размер по умолчанию):
   
Так как виджет Pin по умолчанию довольно мал, вы также можете выбрать большую версию, используя Данные ширина = «средний» атрибут.

Пример кода (средний размер):
   
Предварительный просмотр кода (средний размер):

Показать кнопку Pin It

Вы также можете добавить кнопку «Закрепить» на вашу страницу AMP с помощью составная часть. Отдельно от ширина а также рост размеры, ты требуется указать четыре атрибута для того, чтобы встроить кнопку Pin It:

данных делать = «buttonPin» чтобы программа AMP знала, что это будет кнопка Pin It

данная URL с URL, которым вы хотите поделиться

данные СМИ с абсолютным URL изображения, которое вы хотите, чтобы пользователи прикрепили

данное описание с описанием, которое вы хотите появиться в форме создания Pin

Есть много разных размеров кнопок, на выбор, проверьте документы для всех доступных размеров.

Пример кода:

В этом примере я создал кнопку «Закрепить», которая позволит пользователям прикреплять изображение из этого поста на сайте Hongkiat.com. Я использовал маленький прямоугольный размер кнопки.
      
 
Предварительный просмотр кода:

Обратите внимание, что вам нужно использовать дополнительный CSS для отображения кнопки «Закрепить» в верхней части изображения..

Вы также можете создать кнопку Pinterest Follow, используя данных делать = «buttonFollow» атрибут, и указав имя, которое вы хотите отобразить внутри кнопки Follow в Данные метки & URL вашей учетной записи в данных HREF атрибут.

Пример кода (кнопка «Follow»):
   
Скрипт для включения:
  
5. Усилитель-SoundCloud

SoundCloud - это популярная платформа для распространения аудио, где пользователи могут делиться своей музыкой. С помощью компонент, который вы можете играть треки SoundCloud прямо с вашей страницы AMP HTML.

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

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

В обоих режимах вы должны использовать данное TrackID приписывать указать идентификатор аудио; Вы можете найти аудио-идентификатор, нажав кнопку «Поделиться» под аудиоплеером на SoundCloud.com и просмотрев полный URL-адрес внутри кода для встраивания..

Классический режим

Классический режим слева отображается небольшое уменьшенное изображение, а справа - аудиоплеер. Вы можете получить правильное значение для рост атрибут из кода для вставки на SoundCloud.com.

В классическом режиме вы можете указать цвет аудиоплеера, если вы хотите использовать Данные цвета атрибут (вы не можете сделать это в визуальном режиме).

Пример кода (классический режим):
   
Предварительный просмотр кода (классический режим):

Визуальный режим

В Визуальный режим, Показанное изображение располагается за аудиоплеером. Здесь вы также можете найти правильное рост принадлежность к визуальному режиму в коде для встраивания на SoundCloud.com.

Пример кода (визуальный режим):
   
Пример кода (визуальный режим):

Если хотите встроить частный аудио, использовать опционально Данные секретный-токен атрибут.

Скрипт для включения:
  
6. амп лоза

Vine - это краткий сайт для обмена видео, на котором вы можете поделиться своими 6-секундными видео со своими друзьями. компонент позволяет легко вставлять видео Vine в ваши страницы AMP HTML.

Этот компонент AMP довольно прост, вам нужно только добавить размеры и идентификатор видео Vine в данное vineid приписывать. Вы можете получить идентификатор из URL каждого Vine.

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

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

Скрипт для включения:
  
7. Усилитель-YouTube

Вы можете вставлять видео YouTube на страницах AMP с помощью составная часть.

Для этого необходимо добавить размеры, а также идентификатор видео в данное VideoID приписывать. При указании ширина а также рост, важно обратите внимание на соотношение сторон.

Вы также можете использовать параметры встраивания YouTube в документах AMP просто введите имя параметра после данные пары- префикс.

Пример кода:

В этом примере я использовал Начните Параметр YouTube в Данные-пары-старт атрибут для того, чтобы видео началось в 43 с.
   
Предварительный просмотр кода:

Скрипт для включения:
  
Другие службы обмена видео

AMP также имеет компоненты, связанные с другими службами обмена видео, которые работать аналогично . Вы можете использовать следующие расширенные компоненты AMP для встраивания видео от других поставщиков, кроме YouTube:

для вставок Vimeo

для встраивания Dailymotion

для встраивания Brightcove

8. амп-социально-доля

Помимо встраивания в социальные сети, вы также можете отображать кнопки социальных сетей на ваших страницах AMP с помощью составная часть.

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

Предварительно настроенные кнопки общего доступа

Предварительно настроенные кнопки обмена не требует слишком много настроек; Вы должны определить ширина (по умолчанию 60px) и рост (по умолчанию 44px) и имя поставщика социальных сетей в тип атрибут.

В Facebook вы также должны указать идентификатор приложения Facebook в Данные-пары-APP_ID атрибут.

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

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

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

данных текст для текста, который вы хотите включить в общий ресурс

данная URL для URL, которым вы хотите поделиться

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

Неконфигурированные кнопки общего доступа

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

Скрипт для включения:
  