8 AMP-componenten voor integratie van sociale media
Het grootste conflict dat de mobiele webstandaard van Google vormt, Versnelde mobiele pagina's moet oplossen is mobiele sites sneller maken, terwijl ze functioneel en rijk aan inhoud houden. Tegenwoordig is een rijke en boeiende inhoud nauwelijks voorstelbaar zonder ingesloten te zijn van populaire sociale mediasites - tweets, video's, audio, berichten, foto's.
Uitgebreide AMP-componenten - onder andere geweldige functies - een geweldige manier om te integreren AMP documenten met verschillende sociale inhoudstypen.
Hoe Extended AMP-componenten werken
In de kern van AMP's filosofie zijn er Google's beste uitvoeringspraktijken. Om de laadtijd van pagina's te verbeteren, beperken de AMP-normen hoe u front-endtechnologieën kunt gebruiken. U kunt bijvoorbeeld geen aangepast JavaScript, externe stylesheets en een HTML-element gebruiken dat externe bronnen laadt, zoals de
In ruil daarvoor krijg je een heleboel AMP-componenten je kunt gebruiken om externe bronnen weergeven, zoals afbeeldingen, video's, audio's, advertenties, enz. op uw site.
AMP-componenten zijn specifieke HTML-tags die op dezelfde manier kan worden gebruikt als gewone HTML-tags. Een paar van hen zijn ingebouwd naar de AMP-looptijd, terwijl de meerderheid werkt als extensies. Componenten die sociale-media-integratie mogelijk maken op AMP-pagina's zijn alle verlengde componenten.
Voor uitgebreide AMP-componenten moet u dit doen importeer het bijbehorende script in de sectie van uw AMP HTML-document. Aangezien AMP een open-sourceproject is, kan het aantal uitgebreide componenten in de toekomst toenemen.
In deze post hebben we een handvol AMP-componenten verzameld die u kunnen helpen met integratie van sociale media. Houd er rekening mee dat de versies van de scripts kan in de loop van de tijd veranderen, dus bekijk altijd de documentatie voordat u ze op uw site plaatst.
1. amp-facebook
Dat moet je altijd doen specificeer de afmetingen van de ingesloten post, wat betekent dat je een moet toevoegen breedte en een hoogte attribuut met waarden in gehele pixels. Je kunt de juiste afmetingen vinden door op het menu "Insluiten" boven aan de Facebook-post te klikken.
Je bent ook verplicht om voeg de URL van het gegeven bericht toe in de data-href attribuut. U kunt de URL vinden door op de tijdstempel van de Facebook-post te klikken en de browser zal de unieke URL in de adresbalk invoegen.
Als je wilt een video insluiten zonder de bijbehorende Facebook-post, voeg de optionele toe -Data embed-as = "video" attribuut
Als je wilt maak je insluiten responsief gebruik de lay-out attribuut met de "Responsieve" waarde. U kunt ook de optionele gebruiken lay-out attribuut op een ander AMP-onderdeel om de lay-out te regelen.
Codevoorbeeld:
Voorbeeld code:
Script om op te nemen:
2. amp-twitter
Jij kan embed tweets naar AMP-pagina's met behulp van de
Om dit te doen, moet je geef de ID van de tweet op in de data-tweetid attribuut. U kunt wijzigen hoe de tweet wordt weergegeven door een van de weergavemogelijkheden van de Twitter APi toe te voegen als een gegevens-* HTML5-kenmerk.
In het onderstaande voorbeeld heb ik bijvoorbeeld de Twitter API's gebruikt link kleur weergaveoptie als datalink-color (haar gegevens-* formaat) om de standaardlinkkleur te wijzigen in de kleur die Hongkiat.com op zijn Twitter-account gebruikt.
Codevoorbeeld:
Voorbeeld code:
De Twitter biedt momenteel geen API die een vaste aspectratio oplevert van Tweet insluiten
.
Dit betekent dat u dat moet doen stel handmatig de breedte en hoogte attributen, omdat de AMP-runtime soms een deel (meestal de onderkant) van de tweet niet weergeeft.
Het is altijd een goed idee om te controleren hoe uw ingesloten tweets eruit zien voordat u de AMP-pagina publiceert.
Voeg een tijdelijke aanduiding toe
Hoewel het niet verplicht is, beveelt de documentatie aan een tijdelijke aanduiding toevoegen in het geval de tweet niet meteen laadt.
De placeholder kenmerk kan op elk AMP-onderdeel worden gebruikt. De tijdelijke aanduiding is onmiddellijk getoond als de uiteindelijke middelen niet beschikbaar zijn. Wanneer het AMP-element wordt geladen, wordt het verbergt zijn tijdelijke aanduiding.
Bekijk hoe de bovenstaande voorbeeldcode eruitziet met een tijdelijke aanduiding. Op Twitter heb ik eenvoudigweg op de knop Tweet insluiten geklikt, de inbeddende blockquote gekopieerd (zonder het script aan het einde) en de placeholder toeschrijven aan de label.
Code-voorbeeld met placeholder:
Hoe versnelde mobiele pagina's te valideren (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- Hongkiat (@hongkiat) 15 augustus 2016
Script om op te nemen:
3. amp-instagram
Met
U bent verplicht om geef de afmetingen op van de embed met de breedte en hoogte attributen, en je moet ook voeg de identifier toe van de Instagramfoto of -video met behulp van de data-shortcode attribuut.
U vindt de ID aan het einde van de URL, voor het voorbeeld voor de onderstaande foto is de URL https://www.instagram.com/p/-PFt7tF8Km/, dus ik moet gebruiken -PFt7tF8Km als waarde voor de data-shortcode attribuut.
Codevoorbeeld:
Voorbeeld code:
Voor responsieve lay-outs, AMP berekent automatisch de benodigde ruimte die ook omvat de “Instagram chrome” (accountnaam, datum, aantal vind-ik-leuks, enz.).
Dit betekent dat u elke waarde kunt gebruiken voor breedte en hoogte, tot de twee waarden zijn gelijk (Instagram-foto's zijn meestal vierkant), omdat de AMP-runtime het formaat van de afbeelding zal aanpassen aan de beschikbare ruimte.
Als de foto geen vierkant is, moet u de werkelijke opgeven breedte en hoogte waarden.
Voor vaste lay-outs, je moet inclusief de extra ruimte (boven en onder: +48 px, links en rechts: + 8 px) nodig voor Instagram-chrome bij het berekenen van de afbeeldingsdimensies.
Script om op te nemen:
4. amp-Pinterest
Sluit een Pin Widget in
Als u een Pin-widget wilt insluiten, moet u de dimensies opgeven, de URL van de pin met behulp van de data-url attribuut, en u moet ook het data-do = "embedPin" attribuut.
Codevoorbeeld (standaardgrootte):
Omdat de standaard Pin-widget vrij klein is, kunt u ook kiezen voor een grotere versie met behulp van de data-width = "medium" attribuut.
Codevoorbeeld (gemiddelde grootte):
Voorbeeld code (gemiddelde grootte):
Toon een Pin It-knop
Je kan ook voeg een Pin It-knop toe naar uw AMP-pagina met behulp van de breedte en hoogte afmetingen, dat ben je vereist om vier attributen te specificeren om de Pin It-knop in te sluiten:
data-do = "buttonpin"om de AMP-runtime te laten weten dat dit een Pin It-knop isdata-urlmet de URL die u wilt delendata-mediamet de absolute URL van de afbeelding die gebruikers moeten vastzettendata-beschrijvingmet de beschrijving die u wilt weergeven in het formulier Pin create
Er zijn veel verschillende knopmaten, om uit te kiezen, controleer de documentatie voor alle beschikbare formaten.
Codevoorbeeld:
In dit voorbeeld heb ik een Pin It-knop gemaakt waarmee gebruikers een afbeelding van dit voormalige Hongkiat.com-bericht kunnen pinnen. Ik heb de kleine rechthoekige knopgrootte gebruikt.
Voorbeeld code:
Merk op dat je extra CSS moet gebruiken om de Pin It-knop bovenop de afbeelding weer te geven.
U kunt ook een Pinterest Follow-knop maken met behulp van de data-do = "buttonFollow" attribuut en geef de naam op die u wilt weergeven in de knop Volgen in de data-label & de URL van uw account in de data-href attribuut.
Codevoorbeeld (volgknop):
Script om op te nemen:
5. amp-SoundCloud
SoundCloud is een populair audio-distributieplatform waar gebruikers hun muziek kunnen delen. Met de hulp van de
Dit onderdeel kan alleen gebruikt met vaste hoogte lay-out wat betekent dat je alleen de hoogte, en de breedte wordt berekend door de AMP-runtime. Als gevolg hiervan zal de ingebouwde SoundCloud-audiospeler dat doen vul alle beschikbare horizontale ruimte in.
De data-visuele attribuut aan een van beiden waar of vals (de standaard is vals).
In beide modi moet u de data-TrackID attribuut aan geef de ID op van de audio; je kunt de audio-ID vinden door op de knop Delen onder de audiospeler op SoundCloud.com te klikken en de lange formulier-URL in de embed-code op te zoeken.
Klassieke modus
De Klassieke modus toont een kleine miniatuurafbeelding aan de linkerkant en de audiospeler aan de rechterkant. U kunt de juiste waarde krijgen voor de hoogte attribuut van de embed code op SoundCloud.com.
In de Klassieke modus kunt u de kleur van de audiospeler opgeven als u de data-color kenmerk (u kunt dit niet doen in de visuele modus).
Codevoorbeeld (klassieke modus):
Code preview (klassieke modus):
Visuele modus
In Visuele modus, de afgebeelde afbeelding loopt achter de audiospeler. Hier kun je ook het juiste vinden hoogte behorend tot de Visual Mode in de Embed code op SoundCloud.com.
Codevoorbeeld (visuele modus):
Codevoorbeeld (visuele modus):
Als je wilt embed een privéaudio, gebruik de optionele data-secret-token attribuut.
Script om op te nemen:
6. amp-vine
Vine is een korte video-sharing-site waarop je video's van 6 seconden kunt delen met je vrienden. De
Deze AMP-component is vrij eenvoudig, je hoeft alleen de dimensies toe te voegen en de ID van de Vine-video in de data-vineid attribuut. U kunt de ID verkrijgen via de URL van elke Vine.
Aangezien Vines vierkanten zijn, geldt dezelfde regel als bij instaps op Instagram als u de responsieve lay-out gebruikt; u kunt elke waarde toevoegen aan de breedte en hoogte attributen, totdat ze gelijk zijn ze zullen goed werken.
Codevoorbeeld:
Voorbeeld code:
Script om op te nemen:
7. amp-youtube
Jij kan YouTube-video's insluiten op AMP-pagina's met behulp van de
Om dit te doen, moet je de dimensies toevoegen, plus de ID van de video in de data-VideoId attribuut. Bij het opgeven breedte en hoogte, het is belangrijk om let op de beeldverhouding.
Je kan ook gebruik de parameters van ingesloten YouTube in AMP-documenten voegt u gewoon de naam van de parameter in na de data-param- voorvoegsel.
Codevoorbeeld:
In dit voorbeeld heb ik gebruik gemaakt van de begin YouTube-parameter in de data-param-start attribuut om de video op 43s te laten beginnen.
Voorbeeld code:
Script om op te nemen:
Andere diensten voor het delen van video's
AMP bevat ook componenten die zijn gerelateerd aan andere services voor het delen van video's werken op dezelfde manier als
8. amp-sociaal-aandeel
Afgezien van ingesloten sociale media, kunt u ook knoppen voor sociaal delen weergeven op uw AMP-pagina's met behulp van de
De functie voor sociaal delen is voorgeconfigureerd voor sommige providers, maar met de juiste instellingen kunt u de
Voorgeconfigureerde deelknoppen
Vooraf geconfigureerde deelknoppen vereisen niet te veel instellingen; je moet de definiëren breedte (standaard is 60px) en hoogte (standaard is 44px) kenmerken en de naam van de aanbieder van sociale media in de type attribuut.
Met Facebook moet je ook de Facebook-app-id opgeven in de data-param-APP_ID attribuut.
Codevoorbeeld:
Voorbeeld code:
De pre-configuratie maakt veronderstellingen dat de URL die u wilt delen de canonieke URL van de huidige pagina is en dat de tekst die u in uw share wilt opnemen de paginatitel is.
Als u een andere config wilt gebruiken, kunt u dat doen met het volgende drie optionele attributen:
data-textvoor de tekst die u in de share wilt opnemendata-urlvoor de URL die u wilt delendata-attributievoor de naam van de persoon of aanbieder aan wie u uw aandeel wilt toeschrijven
Niet-geconfigureerde knoppen voor delen
Om sociale share-knoppen van weer te geven niet-geconfigureerde providers, zoals WhatsApp, dat moet specificeer het aangepaste protocol van de provider in de data-share-eindpunt attribuut. Bekijk in de documentatie hoe u dit kunt doen.
Script om op te nemen:
