Der größte Konflikt, den Accelerated Mobile Pages mit dem mobilen Web-Standard von Google lösen müssen, besteht darin , mobile Websites schneller zu machen, sie jedoch funktionsfähig und reich an Inhalten zu halten . In diesen Tagen sind reichhaltige und ansprechende Inhalte ohne Embeds von beliebten Social-Media-Sites - Tweets, Videos, Audios, Posts, Fotos - kaum vorstellbar.
Erweiterte AMP-Komponenten - neben anderen großartigen Funktionen - bieten eine großartige Möglichkeit, AMP- Dokumente mit verschiedenen Social Content-Typen zu integrieren.
Wie erweiterte AMP-Komponenten funktionieren
Im Mittelpunkt der AMP-Philosophie stehen die besten Leistungspraktiken von Google. Um die Seitenladezeiten zu verbessern, beschränken die AMP-Standards die Verwendung von Front-End-Technologien . Beispielsweise können Sie kein benutzerdefiniertes JavaScript, externe Stylesheets und kein HTML-Element verwenden, das externe Ressourcen lädt, z Etikett.
Im Gegenzug erhalten Sie eine Reihe von AMP-Komponenten, mit denen Sie externe Ressourcen wie Bilder, Videos, Audios, Werbung usw. auf Ihrer Website anzeigen können.
AMP-Komponenten sind spezifische HTML-Tags, die ähnlich wie normale HTML-Tags verwendet werden können. Einige von ihnen sind in die AMP-Laufzeit eingebaut, während die Mehrheit als Erweiterungen funktioniert . Komponenten, die Social-Media-Integration auf AMP-Seiten ermöglichen, sind alle erweiterten Komponenten .
Erweiterte AMP-Komponenten erfordern, dass Sie das zugehörige Skript in das Verzeichnis importieren
Abschnitt Ihres AMP-HTML-Dokuments. Da AMP ein Open-Source-Projekt ist, kann die Anzahl erweiterter Komponenten in Zukunft zunehmen.
In diesem Beitrag haben wir eine Handvoll AMP-Komponenten zusammengestellt, die Ihnen bei der Integration von sozialen Medien helfen können. Beachten Sie, dass sich die Versionen der Skripts im Laufe der Zeit ändern können. Lesen Sie daher immer zuerst die Dokumentation, bevor Sie sie auf Ihrer Site hinzufügen.
1. amp-facebook
ermöglicht es, einen Facebook-Beitrag oder ein Video in eine AMP-Seite einzubetten .
Sie müssen immer die Dimensionen des eingebetteten Posts angeben, was bedeutet, dass Sie ein width und ein Höhenattribut mit Werten in ganzen Pixeln hinzufügen müssen. Sie können die richtigen Dimensionen finden, indem Sie auf das Menü "Einbetten" oben auf dem Facebook-Post klicken.
Sie müssen auch die URL des angegebenen Beitrags im Attribut " data-hrefhinzufügen . Sie können die URL finden, indem Sie auf den Zeitstempel des Facebook-Posts klicken, und der Browser fügt die eindeutige URL in die Adressleiste ein.
Wenn Sie ein Video ohne den zugehörigen Facebook-Post einbetten möchten, fügen Sie das optionale data-embed-as="video" -Attribut hinzu
Wenn Sie Ihre Antwort einbetten möchten, verwenden Sie das layout mit dem Wert "responsive" . Sie können auch das optionale layout für eine andere AMP-Komponente verwenden, um das Layout zu steuern.
Codebeispiel:
Codevorschau:
Skript zum Einschließen:
2. amp-twitter
Sie können Tweets in AMP-Seiten einbetten, indem Sie die Komponente.
Dazu müssen Sie die ID des Tweets im data-tweetid Attribut data-tweetid . Sie können ändern, wie der Tweet angezeigt wird, indem Sie eine der Anzeigeoptionen des Twitter-APi als data-* HTML5-Attribut hinzufügen.
Im Beispiel unten verwendete ich zum Beispiel die linkColor Anzeigeoption der Twitter-API als data-link-color (ihr Datenformat data-* ), um die Standardverbindungsfarbe zu der Farbe zu ändern, die Hongkiat.com auf ihrem Twitter-Konto verwendet.
Codebeispiel:
Codevorschau:
Das Komponente ist noch nicht perfekt, Github docs sagt, dass Twitter derzeit keine API zur Verfügung stellt, die feste Einbettung eingebettete Seitenverhältnisse liefert .
Das bedeutet, dass Sie die Attribute width und height manuell einstellen müssen, da die AMP-Laufzeit manchmal keinen Teil (normalerweise den unteren) des Tweets anzeigt.
Es ist immer eine gute Idee zu überprüfen, wie Ihre eingebetteten Tweets aussehen, bevor Sie die AMP-Seite veröffentlichen.
Fügen Sie einen Platzhalter hinzu
Obwohl es nicht erforderlich ist, wird in der Dokumentation empfohlen , einen Platzhalter hinzuzufügen, falls der Tweet nicht sofort geladen wird.
Das placeholder kann für jede AMP-Komponente verwendet werden. Der Platzhalter wird sofort angezeigt, wenn die endgültigen Ressourcen nicht verfügbar sind. Wenn das AMP-Element geladen wird, wird der Platzhalter ausgeblendet .
Sehen Sie sich an, wie der obige Beispielcode mit einem Platzhalter aussieht. Auf Twitter klickte ich einfach auf die Schaltfläche "Tweet einbetten", kopierte die einbettbare Blockquote (ohne das Skript am Ende) und fügte dem placeholder hinzu
Etikett.
Codebeispiel mit Platzhalter:
So validieren Sie beschleunigte mobile Seiten ( )
- Hongkiat (@hongkiat)
Skript zum Einschließen:
3. amp-instagram
Mit können Sie Instagram-Fotos und -Videos in Ihre AMP-Seiten einbetten .
Sie müssen die Dimensionen der Einbettung mit den Attributen width und heightangeben. Außerdem müssen Sie den Bezeichner des Instagram-Fotos oder -Videos mit dem data-shortcode Attribut hinzufügen .
Sie finden den Identifikator am Ende der URL, für das Beispiel für das Foto unter der URL ist https://www.instagram.com/p/-PFt7tF8Km/, also muss ich -PFt7tF8Km als Wert für die data-shortcode Attribut
Codebeispiel:
Codevorschau:
Für Responsive Layouts berechnet AMP automatisch den benötigten Speicherplatz, der auch den "Instagram Chrome" enthält (Kontoname, Datum, Anzahl der Likes usw.).
Das bedeutet, dass Sie einen beliebigen Wert für width und height, bis die beiden Werte gleich sind (Instagram-Fotos sind in der Regel quadratisch), da die AMP-Laufzeit das Bild entsprechend dem verfügbaren Platz skaliert.
Wenn das Foto kein Quadrat ist, müssen Sie die tatsächlichen Werte für width und height angeben.
Für feste Layouts müssen Sie den zusätzlichen Platz (oben und unten: +48 px, links und rechts: + 8px) für den Instagram-Chrome einplanen, wenn Sie die Bildmaße berechnen.
Skript zum Einschließen:
4. amp-pinterest
ermöglicht es Ihnen, entweder ein Pin-Widget oder eine Pin-It-Schaltfläche in ein AMP-HTML-Dokument einzubetten .
Betten Sie ein Pin Widget ein
Um ein Pin-Widget einzubetten, müssen Sie die Dimensionen angeben, die URL des Pins mithilfe des Attributs " data-url, und Sie müssen außerdem das Attribut data-do="embedPin" hinzufügen.
Codebeispiel (Standardgröße):
Da das Standard-Pin-Widget ziemlich klein ist, können Sie auch eine größere Version verwenden, indem Sie das Attribut data-width="medium" .
Codebeispiel (mittlere Größe):
Code-Vorschau (mittlere Größe):
Zeigen Sie eine Pin It-Taste an
Sie können Ihrer AMP-Seite auch einen Pin-It-Button mit Hilfe des Komponente. Abgesehen von den Abmessungen für width und height müssen Sie vier Attribute angeben, um den Pin It-Button einzubetten:
data-do="buttonPin" um der AMP-Laufzeit data-do="buttonPin", dass es sich um einen Pin It-Button handelt
data-url mit der URL, die Sie teilen möchten
data-media mit der absoluten URL des Bildes, das die Nutzer anheften sollen
data-description mit der Beschreibung, die im Pin create-Formular erscheinen soll
Es gibt viele verschiedene Schaltflächengrößen, aus denen Sie auswählen können, überprüfen Sie die Dokumente für alle verfügbaren Größen.
Codebeispiel:
In diesem Beispiel habe ich eine Pin-It-Schaltfläche erstellt, mit der Benutzer ein Bild von diesem ehemaligen Beitrag von Hongkiat.com anheften können. Ich habe die kleine rechteckige Knopfgröße benutzt.
Codevorschau:
Beachten Sie, dass Sie zusätzliches CSS verwenden müssen, um die Schaltfläche "Pin It" oben auf dem Bild anzuzeigen.
Sie können auch eine Pinterest Follow-Schaltfläche erstellen, indem Sie das Attribut data-do="buttonFollow" und den Namen data-do="buttonFollow", der in der Follow-Schaltfläche im data-do="buttonFollow" und der URL Ihres Kontos im Attribut data-do="buttonFollow" angezeigt werden soll.
Codebeispiel (Schaltfläche "Folgen"):
Skript zum Einschließen:
5. amp-soundcloud
SoundCloud ist eine beliebte Audio-Distributionsplattform, auf der Benutzer ihre Musik teilen können. Mit Hilfe der können Sie SoundCloud-Tracks direkt von Ihrer AMP-HTML-Seite abspielen .
Diese Komponente kann nur mit einem Layout mit fixed-height dh Sie müssen nur die height angeben und die Breite wird von der AMP-Laufzeit berechnet. Dadurch füllt der eingebettete SoundCloud Audio Player den gesamten verfügbaren horizontalen Platz .
Das Komponente kann im klassischen oder visuellen Modus angezeigt werden . Sie können zwischen den beiden Modi wählen, indem Sie den Wert des data-visual auf " true oder " false (der Standardwert ist " false ).
In beiden Modi müssen Sie das Attribut data-trackid, um die Kennung des Audiomaterials anzugeben . Sie können die Audio-ID finden, indem Sie unter AudioPlayer auf SoundCloud.com auf die Schaltfläche Freigeben klicken und die Langform-URL im Einbettungscode nachschlagen.
Klassischer Modus
Im Classic Mode wird auf der linken Seite ein kleines Miniaturbild und auf der rechten Seite der Audioplayer angezeigt. Sie können den richtigen Wert für das Höhenattribut aus dem Einbettungscode auf SoundCloud.com abrufen.
Im Classic-Modus können Sie die Farbe des Audio-Players festlegen, wenn Sie das data-color Attribut verwenden möchten (dies ist im Visual-Modus nicht möglich).
Codebeispiel (klassischer Modus):
Code-Vorschau (klassischer Modus):
Visueller Modus
Im Visual Mode sich das vorgestellte Bild über den Audio-Player. Hier finden Sie auch die passende height des Visual Mode im Einbettungscode auf SoundCloud.com.
Codebeispiel (visueller Modus):
Codebeispiel (visueller Modus):
Verwenden Sie das optionale data-secret-token Attribut, wenn Sie ein privates Audio einbetten möchten.
Skript zum Einschließen:
6. amp-vine
Vine ist eine Kurzform-Videofreigabeseite, auf der Sie 6 Sekunden lange Videos mit Ihren Freunden teilen können. Das Component ermöglicht das einfache Einbetten von Vine-Videos in Ihre AMP-HTML-Seiten.
Diese AMP-Komponente ist recht einfach. Sie müssen nur die Dimensionen und die ID des Vine-Videos im Attribut " data-vineid . Sie können die ID von der URL jedes Vine erhalten.
Da Vines Quadrate sind, gilt bei Verwendung des responsiven Layouts dieselbe Regel wie bei Instagram-Einbettungen; Sie können den Attributen width und height einen beliebigen Wert hinzufügen, bis sie gleich funktionieren.
Codebeispiel:
Codevorschau:
Skript zum Einschließen:
7. amp-youtube
Sie können YouTube-Videos auf AMP-Seiten mit Hilfe der Komponente.
Dazu müssen Sie die Dimensionen und die ID des Videos im Attribut " data-videoid Video-ID" data-videoid . Bei der Angabe von width und height ist es wichtig, auf das Seitenverhältnis zu achten .
Sie können auch die Parameter von YouTube-Einbettungen in AMP-Dokumenten verwenden. data-param- einfach den Namen des Parameters nach dem data-param- Präfix ein .
Codebeispiel:
In diesem Beispiel habe ich den start Parameter " data-param-start Attribut " data-param-start verwendet, damit das Video um data-param-start beginnt.
Codevorschau:
Skript zum Einschließen:
Andere Videofreigabedienste
AMP verfügt außerdem über Komponenten für andere Videofreigabedienste, die ähnlich funktionieren . Sie können die folgenden erweiterten AMP-Komponenten für Videoeinbettungen von anderen Anbietern als YouTube verwenden:
für Vimeo bettet ein
für Dailymotion bettet ein
für Brightcove einbetten
8. amp-social-share
Neben Social-Media-Einbettungen können Sie auch Schaltflächen für soziale Netzwerke auf Ihren AMP-Seiten anzeigen Komponente.
Die Funktion für die soziale Freigabe ist für einige Anbieter vorkonfiguriert, aber mit den richtigen Einstellungen können Sie die Komponente für andere Schaltflächen für soziale Freigabe.
Vorkonfigurierte Freigabetasten
Vorkonfigurierte Freigabetasten erfordern nicht zu viele Einstellungen; Sie müssen die Attribute width (Standardwert ist 60px) und height (Standardwert ist 44px) sowie den Namen des Social Media-Anbieters im Attribut type .
Bei Facebook müssen Sie außerdem die Facebook-App-ID im Attribut " data-param-app_id .
Codebeispiel:
Codevorschau:
Bei der Vorkonfiguration wird davon ausgegangen, dass die URL, die Sie freigeben möchten, die kanonische URL der aktuellen Seite ist und dass der Text, den Sie in Ihre Freigabe aufnehmen möchten, der Seitentitel ist.
Wenn Sie eine andere Konfiguration verwenden möchten, können Sie dies mit den folgenden drei optionalen Attributen tun:
data-text für den Text, den Sie in die Freigabe einschließen möchten
data-url für die URL, die Sie freigeben möchten
data-attribution für den Namen der Person oder des Anbieters, der / die für Ihre Aktie verantwortlich sein soll
Nicht konfigurierte Freigabetasten
Um Schaltflächen für die soziale Freigabe von nicht konfigurierten Providern anzuzeigen, z. B. WhatsApp, müssen Sie das benutzerdefinierte Protokoll des Providers im Attribut data-share-endpointendpointangeben . Sehen Sie in den Dokumenten nach, wie Sie dies tun können.
Die direkteste Art, Daten über Ihre Kunden oder Benutzer zu sammeln, ist über Online-Formulare. Von Anmeldeformularen für mobile Apps bis hin zu Newsletter-Anmeldeformularen, Feedbackformularen und Anmeldeformularen etc. Online-User kommen überall auf Formulare. Daher legen Webentwickler besonderen Wert auf einfache und attraktive Formulare für die Benutzer.Unab
Haben Sie Angst, dass Ihre dringende E-Mail im E-Mail-Konto des Empfängers verloren geht? Warum senden Sie es nicht direkt an die Telefonnummer des Empfängers? CloudHQ hat eine Chrome-Erweiterung erstellt, mit der Sie das direkt aus Google Mail heraus tun können.Mit der korrekten Funktion " Ihre E-Mail an SMS senden" fügt diese Erweiterung Ihrem Google Mail-Posteingang ein Mobiltelefon-Symbol hinzu .Wen
de.hideout-lastation.com
Skript zum Einschließen:
Das Für Responsive Layouts berechnet AMP automatisch den benötigten Speicherplatz, der auch den "Instagram Chrome" enthält (Kontoname, Datum, Anzahl der Likes usw.).
Zeigen Sie eine Pin It-Taste an
Sie können auch eine Pinterest Follow-Schaltfläche erstellen, indem Sie das Attribut
Visueller Modus
Verwenden Sie das optionale
Skript zum Einschließen:
Skript zum Einschließen:
Bei der Vorkonfiguration wird davon ausgegangen, dass die URL, die Sie freigeben möchten, die kanonische URL der aktuellen Seite ist und dass der Text, den Sie in Ihre Freigabe aufnehmen möchten, der Seitentitel ist.
Für Responsive Layouts berechnet AMP automatisch den benötigten Speicherplatz, der auch den "Instagram Chrome" enthält (Kontoname, Datum, Anzahl der Likes usw.).
Zeigen Sie eine Pin It-Taste an 
Sie können auch eine Pinterest Follow-Schaltfläche erstellen, indem Sie das Attribut 
Visueller Modus 
Verwenden Sie das optionale 
Skript zum Einschließen:
Skript zum Einschließen:
Bei der Vorkonfiguration wird davon ausgegangen, dass die URL, die Sie freigeben möchten, die kanonische URL der aktuellen Seite ist und dass der Text, den Sie in Ihre Freigabe aufnehmen möchten, der Seitentitel ist.
![Web Design Industrie Analyse - Profis gegen Amateure [Infografik]](http://hideout-lastation.com/img/tech-design-tips/595/web-design-industry-analysis-professionals-vs.jpg)
