8 AMP komponenti sociālo mediju integrācijai
Lielākais konflikts, ko Google mobilais interneta standarts ir, Paātrinātas mobilās lapas ir jāatrisina padarīt mobilās vietnes ātrākas, kamēr saglabājot tos funkcionālus un bagātīgus. Mūsdienās bagātīgs un saistošs saturs var tikt iedomāts, ja nav iegultas populāras sociālo mediju vietnes - tweets, video, audio, ziņas, fotoattēli.
Paplašināti AMP komponenti - starp citām lieliskām funkcijām - ir lielisks veids, kā integrēties AMP dokumenti ar dažādiem sociālā satura veidiem.
Kā darbojas AMP komponentes
AMP filozofijas pamatā ir Google labākās darbības metodes. Lai uzlabotu lapas ielādes laiku, AMP standarti ierobežo kā jūs varat izmantot front-end tehnoloģijas. Piemēram, jūs nevarat izmantot pielāgotus JavaScript, ārējās stilu un HTML elementus, kas ielādē ārējos resursus, piemēram,
Apmaiņā jūs saņemsiet ķekars AMP komponenti jūs varat izmantot parādīt ārējos resursus, piemēram, attēlus, videoklipus, audio, reklāmas utt. jūsu vietnē.
AMP komponenti ir konkrēti HTML tagi to var izmantot līdzīgi kā parastajiem HTML tagiem. Daži no tiem ir iebūvēts AMP izpildlaika laikā, kamēr vairākums darbojas kā paplašinājumi. Komponenti, kas padara sociālo mediju integrāciju iespējamu AMP lapās visas paplašinātās sastāvdaļas.
Paplašinātā AMP komponenti prasa importēt piederīgo skriptu iekš jūsu AMP HTML dokumenta sadaļu. Tā kā AMP ir atklātā pirmkoda projekts, paplašināto komponentu skaits nākotnē var pieaugt.
Šajā amatā mēs esam savākuši nedaudz AMP komponentu, kas var jums palīdzēt ar sociālo mediju integrāciju. Ņemiet vērā, ka skriptu versijas var mainīties laika gaitā, tāpēc vienmēr pārbaudiet dokumentāciju, pirms tos ievietojat savā vietnē.
1. facebook
Jums vienmēr ir nepieciešams norādiet iegulto ziņu izmērus, tas nozīmē, ka jums ir nepieciešams pievienot a platums un a augstums atribūts ar vērtībām veselu skaitļu pikseļos. Pareizos izmērus var atrast, noklikšķinot uz izvēlnes "Iegult" Facebook ziņojuma augšpusē.
Jums ir arī nepieciešams pievienojiet norādītā ziņojuma URL iekš data-href atribūts. URL var atrast, noklikšķinot uz Facebook ziņas laikspiedola, un pārlūkprogramma adrešu joslā ievietos unikālo URL.
Ja Tu gribi iegultu videoklipu bez īpaša Facebook ziņojuma, pievienot izvēles data-embed-as = "video" atribūts
Ja Tu gribi padariet savu iegultu atsaucīgu izmantot izkārtojums atribūts ar "atsaucīgs" vērtību. Varat arī izmantot izvēles izkārtojums jebkura cita AMP komponenta atribūts, lai kontrolētu tā izkārtojumu.
Kodu piemērs:
Kodu priekšskatījums:
Skripts, kas ietver:
2. amp-Twitter
Jūs varat iegult tweets AMP lapās, izmantojot
Lai to izdarītu, jums ir nepieciešams norādiet čivināt ID iekš datu-tweetid atribūts. Jūs varat modificēt, kā tiek rādīts čivināt, pievienojot jebkuru no čivināt APi opcijām kā a datu- * HTML5 atribūts.
Piemēram, zemāk redzamajā piemērā es izmantoju čivināt API linkColor displeja opcija kā datu saites krāsa (tā datu- * formātā), lai mainītu noklusējuma saites krāsu uz krāsu Hongkiat.com, kas tiek izmantota tās Twitter kontā.
Kodu piemērs:
Kodu priekšskatījums:
The Twitter pašlaik nenodrošina API, kas dod fiksētu attēla attiecību Tweet iegultās
.
Tas nozīmē, ka jums ir nepieciešams manuāli iestatiet platums un augstums atribūti, kā AMP izpildlaika reizēm nerāda daļu (parasti apakšējā) čivināt.
Vienmēr ir laba ideja pirms AMP lapas publicēšanas pārbaudīt, kā izskatās jūsu iegultie tweets.
Pievienojiet vietas īpašnieku
Lai gan tas nav nepieciešams, dokumentācija iesaka vietas vietas pievienošana ja čivināt netiek ielādēts uzreiz.
The vietas rezervētājs atribūtu var izmantot katram AMP komponentam. Vietas vārds ir uzreiz parādīts ja galīgie resursi nav pieejami. Kad AMP elements tiek ielādēts, tas notiek slēpj savu vietnieku.
Apskatiet, kā izskatās iepriekš minētais piemēru kods ar vietas rezervētāju. Čivināt, es vienkārši noklikšķināju uz pogas Embed Tweet, nokopējot ielīmējamo bloknoti (bez skripta beigās) un pievienojāt vietas rezervētājs atribūtu tag.
Kodu piemērs ar vietas apzīmējumu:
Kā apstiprināt paātrinātās mobilās lapas (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 2016. gada 15. augusts
Skripts, kas ietver:
3. amp-instagram
Ar
Jums ir pienākums norādiet izmērus no iegultā platums un augstums atribūti, un jums ir arī pievienojiet identifikatoru izmantojot Instagram fotoattēlu vai videoklipu, izmantojot datu īssavienojums atribūts.
Identifikatoru var atrast URL beigās, lai redzētu fotoattēlu zem URL https://www.instagram.com/p/-PFt7tF8Km/, tāpēc man ir jāizmanto -PFt7tF8Km kā vērtību datu īssavienojums atribūts.
Kodu piemērs:
Kodu priekšskatījums:
Par atsaucīgiem izkārtojumiem, AMP automātiski aprēķina nepieciešamo telpu, kas arī ir ietver “Instagram hroms” (konta nosaukums, datums, patīkamais skaits utt.).
Tas nozīmē, ka varat izmantot jebkuru vērtību platums un augstums, līdz divas vērtības ir vienādas (Instagram fotoattēli parasti ir kvadrātveida), jo AMP izpildlaiks mainīs attēla izmērus atkarībā no pieejamās vietas.
Ja fotoattēls nenotiek laukumā, jānorāda tā faktiskais platums un augstums vērtības.
Par fiksēti izkārtojumi, tev vajag iekļaut papildu telpu (augšējā un apakšējā: +48 px, pa kreisi un pa labi: + 8px), kas nepieciešami Instagram hromam, kad aprēķināt attēla izmērus.
Skripts, kas ietver:
4. amp-pinterest
Ievietojiet PIN logrīku
Lai iegultu Pin logrīku, jums ir jānorāda izmēri, tapas URL, izmantojot data-url atribūts, un jums arī jāpievieno data-do = "embedPin" atribūts.
Kodu piemērs (noklusējuma lielums):
Tā kā noklusējuma PIN logrīks ir diezgan mazs, varat arī izvēlēties lielāku versiju, izmantojot data-width = "medium" atribūts.
Kodu piemērs (vidēja izmēra):
Kodu priekšskatījums (vidēja izmēra):
Parādīt pogu Pin It
Jūs varat arī pievienojiet pogu Pin It uz jūsu AMP lapu ar platums un augstums izmēri, jūs esat jānorāda četri atribūti lai ievietotu pogu Pin It:
data-do = "buttonPin"lai ļautu AMP darbības laikam zināt, ka tas būs Pin It pogadata-urlar URL, kuru vēlaties kopīgotdatu nesējiemar tā attēla absolūto URL, kuru vēlaties, lai lietotāji varētu piespraustdatu aprakstsar aprakstu, kuru vēlaties parādīt veidlapas veidlapā
Tur ir daudz dažādu pogu, lai izvēlētos, pārbaudiet visus pieejamos izmērus.
Kodu piemērs:
Šajā piemērā es izveidoju pogu Pin It, kas ļautu lietotājiem piesaistīt attēlu no šī bijušā Hongkiat.com ziņojuma. Es izmantoju mazo taisnstūra pogas izmēru.
Kodu priekšskatījums:
Ņemiet vērā, ka, lai parādītu Pin It pogu attēla augšpusē, ir jāizmanto papildu CSS.
Jūs varat izveidot arī Pinterest sekošanas pogu, izmantojot data-do = "buttonFollow" atribūtu, un norādiet nosaukumu, kuru vēlaties attēlot pogas Sekot datu zīme un sava konta URL data-href atribūts.
Kodu piemērs (sekošanas poga):
Skripts, kas ietver:
5. amp-soundcloud
SoundCloud ir populāra audio izplatīšanas platforma, kurā lietotāji var dalīties ar savu mūziku. Ar
Šis komponents var izmanto tikai kopā ar fiksēts augstums izkārtojums tas nozīmē, ka jums tikai jānorāda augstums, un platums tiks aprēķināts pēc AMP izpildlaika. Rezultātā iegultais SoundCloud audio atskaņotājs aizpildiet visu pieejamo horizontālo telpu.
The datu vizuālā atribūtu taisnība vai nepatiesa (noklusējums ir nepatiesa).
Abos režīmos ir jāizmanto datu izsekojamība atribūts norādiet identifikatoru audio; audio ID var atrast, noklikšķinot uz pogas Koplietot, kas atrodas zem audio atskaņotāja SoundCloud.com, un meklējot garo formātu URL, kas atrodas Embed kodā.
Klasiskais režīms
The Klasiskais režīms kreisajā pusē parāda nelielu sīktēlu un labajā pusē - audio atskaņotāju. Jūs varat saņemt pareizo vērtību augstums atribūts no Embed koda SoundCloud.com.
Klasiskajā režīmā varat norādīt audio atskaņotāja krāsu, ja vēlaties to izmantot datu krāsa atribūts (to nevar izdarīt vizuālajā režīmā).
Kodu piemērs (klasiskais režīms):
Kodu priekšskatījums (klasiskais režīms):
Vizuālais režīms
In Vizuālais režīms, attēlā redzamais attēls aiz audio atskaņotāja. Šeit jūs varat arī atrast pareizo augstums SoundCloud.com iegultā kodā pieder Visual Mode.
Kodu piemērs (vizuālais režīms):
Kodu piemērs (vizuālais režīms):
Ja Tu gribi iegultu privātu audio, izmantot izvēles datu noslēpums atribūts.
Skripts, kas ietver:
6. amp-vīnogulāju
Vīnogulāji ir īslaicīga video koplietošanas vietne, kurā varat ar saviem draugiem koplietot 6 sekunžu garus videoklipus. The
Šis AMP komponents ir diezgan vienkāršs, jums tikai jāpievieno Vine video izmēri un ID datu vineid atribūts. ID var iegūt no katra vīna URL.
Tā kā vīnogulāji ir kvadrāti, ja izmantojat atsaucīgo izkārtojumu, tas pats noteikums attiecas uz Instagram ieliktņiem; jūs varat pievienot jebkuru vērtību platums un augstums atribūti, līdz tie ir vienādi viņi pareizi darbosies.
Kodu piemērs:
Kodu priekšskatījums:
Skripts, kas ietver:
7. amp-youtube
Jūs varat iegult YouTube videoklipus AMP lapās, izmantojot
Lai to izdarītu, ir jāpievieno video izmēri, kā arī ID ID datu videoid atribūts. Norādot platums un augstums, tas ir svarīgi pievērsiet uzmanību proporcijai.
Jūs varat arī izmantojiet YouTube iegultu parametrus AMP dokumentos vienkārši ievadiet parametra nosaukumu pēc tam, kad data-param- priedēklis.
Kodu piemērs:
Šajā piemērā es izmantoju sākt YouTube parametrs data-param-start atribūts, lai video sāktu no 43s.
Kodu priekšskatījums:
Skripts, kas ietver:
Citi video koplietošanas pakalpojumi
AMP ir arī komponenti, kas saistīti ar citiem video koplietošanas pakalpojumiem strādā līdzīgi
8. amp-sociālā daļa
Bez sociālo mediju iegulšanas jūs varat arī parādīt sociālo daļu pogas AMP lapās, izmantojot
Sociālā daļa ir dažiem pakalpojumu sniedzējiem, bet ar pareizajiem iestatījumiem var izmantot
Iepriekš konfigurētas pogas
Iepriekš konfigurētas koplietošanas pogas neprasa pārāk daudz iestatījumu; jums ir jādefinē platums (noklusējums ir 60px) un augstums (noklusējums ir 44px) atribūti un sociālā mediju pakalpojumu sniedzēja nosaukums veids atribūts.
Izmantojot Facebook, jums ir arī jānorāda Facebook lietotnes ID data-param-app_id atribūts.
Kodu piemērs:
Kodu priekšskatījums:
Iepriekšēja konfigurācija pieņem pieņēmumus URL, kuru vēlaties koplietot, ir pašreizējās lapas kanoniskais URL, un teksts, kuru vēlaties iekļaut savā akcijā, ir lapas nosaukums.
Ja vēlaties izmantot citu konfigurāciju, to var izdarīt ar šādu trīs izvēles atribūti:
datu tekstspar tekstu, kuru vēlaties iekļaut akcijādata-urlURL, kuru vēlaties kopīgotdatu piešķiršanapar tās personas vai pakalpojuma sniedzēja vārdu, kuram vēlaties piešķirt jūsu akciju
Nekonfigurētas kopīgošanas pogas
Lai parādītu sociālo daļu pogas nekonfigurēti pakalpojumu sniedzēji, piemēram, WhatsApp, jums ir nepieciešams norādiet pakalpojumu sniedzēja pielāgoto protokolu iekš datu koplietošana atribūts. Pārbaudiet dokumentos, kā to izdarīt.
Skripts, kas ietver:
