8 AMP-komponenter för social mediaintegration

Den största konflikten som Googles mobila webbstandard, Accelererade mobil sidor behöver lösa är gör mobila webbplatser snabbare, medan hålla dem funktionella och rik på innehåll. Dessa dagar rika och engagerande innehåll kan knappast föreställas utan inlägg från populära sociala medier webbplatser - tweets, video, ljud, inlägg, foton.

Utökade AMP-komponenter - bland annat bra funktioner - ger ett bra sätt att integrera AMP dokument med olika sociala innehållstyper.

Hur Extended AMP-komponenter fungerar

Kärnan i AMP: s filosofi finns Googles bästa prestanda. För att förbättra sidbelastningstider begränsar AMP-standarderna hur du kan använda avancerad teknik. Du kan till exempel inte använda anpassade JavaScript, externa formatmallar och något HTML-element som laddar externa resurser, till exempel märka.

I utbyte får du en massa AMP-komponenter du kan använda till visa externa resurser, som bilder, videoklipp, ljud, annonser etc. på din webbplats.

AMP-komponenter är specifika HTML-taggar som kan användas på samma sätt som vanliga HTML-taggar. Några av dem är inbyggd till AMP-körtiden, medan majoriteten fungerar som tillägg. Komponenter som möjliggör social media integration på AMP-sidor är alla utökade komponenter.

Utökade AMP-komponenter kräver att du importera det tillhörande skriptet i del av ditt AMP HTML-dokument. Eftersom AMP är ett open-source-projekt kan antalet utökade komponenter växa framöver.

I det här inlägget har vi samlat in en handfull AMP-komponenter som kan hjälpa dig med social media integration. Tänk på att versionerna av skripten kan ändras över tiden, så kolla alltid dokumentationen innan du tar med dem på din webbplats.

1. `amp-facebook`

gör det möjligt att bädda in en Facebook-post eller video till en AMP-sida.

Du behöver alltid Ange dimensionerna för det inbäddade inlägget, vilket innebär att du måste lägga till en bredd och a höjd attribut med värden i heltalspixlar. Du kan hitta rätt dimensioner genom att klicka på menyn "Bädda in" på toppen av Facebook-posten.

Du är också skyldig att lägg till webbadressen till det angivna inlägget i data href attribut. Du kan hitta webbadressen genom att klicka på tidsstämpeln för Facebook-posten, och webbläsaren sätter in den unika URL-adressen i adressfältet.

Om du vill Bädda in en video utan det tillhörande Facebook-inlägget, lägg till tillvalet data bädda-as = "video" attribut

Om du vill gör din inbädda mottaglig Använd layout attribut med "mottaglig" värde. Du kan också använda valfri layout attribut på någon annan AMP-komponent för att styra dess layout.

Kod exempel:

Kodförhandsvisning:

Skript att inkludera:

2. `amp-twitter`

Du kan bädda in tweets till AMP-sidor genom att använda komponent.

För att göra det måste du Ange tweetets ID i data tweetid attribut. Du kan ändra hur tweeten visas genom att lägga till några av de visningsalternativen på Twitter APi som en data-* HTML5-attributet.

Till exempel, i exemplet nedan använde jag Twitter API: er linkColor visningsalternativ som datalänk-färg (dess data-* format) för att ändra standardlänkfärgen till färgen Hongkiat.com använder på sitt Twitter-konto.

Kod exempel:

Kodförhandsvisning:

De komponent är inte perfekt ännu, säger Github docs det Twitter tillhandahåller för närvarande inte ett API som ger fast bildförhållande Tweet embeds.

Det betyder att du behöver ställ in manuellt bredd och höjd attribut, som AMP-runtime visar ibland inte en del (vanligtvis botten) av tweeten.

Det är alltid en bra idé att kolla hur dina inbäddade tweets ser ut innan du publicerar AMP-sidan.

Lägg till en platshållare

Även om det inte är nödvändigt rekommenderar dokumentationen lägger till en platshållare om tweet inte laddas på en gång.

De platshållare attributet kan användas på varje AMP-komponent. Platshållaren är visas omedelbart om de slutliga resurserna inte är tillgängliga. När AMP-elementet laddas, det gömmer sin platshållare.

