8 AMP-componenten voor integratie van sociale media
Het grootste conflict dat Google's mobiele webstandaard, Accelerated Mobile Pages moet oplossen, is het sneller maken van mobiele sites, terwijl ze functioneel en rijk aan inhoud blijven . 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 - naast andere geweldige functies - vormen een uitstekende manier om AMP- documenten te integreren met verschillende typen sociale inhoud.
Hoe Extended AMP-componenten werken
In de kern van de filosofie van AMP zijn er de beste uitvoeringsmethoden van Google. 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 label.
In ruil daarvoor krijgt u een aantal AMP-componenten die u kunt gebruiken om externe bronnen, zoals afbeeldingen, video's, audio's, advertenties, enz. Op uw site weer te geven.
AMP-componenten zijn specifieke HTML-tags die op dezelfde manier kunnen worden gebruikt als gewone HTML-tags. Een paar daarvan zijn ingebouwd in de AMP-runtime, terwijl de meerderheid werkt als uitbreidingen . Componenten die integratie van sociale media op AMP-pagina's mogelijk maken, zijn allemaal uitgebreide componenten .
Voor uitgebreide AMP-componenten moet u het bijbehorende script importeren 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 bij integratie van sociale media . Houd er rekening mee dat de versies van de scripts na verloop van tijd kunnen veranderen, dus bekijk altijd de documentatie voordat u ze op uw site plaatst.
1. amp-facebook
maakt het mogelijk om een Facebook-bericht of -video in te bedden in een AMP-pagina.
U moet altijd de afmetingen van de ingesloten post opgeven, wat betekent dat u een width en height kenmerk moet toevoegen met waarden in gehele pixels. Je kunt de juiste afmetingen vinden door op het menu "Insluiten" boven aan de Facebook-post te klikken.
U moet ook de URL van het gegeven bericht toevoegen aan het kenmerk data-href . 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 een video wilt insluiten zonder het bijbehorende Facebook-bericht, voeg je het optionele kenmerk data-embed-as="video" toe
Als u wilt dat uw insluiting responsief wordt, gebruikt u het layout outkenmerk met de waarde "responsive" . U kunt ook het optionele layout outkenmerk op een ander AMP-onderdeel gebruiken om de lay-out te beheren.
Codevoorbeeld:
Voorbeeld code:
Script om op te nemen:
2. amp-twitter
U kunt tweets in AMP-pagina's insluiten met behulp van de component.
Hiertoe moet u de ID van de tweet in het kenmerk data-tweetid . U kunt wijzigen hoe de tweet wordt weergegeven door een van de weergavemogelijkheden van de Twitter APi toe te voegen als een kenmerk data data-* HTML5.
In het onderstaande voorbeeld heb ik bijvoorbeeld de linkColor weergave-optie van de Twitter API als data-link-color (zijn data-* formaat) gebruikt om de standaard linkkleur te veranderen in de kleur die Hongkiat.com op zijn Twitter-account gebruikt.
Codevoorbeeld:
Voorbeeld code:
De component is nog niet perfect, Github docs zegt dat Twitter momenteel geen API levert die een vaste aspectratio oplevert van Tweet insluiten .
Dit betekent dat u de kenmerken width en height handmatig moet instellen, omdat de AMP-runtime soms geen deel (meestal de onderkant) van de tweet 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 dit niet verplicht is, raadt de documentatie aan een tijdelijke aanduiding toe te voegen voor het geval de tweet niet meteen wordt geladen.
Het kenmerk placeholder kan op elk AMP-onderdeel worden gebruikt. De tijdelijke aanduiding wordt onmiddellijk weergegeven als de definitieve bronnen niet beschikbaar zijn. Wanneer het AMP-element wordt geladen, verbergt het de tijdelijke aanduiding .
Bekijk hoe de bovenstaande voorbeeldcode eruit ziet 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 het kenmerk placeholder aan de
label.
Code-voorbeeld met placeholder:
Hoe versnelde mobiele pagina's te valideren ( )
- Hongkiat (@hongkiat)
Script om op te nemen:
3. amp-instagram
Met , je kunt Instagram-foto's en -video's insluiten in je AMP-pagina's.
U moet de afmetingen van de insluiting opgeven met de kenmerken width en height en u moet ook de ID van de Instagram-foto of -video toevoegen met behulp van het attribuut data-shortcode .
U vindt de identifier 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 -PFt7tF8Km als waarde voor de data-shortcode kenmerk.
Codevoorbeeld:
Voorbeeld code:
Voor responsieve lay-outs berekent AMP automatisch de vereiste ruimte die ook het "Instagram-chroom" bevat (accountnaam, datum, aantal vind-ik-leuks, enz.).
Dit betekent dat je elke waarde voor width en height kunt gebruiken totdat de twee waarden gelijk zijn (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 width en height opgeven.
Voor vaste lay-outs moet je de extra ruimte (boven en onder: +48 px, links en rechts: + 8px) die nodig is voor de Instagram-chrome toevoegen wanneer je de afbeeldingsdimensies berekent.
Script om op te nemen:
4. amp-pinterest
kunt u een Pin-widget of een Pin It-knop insluiten in een AMP HTML-document.
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 het kenmerk data-url en moet u ook het kenmerk data-do="embedPin" .
Codevoorbeeld (standaardgrootte):
Omdat de standaard Pin-widget vrij klein is, kunt u ook kiezen voor een grotere versie met het kenmerk data-width="medium" .
Code voorbeeld (gemiddelde grootte):
Voorbeeld code (gemiddelde grootte):
Toon een Pin It-knop
U kunt ook een Pin It-knop toevoegen aan uw AMP-pagina met behulp van de component. Afgezien van de dimensies width en height, moet u vier attributen opgeven om de Pin It-knop in te sluiten:
data-do="buttonPin" om de AMP-runtime te laten weten dat dit een Pin It-knop is
data-url met de URL die u wilt delen
data-media met de absolute URL van de afbeelding die gebruikers moeten vastzetten
data-description met de beschrijving die u in het formulier Pin-aanmaken wilt weergeven
Er zijn veel verschillende knopgrootten waaruit u kunt 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.
Je kunt ook een Pinterest Follow-knop maken met het kenmerk data-do="buttonFollow" en de naam opgeven die je wilt weergeven op de knop Volgen in het data-label en de URL van je account in het kenmerk data-href .
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 component kunt u SoundCloud-nummers rechtstreeks vanuit uw AMP HTML-pagina afspelen .
Dit onderdeel kan alleen worden gebruikt met een fixed-height indeling, wat betekent dat u alleen de height hoeft op te geven en de breedte wordt berekend door de AMP-runtime. Als gevolg hiervan vult de geïntegreerde SoundCloud-audiospeler alle beschikbare horizontale ruimte .
De component kan in de klassieke of visuele modus worden weergegeven. U kunt uit de twee modi kiezen door de waarde van het data-visual kenmerk in te stellen op true of false (de standaardinstelling is false ).
In beide modi moet u het kenmerk data-trackid gebruiken om de id van de audio op te geven; 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 Classic Mode geeft links een kleine miniatuurafbeelding weer en rechts de audiospeler. U kunt de juiste waarde voor het kenmerk height via de insluitcode op SoundCloud.com.
In de Classic-modus kunt u de kleur van de audiospeler opgeven als u het kenmerk datakleur wilt gebruiken (u kunt dit niet doen in de visuele modus).
Codevoorbeeld (klassieke modus):
Code preview (klassieke modus):
Visuele modus
In de Visual Mode loopt het afgebeelde beeld achter de audiospeler. Hier kun je ook de juiste height die hoort bij de Visual Mode in de embed code op SoundCloud.com.
Codevoorbeeld (visuele modus):
Codevoorbeeld (visuele modus):
Als u een privéaudio wilt insluiten, gebruikt u het optionele kenmerk data-secret-token .
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 component maakt het mogelijk om Vine-video's eenvoudig te integreren in uw AMP HTML-pagina's.
Deze AMP-component is vrij eenvoudig, je hoeft alleen de dimensies toe te voegen en de ID van de Vine-video in het kenmerk data-vineid . 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 responsive lay-out gebruikt; je kunt elke waarde toevoegen aan de kenmerken width en height, totdat ze gelijk zijn, zullen ze goed werken.
Codevoorbeeld:
Voorbeeld code:
Script om op te nemen:
7. amp-youtube
U kunt YouTube-video's insluiten op AMP-pagina's met behulp van de component.
Hiervoor moet u de dimensies toevoegen, plus de ID van de video in het kenmerk data-videoid . Bij het opgeven van de width en height, is het belangrijk om aandacht te besteden aan de beeldverhouding .
Je kunt ook de parameters van YouTube-ingesloten in AMP-documenten gebruiken, je hoeft alleen de naam van de parameter in te voegen achter het voorvoegsel data-param- .
Codevoorbeeld:
In dit voorbeeld heb ik de start YouTube-parameter in het kenmerk data-param-start gebruikt 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, die op dezelfde manier werken . U kunt de volgende uitgebreide AMP-componenten gebruiken voor ingesloten video's van andere providers dan YouTube:
voor ingesloten Vimeo
voor Dailymotion instort
voor Brightcove-insluitingen
8. amp-social-share
Afgezien van ingesloten sociale media, kunt u ook sociale share-knoppen weergeven op uw AMP-pagina's met behulp van de component.
De functie voor sociaal delen is vooraf geconfigureerd voor sommige providers, maar met de juiste instellingen kunt u de component voor andere sociale share-knoppen.
Voorgeconfigureerde deelknoppen
Voorgeconfigureerde deelknoppen vereisen niet teveel instellingen; u moet de kenmerken width (standaard is 60px) en height (standaard is 44px) en de naam van de social media-provider in het typekenmerk definiëren.
Met Facebook moet je ook de Facebook-app-ID opgeven in het kenmerk data-param-app_id .
Codevoorbeeld:
Voorbeeld code:
De voorconfiguratie 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 de volgende drie optionele kenmerken :
data-text voor de tekst die u in de share wilt opnemen
data-url voor de URL die u wilt delen
data-attribution voor de naam van de persoon of provider aan wie u uw aandeel wilt toewijzen
Niet-geconfigureerde knoppen voor delen
Als u sociale share-knoppen van niet- geconfigureerde providers, zoals WhatsApp, wilt weergeven, moet u het aangepaste protocol van de provider opgeven in het kenmerk data-share-endpoint . Bekijk in de documentatie hoe u dit kunt doen.
Je zou het vakantieseizoen kunnen verwarren met winkelen, schenken en pauzeren, maar het is ook de tijd van het jaar waarin we losse eindjes maken, opnieuw contact maken met vrienden en familie en terugkijken op onze prestaties van het jaar.Het is ook de perfecte tijd om onze waardering en dank te sturen naar de mensen die ons het hele jaar door hebben gesteund, en een manier om dat te doen is door hen een aangepaste kerstkaart te sturen
Typografie vormt de basis van elk ontwerp, omdat lezen een van de meest basale dingen is die we op internet doen. De typografie die u kiest, heeft invloed op meerdere aspecten van een website, inclusief leesbaarheid, gemoedstoestand en de algehele gebruikerservaring . Het is essentieel voor ontwerpers en ontwikkelaars om de basisprincipes van typografie te kennen om leesbare aangename ontwerpen te maken
nl.hideout-lastation.com
Script om op te nemen:
De Voor responsieve lay-outs berekent AMP automatisch de vereiste ruimte die ook het "Instagram-chroom" bevat (accountnaam, datum, aantal vind-ik-leuks, enz.).
Toon een Pin It-knop
Je kunt ook een Pinterest Follow-knop maken met het kenmerk
Visuele modus
Als u een privéaudio wilt insluiten, gebruikt u het optionele kenmerk
Script om op te nemen:
Script om op te nemen:
De voorconfiguratie 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.
Voor responsieve lay-outs berekent AMP automatisch de vereiste ruimte die ook het "Instagram-chroom" bevat (accountnaam, datum, aantal vind-ik-leuks, enz.).
Toon een Pin It-knop 
Je kunt ook een Pinterest Follow-knop maken met het kenmerk 
Visuele modus 
Als u een privéaudio wilt insluiten, gebruikt u het optionele kenmerk 
Script om op te nemen:
Script om op te nemen:
De voorconfiguratie 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.
