de.hideout-lastation.com
Paradies Für Designer Und Entwickler


8 AMP Komponenten für Social Media Integration

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-href hinzufü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 height angeben. 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:

  1. data-do="buttonPin" um der AMP-Laufzeit data-do="buttonPin", dass es sich um einen Pin It-Button handelt
  2. data-url mit der URL, die Sie teilen möchten
  3. data-media mit der absoluten URL des Bildes, das die Nutzer anheften sollen
  4. 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:

  1. data-text für den Text, den Sie in die Freigabe einschließen möchten
  2. data-url für die URL, die Sie freigeben möchten
  3. 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-endpoint endpoint angeben . Sehen Sie in den Dokumenten nach, wie Sie dies tun können.

Skript zum Einschließen:

50 Last-Minute-Geschenke für Vielflieger

50 Last-Minute-Geschenke für Vielflieger

Es ist das Ende des Jahres und das Fernweh setzt ein. Es ist Zeit, eine Pause vom Papierkram zu machen und Orte zu besuchen, an denen wir noch nie waren und Essen mit Namen zu essen, die wir nicht aussprechen können ! Reisen ist eine großartige Erfahrung, egal ob es sich um einen kurzen Wochenendtrip, Rucksackreisen quer durch den Kontinent, einen ausgedehnten Urlaub auf der anderen Seite der Welt oder ein Solo-Camp mitten in der Natur handelt.I

(Tech- und Design-Tipps)

Entwickler: 10 UX / UI-Tools in Ihrer Toolbox

Entwickler: 10 UX / UI-Tools in Ihrer Toolbox

Es gibt viele verschiedene Werkzeuge, die zum Erstellen von Prototypen verwendet werden können. Einige sind natürlich besser als andere für eine bestimmte Situation, und andere gehören zu den besten, weil sie in einer Vielzahl von Situationen verwendet werden können. Wenn Sie ein topaktuelles Prototyping-Tool für Ihre Designarbeit suchen, finden Sie unter den hier vorgestellten Tools das, wonach Sie gesucht haben.Außer

(Tech- und Design-Tipps)