8 АМП компоненти за интеграцију друштвених медија

Највећи конфликт који Гоогле има за мобилни веб стандард, Аццелератед Мобиле Пагес треба решити брже израде мобилних сајтова, док одржава их функционалним и богатим садржајем. Ових дана богати и занимљиви садржаји тешко се могу замислити без уграђивања са популарних друштвених медија - твеетова, видеозаписа, аудио записа, постова, фотографија.

Проширене АМП компоненте - међу осталим великим могућностима - пружају одличан начин за интеграцију АМП докумената са различитим врстама друштвеног садржаја.

Како раде продужене АМП компоненте

У језгру АМП-ове филозофије постоје Гооглеове најбоље перформансе. Да би се побољшало време учитавања страница, АМП стандарди ограничавају како можете користити фронт-енд технологије. На пример, не можете да користите прилагођени ЈаваСцрипт, спољне табеле стилова и било који ХТМЛ елемент који учитава спољне ресурсе, као што је таг.

У замену, добијате гомилу АМП Цомпонентс можете користити приказ вањских ресурса, као што су слике, видео снимци, аудио записи, рекламе итд. на вашем сајту.

АМП Цомпонентс аре специфичне ХТМЛ ознаке које се могу користити слично обичним ХТМЛ ознакама. Неколико њих јесу буилт ин за време рада АМП, док је већина ради као проширења. Компоненте које омогућавају интеграцију друштвених медија на АМП страницама су све проширене компоненте.

Проширене АМП компоненте захтевају увозите припадајући скрипт у АМП ХТМЛ документа. Како је АМП пројекат отвореног кода, број проширених компоненти може расти у будућности.

У овом посту прикупили смо прегршт АМП компоненти које вам могу помоћи са интеграцијом друштвених медија. Имајте на уму да су верзије скрипти може се мењати током времена, зато увек проверите документацију пре него што их укључите на ваш сајт.

1. `амп-фацебоок`

омогућава уградите Фацебоок пост или видео на АМП страницу.

Увек мораш одредите димензије уграђене поште, што значи да морате додати а видтх и а хеигхт атрибут са вредностима у целим пикселима. Одговарајуће димензије можете пронаћи кликом на мени "Ембед" на врху Фацебоок поста.

Такође морате додајте УРЛ датог поста у дата-хреф аттрибуте. УРЛ можете пронаћи кликом на временску ознаку Фацебоок поста, а претраживач ће убацити јединствени УРЛ у адресну траку.

Ако желиш да уградили видео без припадајућег Фацебоок поста, додајте опционално дата-ембед-ас = "видео" аттрибуте

Ако желиш да учините да ваш ембед одговара користити лаиоут атрибут са "респонсиве" вредност. Можете користити и опционално лаиоут атрибут на било којој другој АМП компоненти да контролише његов распоред.

Пример кода:

Преглед кода:

Скрипта за укључивање:

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

Можете ембед твеетс на АМП странице помоћу саставни део.

Да бисте то урадили, морате наведите ИД твеет-а у дата-твеетид аттрибуте. Можете промијенити начин приказа твеет-а додавањем било које опције приказа на Твиттер АПи као дата- * ХТМЛ5 атрибут.

На пример, у примеру испод користио сам Твиттер АПИ линкЦолор опција приказа као дата-линк-цолор (његово дата- * формат) да промените подразумевану боју везе на боју коју Хонгкиат.цом користи на свом Твиттер налогу.

Пример кода:

Преглед кода:

Тхе компонента још није савршена, Гитхуб документи то кажу Твиттер тренутно не нуди АПИ који даје фиксни аспект Твеет уграђује.

То значи да морате ручно подесите видтх и хеигхт атрибути, пошто АМП рунтиме понекад не приказује део (обично дно) твеет-а.

Увек је добра идеја да проверите како изгледају ваши уграђени твеет-ови пре објављивања АМП странице.

Додајте резервирано место

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

Тхе плацехолдер атрибут се може користити на свакој АМП компоненти. Резервар је одмах ако коначни ресурси нису доступни. Када се учита АМП елемент, он скрива своје место.

Погледајте како изгледа пример горе наведеног кода са резервисаним местом. На Твиттер-у сам једноставно кликнуо на дугме Ембед Твеет, копирај-налепио уградиви блоцккуоте (без скрипте на крају) и додао плацехолдер атрибут

