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

Най-големият конфликт на мобилния уеб стандарт на Google, Ускорени мобилни страници трябва да решим е ускоряване на мобилните сайтове, докато поддържайки ги функционални и богати по съдържание. Тези дни богато и интересно съдържание едва ли може да бъде представено без вграждане от популярни сайтове в социалните медии - туитове, видеоклипове, аудиозаписи, публикации, снимки.

Разширени AMP компоненти - наред с други големи възможности - осигуряват чудесен начин за интегриране AMP документи с различни видове социално съдържание.

Как работят разширени AMP компоненти

В основата на философията на AMP има Google най-добри практики за ефективност. За да подобрите времето за зареждане на страницата, AMP стандартите ограничават как можете да използвате предните крайни технологии. Например, не можете да използвате персонализирания JavaScript, външните таблици за стилове и всеки HTML елемент, който зарежда външни ресурси, като например свободен край.

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

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

Разширените AMP компоненти изискват импортирайте съответния скрипт в раздела на вашия HTML AMP документ. Тъй като AMP е проект с отворен код, броят на разширените компоненти може да нарасне в бъдеще.

В този пост сме събрали шепа AMP компоненти, които могат да ви помогнат с интеграция на социалните медии. Имайте предвид, че версиите на скриптовете с течение на времето, така че винаги проверявайте документацията, преди да ги включите в сайта си.

1. `усилвател-Facebook`

прави възможно вградете публикация във Facebook или видеоклип в AMP страница.

Винаги трябва посочете размерите на вградения пост, което означава, че трябва да добавите a широчина и a височина атрибут със стойности в цели пиксели. Можете да намерите подходящите размери, като кликнете върху менюто "Вграждане" в горната част на публикацията във Facebook.

Вие също сте длъжни добавете URL адреса на дадения пост в данни за HREF атрибут. Можете да намерите URL адреса, като кликнете върху датата на публикацията във Facebook и браузърът ще вмъкне уникалния URL адрес в адресната лента.

Ако искаш вградите видео без съответната публикация във Facebook, добавете незадължително данни вградите-като = "видео" атрибут

Ако искаш направете вграждането си отзивчив използвай оформление атрибут с "Отзивчиви" стойност. Можете също да използвате опцията оформление атрибут на всеки друг компонент на AMP, за да контролира неговото оформление.

Пример за код:

Визуализация на кода:

Скриптът да включва:

2. `усилвател-кикотене`

Можеш вграждане на туитове в страниците на AMP с помощта на компонент.

За да направите това, трябва посочете идентификационния номер на туит в данни tweetid атрибут. Можете да промените начина на показване на чуруликане, като добавите някоя от опциите за показване на Twitter APi като данни-* Атрибут HTML5.

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

Пример за код:

Визуализация на кода:

Най- компонент все още не е перфектен, Github документи го казва Twitter понастоящем не предоставя API, който дава фиксирано съотношение на аспектите, вградено в Tweet.

Това означава, че трябва ръчно задайте широчина и височина атрибути, тъй като времето за изпълнение на AMP понякога не показва част (обикновено дъното) на чуруликане.

Винаги е добре да проверите как изглеждат вградените ви туитове, преди да публикувате AMP страницата.

Добавяне на запазено място

Въпреки че не се изисква, документацията препоръчва добавяне на контейнер в случай, че чуруликане не се зареди веднага.

Най- контейнер може да се използва за всеки компонент на AMP. Заместникът е веднага ако крайните ресурси не са налични. Когато AMP елементът се зареди, той скрива своето място.

Обърнете внимание как изглежда по-горният пример код с контейнер. В Twitter просто кликнах върху бутона „Вграждане на Tweet“, копирах-поставих вградения блоков цитат (без скрипта в края) и добавих контейнер атрибут към

свободен край.

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

с , можеш вгражда Instagram снимки и видеоклипове в AMP страниците.

От вас се изисква посочете размерите на вграденото с широчина и височина атрибути и вие също трябва добавете идентификатора на снимката или видеото в Instagram с помощта на данни Кратък атрибут.

Можете да намерите идентификатора в края на URL адреса, за пример за снимката под URL адреса https://www.instagram.com/p/-PFt7tF8Km/, така че трябва да използвам -PFt7tF8Km като стойност за данни Кратък атрибут.

Пример за код:
   
Визуализация на кода:

За отзивчиви оформления, AMP автоматично изчислява необходимото пространство, което също включва “Instagram хром” (име на сметка, дата, брой харесвания и т.н.).

Това означава, че можете да използвате всяка стойност за широчина и височина, докато две стойности са равни (Instagram снимки обикновено са квадратни), тъй като времето за изпълнение на AMP ще промени размера на изображението според наличното пространство.

Ако снимката не е квадратна, трябва да посочите нейното действително широчина и височина стойности.

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

Скриптът да включва:
  
4. усилвател-Pinterest

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

Вградете Pin Widget

За да вградите приспособление за Pin, трябва да посочите размерите, URL адреса на пина, като използвате данни URL и трябва да добавите данни задачи = "embedPin" атрибут.

Пример за код (размер по подразбиране):
   
Тъй като притурката Pin по подразбиране е доста малка, можете да изберете и по-голяма версия, като използвате данни ширина = "носител" атрибут.

Пример за код (среден размер):
   
Визуализация на кода (среден размер):

Показва се бутонът Pin It

Можете също добавете бутон Pin It на вашата AMP страница с помощта на компонент. Отделно от. \ T широчина и височина измерения, вие сте изисква да посочите четири атрибута за да вградите бутона „Закопчаване“:

данни задачи = "buttonPin" за да позволи на работното време на AMP да знае, че това ще бъде бутонът Pin It