Ta en titt på hur ovanstående exempelkod ser ut med en platshållare. På Twitter klickade jag helt enkelt på knappen Bädda in tweet, kopiera klistra in den inbäddade blockquote (utan scriptet i slutet) och lade till platshållare attribut till

märka.

Kodsexempel med platshållare:
   Hur man styrker accelererade mobilsidor (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15 augusti 2016 
  
Skript att inkludera:
  
3. amp-instagram

Med , du kan bädda in Instagrams foton och videoklipp in i dina AMP-sidor.

Du är skyldig att Ange dimensionerna av inbäddat med bredd och höjd attribut, och du måste också lägg till identifieraren av Instagram-fotot eller videon med hjälp av data kortkod attribut.

Du kan hitta identifieraren i slutet av webbadressen, för exemplet för fotot nedan är URL-adressen https://www.instagram.com/p/-PFt7tF8Km/, så jag måste använda -PFt7tF8Km som värde för data kortkod attribut.

Kod exempel:
   
Kodförhandsvisning:

För responsiva layouter, AMP beräknar automatiskt det nödvändiga utrymmet som också inkluderar “Instagram krom” (kontonamn, datum, antal liknande osv).

Det betyder att du kan använda något värde för bredd och höjd, tills två värden är lika (Instagram-bilder är vanligtvis fyrkantiga), eftersom AMP-körtiden kommer att ändra storlek på bilden i enlighet med tillgängligt utrymme.

Om fotot inte råkar vara en kvadrat måste du ange det faktiska bredd och höjd värden.

För fasta layouter, du behöver inkludera extra utrymme (topp och botten: +48 px, vänster och höger: + 8px) behövs för Instagram-krom när du beräknar bildens mått.

Skript att inkludera:
  
4. amp-pinterest

tillåter dig att Bädda in antingen en Pin-widget eller en Pin It-knapp in i ett AMP HTML-dokument.

Bädda in en Pin Widget

För att bädda in en Pin-widget måste du ange dimensionerna, URL-adressen till pinen med hjälp av uppgifter-url attribut, och du måste också lägga till data do = "embedPin" attribut.

Kodsexempel (standardstorlek):
   
Eftersom standard Pin-widgeten är ganska liten kan du också välja en större version med hjälp av data width = "medium" attribut.

Kodsexempel (medelstorlek):
   
Kodförhandsgranskning (medelstorlek):

Visa en Pin It-knapp

Du kan också lägg till en Pin It-knapp till din AMP-sida med hjälp av komponent. Förutom bredd och höjd dimensioner, du är krävs för att ange fyra attribut för att bädda in pin-knappen:

data do = "buttonPin" att låta AMP-körtiden veta att detta kommer att bli en Pin It-knapp

uppgifter-url med webbadressen du vill dela

datamedia med den absoluta webbadressen till bilden som du vill att användarna ska stifta

data beskrivning med beskrivningen du vill visas i formuläret Skapa pin

Det finns många olika knappstorlekar, att välja mellan, kontrollera dokumenten för alla tillgängliga storlekar.

Kod exempel:

I det här exemplet skapade jag en Pin It-knapp som skulle tillåta användare att stifta en bild från det här tidigare Hongkiat.com-inlägget. Jag använde den lilla rektangulära knappstorleken.
      
 
Kodförhandsvisning:

Observera att du måste använda ytterligare CSS för att visa Pin It-knappen ovanpå bilden.

Du kan också skapa en Pinterest Follow-knapp med hjälp av data do = "buttonFollow" attribut och ange det namn du vill visa inuti knappen Följ i dataetikett & URL för ditt konto i data href attribut.

Kodsexempel (Följ knapp):
   
Skript att inkludera:
  
5. amp-soundcloud

SoundCloud är en populär ljuddistributionsplattform där användare kan dela sin musik. Med hjälp av komponent du kan spela SoundCloud spår direkt från din AMP HTML-sida.

Denna komponent kan endast användas med fast-höjd layout vilket innebär att du bara behöver ange höjd, och bredden kommer att beräknas med AMP runtime. Som ett resultat kommer den inbyggda SoundCloud ljudspelaren att fyll i allt tillgängligt horisontellt utrymme.

De komponent kan visas i antingen klassiskt eller visuellt läge. Du kan välja mellan de två lägena genom att ställa in värdet på uppgifter visuell attribut till heller Sann eller falsk (standardvärdet är falsk).

I båda lägena måste du använda data TrackID tillskriva Ange identifieraren av ljudet; du kan hitta ljud-id genom att klicka på knappen Dela under ljudspelaren på SoundCloud.com och titta upp länken med lång form i inbäddningskoden.

Klassiskt läge

De Klassiskt läge visar en liten miniatyrbild till vänster och ljudspelaren till höger. Du kan få rätt värde för höjd attribut från inbäddningskoden på SoundCloud.com.

I klassiskt läge kan du ange färgen på ljudspelaren om du vill använda data färg attribut (du kan inte göra det i visuellt läge).

Kodsexempel (klassiskt läge):
   
Kodförhandsgranskning (klassiskt läge):

Visuellt läge

I Visuellt läge, den presenterade bilden spänner bakom ljudspelaren. Här kan du också hitta rätt höjd som hör till visningsmodus i inbyggningskoden på SoundCloud.com.

Kodsexempel (visuellt läge):
   
Kodsexempel (visuellt läge):

Om du vill bädda in ett privat ljud, använd valfri data secret-token attribut.

Skript att inkludera:
  
6. amp-vine

Vine är en kortformad videodelningsplats där du kan dela 6 sekunders långa videoklipp med dina vänner. De komponent gör det möjligt att enkelt Bädda in Vine-videor in på dina AMP HTML-sidor.

Denna AMP-komponent är ganska enkel, du behöver bara lägga till dimensionerna och Vine-videoens ID i data vineid attribut. Du kan få ID från URL för varje Vine.

Eftersom vinstockar är rutor, om du använder den responsiva layouten gäller samma regel som med Instagram-funktionerna; du kan lägga till något värde till bredd och höjd attribut, tills de är lika de ska fungera ordentligt.

Kod exempel:
   
Kodförhandsvisning:

Skript att inkludera:
  
7. amp-youtube

Du kan bädda in YouTube-videor på AMP sidor med hjälp av komponent.

För att göra det måste du lägga till dimensionerna plus videoens ID i data VideoId attribut. När du specificerar bredd och höjd, det är viktigt att var uppmärksam på bildförhållandet.

Du kan också använd parametrarna för YouTube-tjänsten I AMP-dokument anger du bara parameterns namn efter data param- prefix.

Kod exempel:

I det här exemplet användes jag av Start YouTube-parametern i data param-start attribut för att göra videon början på 43-talet.
   
Kodförhandsvisning:

Skript att inkludera:
  
Andra videodelningstjänster

AMP har också komponenter som är relaterade till andra videodelningstjänster, det fungerar på samma sätt som . Du kan använda följande utökade AMP-komponenter för videoinrättningar från andra leverantörer än YouTube:

för Vimeo embeds

för Dailymotion embeds

för Brightcove embeds

8. amp-social-share

Förutom sociala medier, kan du också visa sociala delar knappar på dina AMP-sidor med hjälp av komponent.

Den sociala delfunktionen är förkonfigurerade för vissa leverantörer, men med rätt inställningar kan du använda komponent för alla andra sociala delknappar.

Förkonfigurerade delknappar

Förkonfigurerade delknappar kräver inte för många inställningar du måste definiera bredd (standard är 60px) och höjd (standard är 44px) attribut, och namnet på social media leverantören i typ attribut.

Med Facebook måste du också ange Facebook app id i data param-APP_ID attribut.

Kod exempel:
                    
 
Kodförhandsvisning:

Förkonfigurationen gör antaganden att webbadressen du vill dela är den kanoniska webbadressen för den aktuella sidan och texten som du vill inkludera i din del är sidtiteln.

Om du vill använda en annan konfiguration kan du göra det med följande tre valfria attribut:

data text för den text du vill inkludera i delningen

uppgifter-url för webbadressen du vill dela

dataskrivning för namnet på den person eller leverantör som du vill att din del ska hänföras till

Okonfigurerade delknappar

För att visa sociala delningsknappar för okonfigurerade leverantörer, som WhatsApp, behöver du Ange leverantörens anpassade protokoll i uppgifter-share-endpoint attribut. Kolla in i dokumenten hur du kan göra detta.

Skript att inkludera:
  