таг.

Пример кода са резервисаним местом:
   Како да потврдите убрзане мобилне странице (#АМП) #гоогле #сео хттпс://т.цо/еВОСАтр5Ак 
 - Хонгкиат (@хонгкиат)  15. август 2016. \ т 
  
Скрипта за укључивање:
  
3. амп-инстаграм

Са , можете уграђује Инстаграм фотографије и видео записе на АМП странице.

Ви сте обавезни одредите димензије уградили са видтх и хеигхт атрибуте, а ви такође морате додајте идентификатор у Инстаграм фотографији или видео снимку користећи дата-схортцоде аттрибуте.

Идентификатор можете наћи на крају УРЛ-а, на пример за фотографију испод УРЛ-а хттпс://ввв.инстаграм.цом/п/-ПФт7тФ8Км/, тако да морам да користим -ПФт7тФ8Км као вредност за дата-схортцоде аттрибуте.

Пример кода:
   
Преглед кода:

За одговарајући распоред, АМП аутоматски израчунава потребан простор који такође укључује “Инстаграм цхроме” (назив рачуна, датум, број корисника, итд.).

То значи да можете користити било коју вредност за видтх и хеигхт, док две вредности су једнаке (Инстаграм фотографије су обично квадратне), пошто ће АМП рунтиме промијенити величину слике у складу са расположивим простором.

Ако фотографија није квадрат, морате навести њену стварну видтх и хеигхт вредности.

За фиксни распореди, морате да укључују додатни простор (горе и доле: +48 пк, лево и десно: + 8пк) потребно за Инстаграм хром када израчунате димензије слике.

Скрипта за укључивање:
  
4. амп-пинтерест

омогућава вам уградите или видгет Пин или дугме Пин Ит у АМП ХТМЛ документ.

Уградите Пин Видгет

Да бисте уградили додатак за Пин, морате да наведете димензије, УРЛ пинова помоћу дата-урл атрибут, а такође треба да додате и дата-до = "ембедПин" аттрибуте.

Пример кода (подразумевана величина):
   
Како је подразумевани Пин видгет мали, можете се одлучити и за већу верзију помоћу дата-видтх = "медиум" аттрибуте.

Пример кода (средња величина):
   
Преглед кода (средње величине):

Прикажите Пин Ит Буттон

Можете такође додајте дугме Пин Ит на вашу АМП страницу уз помоћ саставни део. Осим из видтх и хеигхт димензије, ти си потребно да наведете четири атрибута да бисте уградили дугме Пин Ит:

дата-до = "буттонПин" да би АМП рунтиме знао да ће то бити Пин Ит дугме

дата-урл са УРЛ-ом који желите да делите

дата-медиа са апсолутним УРЛ-ом слике коју желите да корисници фиксирају

опис података са описом који желите да се појави у обрасцу за креирање ПИН-а

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

Пример кода:

У овом примеру сам креирао Пин Ит дугме које би омогућило корисницима да закаче слику са овог бившег Хонгкиат.цом поста. Користио сам малу правоугаону величину дугмета.
      
 
Преглед кода:

Имајте на уму да морате да користите додатни ЦСС да бисте приказали дугме Пин Ит на врху слике.

Такође можете да креирате Пинтерест помоћу дугмета дата-до = "буттонФоллов" атрибут, и навођење имена које желите да прикажете унутар дугмета Фоллов дата-лабел & УРЛ вашег налога у дата-хреф аттрибуте.

Пример кода (дугме за праћење):
   
Скрипта за укључивање:
  
5. амп-соундцлоуд

СоундЦлоуд је популарна платформа за дистрибуцију звука на којој корисници могу да деле своју музику. Уз помоћ компонента можете плаи СоундЦлоуд трацкс десно са ваше АМП ХТМЛ странице.

Ова компонента може користити само са фиксна висина лаиоут што значи да само требате одредити хеигхт, и ширина ће бити израчуната од стране АМП рунтиме. Као резултат, уграђени СоундЦлоуд аудио плејер попуните сав расположиви хоризонтални простор.

Тхе компонента може бити приказана у било класични или визуелни режим. Можете изабрати два режима тако што ћете подесити вредност дата-висуал атрибут истина или фалсе (подразумевано је фалсе).

У оба режима, морате користити дата-трацкид приписати наведите идентификатор аудио; можете пронаћи аудио ИД тако што ћете кликнути на дугме Дели испод аудио плејера на СоундЦлоуд.цом и потражити УРЛ дугачког облика унутар уграђеног кода.

Цлассиц Моде

Тхе Цлассиц Моде приказује малу сличицу на левој страни и аудио плејер са десне стране. Можете добити одговарајућу вриједност за хеигхт атрибут из Ембед кода на СоундЦлоуд.цом.

У класичном режиму, можете да одредите боју аудио плејера ако желите да користите дата-цолор атрибут (не можете то да урадите у визуелном режиму).

Пример кода (класични режим):
   
Преглед кода (класични режим):

Висуал Моде

Ин Висуал Моде, истакнута слика се протеже иза аудио плејера. Овде можете наћи и одговарајуће хеигхт који припадају Висуал моду у Ембед коду на СоундЦлоуд.цом.

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

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

Скрипта за укључивање:
  
6. амп-вине

Вине је сајт за дељење видео снимака кратког формата на коме можете да делите 6-секундне видео снимке са пријатељима. Тхе компонента омогућава лако ембед Вине видеос на АМП ХТМЛ странице.

Ова компонента АМП-а је прилично једноставна, само требате додати димензије и ИД видео записа у Вине дата-винеид аттрибуте. Можете добити ИД из УРЛ-а сваке Вине.

Пошто су Вине квадрати, ако користите одговарајући распоред, исто правило важи и за Инстаграм ембедс; можете додати било коју вредност видтх и хеигхт атрибути, док нису једнаки они ће исправно радити.

Пример кода:
   
Преглед кода:

Скрипта за укључивање:
  
7. амп-иоутубе

Можете уградите ИоуТубе видео снимке на АМП страницама уз помоћ саставни део.

Да бисте то учинили, морате додати димензије, плус ИД видеозаписа у дата-видеоид аттрибуте. Када одређујете видтх и хеигхт, Важно је обратите пажњу на однос ширине и висине.

Можете такође користите параметре уграђених ИоуТубе-а у АМП документима, само убаците име параметра после дата-парам- префикс.

Пример кода:

У овом примеру, користио сам почетак ИоуТубе параметар у дата-парам-старт да би видео започео у 43с.
   
Преглед кода:

Скрипта за укључивање:
  
Остале услуге дељења видеа

АМП такође има компоненте које се односе на друге услуге за дељење видеа, то јест радити слично . Можете користити следеће проширене АМП компоненте за видео уграђивање од провајдера који нису ИоуТубе:

за Вимео ембедс

за Даилимотион ембедс

за Бригхтцове ембедс

8. амп-социал-схаре

Осим уградње друштвених медија, можете и ви приказати друштвене тастере за дељење на АМП страницама користећи саставни део.

Функција социјалног дијељења је за неке провајдере, али са правим подешавањима можете да користите компонента за било које друге тастере за друштвено коришћење.

Пре-конфигурирани тастери за дељење

Претходно конфигурисана дугмад за дељење не захтевају превише подешавања; морате дефинисати видтх (подразумевано је 60пк) и хеигхт (подразумевано је 44пк) атрибуте и име провајдера друштвених медија у тип аттрибуте.

Са Фацебоок-ом, такође морате да наведете ИД апликације за Фацебоок у дата-парам-апп_ид аттрибуте.

Пример кода:
                    
 
Преглед кода:

Пре-конфигурација прави претпоставке да УРЛ који желите да делите представља канонски УРЛ тренутне странице, а текст који желите да укључите у дељење је наслов странице.

Ако желите да користите другу конфигурацију, то можете урадити са следећим три изборна атрибута:

дата-тект за текст који желите да укључите у дељење

дата-урл за УРЛ који желите да делите

атрибуција података за име особе или провајдера којем желите да се припише ваш удио

Унцонфигуред Схаре Буттонс

Да бисте приказали друштвене тастере за дељење за унцонфигуред провидерс, као што је ВхатсАпп, морате одредите прилагођени протокол провајдера у дата-схаре-ендпоинт аттрибуте. Проверите у документима како то можете да урадите.

Скрипта за укључивање:
  