данни URL с URL адреса, който искате да споделите

данни медии с абсолютния URL адрес на изображението, което искате потребителите да закрепят

данни описание с описанието, което искате да се появи в формуляра за създаване на Pin

Има много различни размери на бутоните, за избор, проверете документите за всички налични размери.

Пример за код:

В този пример създадох бутона Pin It, който ще позволи на потребителите да закачат изображение от бившия пост на Hongkiat.com. Използвах малкия размер на правоъгълния бутон.
      
 
Визуализация на кода:

Обърнете внимание, че трябва да използвате допълнителен CSS за показване на бутона Pin It в горната част на изображението.

Също така можете да създадете бутон Pinterest след това, като използвате данни задачи = "buttonFollow" атрибут и задаване на името, което искате да се показва в бутона Следвай в данни за екомаркировка и URL адреса на профила ви в данни за HREF атрибут.

Пример за код (бутон за следване):
   
Скриптът да включва:
  
5. усилвател-SoundCloud

SoundCloud е популярна платформа за разпространение на аудио, където потребителите могат да споделят музиката си. С помощта на. \ T компонент, който можете играе песните на SoundCloud направо от HTML страницата на AMP.

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

Най- компонент може да бъде показан в класически или визуален режим. Можете да избирате от двата режима, като зададете стойността на данни-визуални атрибут към тях вярно или фалшив (по подразбиране е фалшив).

В двата режима трябва да използвате данни TrackID атрибут към посочете идентификатора на аудиото; можете да намерите аудио идентификатор, като кликнете върху бутона Споделяне под аудиоплейъра на SoundCloud.com и погледнете URL адреса с дълъг вид в кода за вграждане.

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

Най- Класически режим показва малко умалено изображение вляво и аудиоплейъра вдясно. Можете да получите правилната стойност за височина атрибут от кода за вграждане на SoundCloud.com.

В класически режим можете да укажете цвета на аудиоплейъра, ако искате да използвате данни цвят атрибут (не можете да направите това в Visual Mode).

Пример за код (класически режим):
   
Визуализация на кода (класически режим):

Визуален режим

в Визуален режим, представеното изображение се простира зад аудиоплейъра. Тук можете да намерите и правилното височина които принадлежат към Visual Mode в кода за вграждане на SoundCloud.com.

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

Ако искаш вградете частно аудио, използвайте опцията данни на таен знак атрибут.

Скриптът да включва:
  
6. усилвател-лоза

Vine е сайт за видео споделяне с къса форма, на който можете да споделяте 6-секундни видеоклипове с приятелите си. Най- Компонентът позволява лесно вградете видеоклипове от Vine в HTML страниците на AMP.

Този AMP компонент е съвсем прост, само трябва да добавите размерите и идентификацията на Vine видеото в данни vineid атрибут. Можете да получите идентификатора от URL адреса на всяка лоза.

Тъй като Vines са квадрати, ако използвате отзивчивото оформление, същото правило важи и за вградените в Instagram; можете да добавите всяка стойност към широчина и височина атрибути, докато са равни те ще работят правилно.

Пример за код:
   
Визуализация на кода:

Скриптът да включва:
  
7. усилвател-YouTube

Можеш вградете видеоклипове в YouTube на страниците на AMP с помощта на компонент.

За да направите това, трябва да добавите измеренията, плюс идентификационния номер на видеоклипа в данни VideoId атрибут. Когато се посочва широчина и височина, това е важно обърнете внимание на пропорцията.

Можете също използвайте параметрите на вградените в YouTube в документите на AMP, просто въведете името на параметъра След данни Парам- префикс.

Пример за код:

В този пример използвах начало Параметърът на YouTube в данни Парам старт атрибут, за да се направи видеото започва на 43s.
   
Визуализация на кода:

Скриптът да включва:
  
Други услуги за видео споделяне

AMP също има компоненти, свързани с други услуги за споделяне на видео, че работи по подобен начин . Можете да използвате следните разширени AMP компоненти за внедряване на видеоклипове от доставчици, различни от YouTube:

за Vimeo вгражда

за вграждане на Dailymotion

за вграждане на Brightcove

8. усилвател-социално-акция

Освен социалните медии, можете също показване на бутони за социални дялове на AMP страниците с помощта на компонент.

Функцията за социален дял е предварително конфигурирани за някои доставчици, но с правилните настройки можете да използвате компонент за всеки друг бутон за социален дял.

Предварително конфигурирани бутони за споделяне

Предварително конфигурирани бутони за споделяне не изискват твърде много настройки; трябва да определите широчина (по подразбиране е 60 пиксела) и височина (по подразбиране е 44px) атрибути и името на доставчика на социални медии в Тип атрибут.

Със Facebook е необходимо също да посочите идентификационния номер на приложението във Facebook данни Парам-APP_ID атрибут.

Пример за код:
                    
 
Визуализация на кода:

Предварителната конфигурация прави предположения URL адресът, който искате да споделите, е каноничният URL адрес на текущата страница, а текстът, който искате да включите в своя дял, е заглавието на страницата.

Ако искате да използвате друг конфиг, можете да направите това със следното три незадължителни атрибута:

данни текст за текста, който искате да включите в споделеното

данни URL за URL адреса, който искате да споделите

данни приписване за името на лицето или доставчика, на който искате да бъде приписан вашият дял

Неконфигурирани бутони за споделяне

За да се показват бутони за споделяне на социални файлове на неконфигурирани доставчици, като WhatsApp, трябва укажете потребителския протокол на доставчика в данни дял-крайна точка атрибут. Вижте в документацията как можете да направите това.

Скриптът да включва:
  