8 компонентів AMP для інтеграції соціальних медіа
Найбільший конфлікт, який дотримується стандарт Google для мобільного, Прискорені мобільні сторінки потрібно вирішити це створення мобільних сайтів швидше, час тримати їх функціональними та багатими за змістом. У ці дні багатий та захоплюючий вміст навряд чи можна уявити без вбудовування з популярних сайтів соціальних медіа - твітів, відео, аудіо, повідомлень, фотографій.
Розширені компоненти AMP - серед інших чудових можливостей - забезпечують відмінний спосіб інтеграції AMP документи з різними типами соціального змісту.
Як працюють розширені компоненти AMP
Основою філософії AMP є Google найкращих практик. Щоб покращити час завантаження сторінки, стандарти AMP обмежують як можна використовувати інтерфейсні технології. Наприклад, не можна використовувати спеціальний JavaScript, зовнішні таблиці стилів і будь-який елемент HTML, який завантажує зовнішні ресурси, такі як
В обмін ви отримуєте купу Компоненти AMP можна використовувати для відображення зовнішніх ресурсів, такі як зображення, відео, аудіо, реклами тощо на вашому сайті.
Компоненти AMP є певні теги HTML які можна використовувати аналогічно звичайним HTML-тегам. Деякі з них є вбудований до часу виконання AMP, тоді як більшість працює як розширення. Компоненти, що дозволяють інтегрувати соціальні медіа на сторінки AMP всі розширені компоненти.
Розширені компоненти AMP вимагають від вас імпортувати відповідний сценарій в у вашому HTML-документі AMP. Оскільки AMP є проектом з відкритим кодом, кількість розширених компонентів може зростати в майбутньому.
У цьому пості ми зібрали кілька компонентів AMP, які можуть допомогти вам з інтеграцією в соціальні медіа. Майте на увазі, що версії сценаріїв може змінюватися з часом, тому завжди перевіряйте документацію, перш ніж включати їх на свій сайт.
1. amp-facebook
Вам завжди потрібно вкажіть розміри вбудованого повідомлення, це означає, що потрібно додати a ширина а висота атрибут зі значеннями в цілих пікселях. Ви можете знайти потрібні розміри, натиснувши на меню "Вставити" у верхній частині повідомлення Facebook.
Вам також потрібно додайте URL даного повідомлення в data-href атрибут. Ви можете знайти URL-адресу, натиснувши на мітку часу повідомлення Facebook, і браузер вставить унікальний URL-адрес у адресний рядок.
Якщо ти хочеш Вбудувати відео без відповідного повідомлення в Facebook, додайте опціонально data-embed-as = "відео" атрибут
Якщо ти хочеш зробіть відповідне вбудовування використовувати макет з атрибутом "реагувати" значення. Ви також можете використовувати додаткові макет атрибут будь-якого іншого компонента AMP для керування його компонуванням.
Приклад коду:
Перегляд коду:
Сценарій для включення:
2. amp-twitter
Ти можеш вставляти твіти на сторінки AMP за допомогою
Для цього потрібно вкажіть ідентифікатор твітів в дані-твітдід атрибут. Ви можете змінити спосіб відображення твітів, додавши будь-який з варіантів відображення APi в Twitter дані- * Атрибут HTML5.
Наприклад, у наведеному нижче прикладі я використовував API Twitter колір відображення як колір-даних (його дані- * формату), щоб змінити колір посилання за замовчуванням на колір, який Hongkiat.com використовує у своєму обліковому записі Twitter.
Приклад коду:
Перегляд коду:
The Наразі Twitter не надає API, який забезпечує фіксований коефіцієнт пропорційності вкладених файлів
.
Це означає, що вам потрібно встановити вручну ширина і висота атрибути, як час виконання AMP іноді не відображає частину (зазвичай нижню) твіту.
Це завжди гарна ідея перевірити, як виглядають ваші вбудовані твіти перед публікацією сторінки AMP.
Додати заполнитель
Незважаючи на те, що це не потрібно, документація рекомендує додавання заповнювача у випадку, якщо твіт не завантажується відразу.
The заповнювач Атрибут може використовуватися на кожному компоненті AMP. Заповнювач є відображається негайно якщо остаточні ресурси недоступні. Коли елемент AMP завантажується, він приховує свій заповнювач.
Подивіться, як виглядає вищезгаданий код з заповнювачем. На Twitter, я просто натиснув на кнопку "Вставити твіт", скопіював-вставив вставний блокквіт (без скрипту в кінці), і додав заповнювач атрибут до тег.
Приклад коду з заповнювачем:
Як перевірити прискорені мобільні сторінки (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15 серпня 2016 року
Сценарій для включення:
3. amp-instagram
С
Ви зобов'язані вказати розміри Вставити з ширина і висота атрибути, і ви також повинні додайте ідентифікатор фото або відео в Instagram за допомогою короткий код даних атрибут.
Ви можете знайти ідентифікатор в кінці URL-адреси, наприклад, для фотографії нижче URL-адреси https://www.instagram.com/p/-PFt7tF8Km/, тому мені потрібно використовувати -PFt7tF8Km як значення для короткий код даних атрибут.
Приклад коду:
Перегляд коду:
Для адаптивних макетів, AMP автоматично обчислює необхідний простір, який також включає в себе “Instagram хром” (назва облікового запису, дата, кількість улюблених і т.д.).
Це означає, що ви можете використовувати будь-яке значення для ширина і висота, до два значення рівні (Фотографії Instagram, як правило, квадратні), оскільки час виконання AMP змінює розмір зображення відповідно до вільного місця.
Якщо фото не є квадратом, потрібно вказати його фактичне значення ширина і висота значення.
Для фіксовані макети, тобі потрібно включають додатковий простір (зверху і знизу: +48 пікселів, ліворуч і праворуч: + 8px), необхідних для хромованого формату Instagram, коли ви обчислюєте розміри зображення.
Сценарій для включення:
4. amp-pinterest
Вставити віджет Pin
Щоб вставити віджет Pin, потрібно вказати розміри, URL-адресу шпильки за допомогою url-даних атрибут, і вам також потрібно додати data-do = "embedPin" атрибут.
Приклад коду (розмір за умовчанням):
Оскільки віджет Pin за замовчуванням є досить маленьким, можна також вибрати більшу версію за допомогою data-width = "medium" атрибут.
Приклад коду (середнього розміру):
Перегляд коду (середнього розміру):
Відображення кнопки Pin It
Ви також можете додайте кнопку Pin It на вашу сторінку AMP за допомогою ширина і висота розміри, ви потрібно вказати чотири атрибути для вбудовування кнопки Pin It:
data-do = "buttonPin"дозволити програмі AMP знати, що це буде кнопка Pin Iturl-данихз URL-адресою, який потрібно надати спільному доступуносій данихз абсолютною URL-адресою зображення, яке потрібно вказати користувачамопис данихз описом, який потрібно відобразити у формі створення PIN-коду
Існує багато різних розмірів кнопок, на вибір, перевірте документи для всіх доступних розмірів.
Приклад коду:
У цьому прикладі я створив кнопку Pin It, яка дозволить користувачам закріплювати зображення з цього колишнього посту Hongkiat.com. Я використав невеликий розмір прямокутної кнопки.
Перегляд коду:
Зауважте, що для відображення кнопки Pin It на верхній частині зображення потрібно використовувати додатковий CSS.
Ви також можете створити кнопку з дотриманням Pinterest за допомогою кнопки data-do = "buttonFollow" і вказуючи ім'я, яке ви хочете відобразити всередині кнопки Follow мітку даних & URL вашого облікового запису в data-href атрибут.
Приклад коду (кнопка Follow):
Сценарій для включення:
5. amp-soundcloud
SoundCloud - популярна платформа для передачі аудіо, де користувачі можуть ділитися своєю музикою. За допомогою
Цей компонент може використовувати лише з фіксованої висоти макет це означає, що вам потрібно лише вказати висота, і ширина буде обчислена під час виконання AMP. У результаті буде вбудований аудіопрогравач SoundCloud заповнити весь наявний горизонтальний простір.
The дані візуальні атрибуту вірно або помилковий (типовим є помилковий).
В обох режимах потрібно використовувати data-trackid приписувати вкажіть ідентифікатор аудіо; аудіо-ідентифікатор можна знайти, натиснувши кнопку "Спільний доступ" під звуковим програвачем на SoundCloud.com, і переглянувши URL довгої форми в коді вбудовування.
Класичний режим
The Класичний режим відображає мініатюру зліва, а аудіопрогравач - праворуч. Ви можете отримати правильне значення для висота з коду вбудовування на SoundCloud.com.
У класичному режимі ви можете вказати колір аудіопрогравача, якщо ви бажаєте використовувати його колір даних атрибут (це неможливо зробити у візуальному режимі).
Приклад коду (класичний режим):
Перегляд коду (класичний режим):
Візуальний режим
В Візуальний режим, образоване зображення охоплює аудіопрогравач. Тут ви також можете знайти власне висота що належать до Visual Mode у коді Embed на SoundCloud.com.
Приклад коду (візуальний режим):
Приклад коду (візуальний режим):
Якщо ти хочеш вбудувати приватний звук, використовувати необов'язковий секрет-даних атрибут.
Сценарій для включення:
6. амп-лоза
Vine - це сайт для обміну відео з короткою формою, на якому можна ділитися 6-секундними відео з друзями. The
Цей компонент AMP досить простий, потрібно лише додати розміри і ідентифікатор відео Vine у форматі data-виноград атрибут. Ви можете отримати ідентифікатор з URL кожного Vine.
Оскільки Vines є квадратами, якщо ви використовуєте адаптивний макет, те саме правило застосовується як до вбудованих в Instagram; можна додати будь-яке значення до ширина і висота атрибути, поки вони не рівні вони будуть правильно працювати.
Приклад коду:
Перегляд коду:
Сценарій для включення:
7. amp-youtube
Ти можеш вставляти відео YouTube на сторінках AMP за допомогою
Для цього потрібно додати розміри, а також ідентифікатор відео в дані відео атрибут. При вказівці ширина і висота, це важливо зверніть увагу на співвідношення сторін.
Ви також можете використовувати параметри вбудовування YouTube У документах AMP просто вставте ім'я параметра після data-param- префікс.
Приклад коду:
У цьому прикладі я використав початок Параметр YouTube у data-param-start атрибут для того, щоб зробити відео починається з 43-х.
Перегляд коду:
Сценарій для включення:
Інші послуги з обміну відео
AMP також має компоненти, пов'язані з іншими послугами обміну відео працювати так само, як
8. amp-social-share
Крім соціальних медіа, ви також можете відображати кнопки соціальних папок на ваших сторінках AMP за допомогою
Особливістю соціальної акції є для деяких постачальників, але з правильними параметрами можна використовувати
Кнопки попереднього налаштування
Настроєні кнопки спільного доступу не вимагають надто великих налаштувань; потрібно визначити ширина (за замовчуванням - 60px) і висота (за замовчуванням - 44px) атрибути і ім'я постачальника соціальних медіа в тип атрибут.
За допомогою Facebook потрібно також вказати ідентифікатор програми для Facebook у data-param-app_id атрибут.
Приклад коду:
Перегляд коду:
Попередня конфігурація робить припущення що URL-адреса, яку ви хочете надати, є канонічною URL-адресою поточної сторінки, а текст, який потрібно включити в свою частку, - це назва сторінки.
Якщо ви хочете використовувати інший конфігурацію, ви можете зробити це з наступного три необов'язкових атрибути:
текстдля тексту, який потрібно включити до спільного ресурсуurl-данихдля URL-адреси, яку потрібно надати спільному доступуатрибуція данихдля імені особи або постачальника, до якого потрібно приписати вашу частку
Кнопки без спільного доступу
Для відображення соціальних кнопок спільного доступу неконфігурованих постачальників, наприклад, WhatsApp, вам потрібно вкажіть власний протокол провайдера в data-share-endpoint атрибут. Перевірте в документах, як це можна зробити.
Сценарій для включення:
