8 AMP-Komponenten für die Integration in soziale Medien

Der größte Konflikt, den der mobile Webstandard von Google darstellt, Beschleunigte mobile Seiten muss lösen Mobile Sites schneller machen, während halten sie funktional und reich an Inhalten. Heutzutage kann man sich reichhaltige und ansprechende Inhalte kaum vorstellen, ohne Einbettungen von beliebten Social-Media-Websites - Tweets, Videos, Audios, Posts, Fotos.

Erweiterte AMP-Komponenten - Neben anderen großartigen Funktionen bieten sie eine großartige Möglichkeit zur Integration AMPERE Dokumente mit unterschiedlichen sozialen Inhaltstypen.

Funktionsweise von erweiterten AMP-Komponenten

Im Mittelpunkt der AMP-Philosophie stehen Googles Best Performance-Praktiken. Um die Seitenladezeiten zu verbessern, sind die AMP-Standards eingeschränkt wie Sie Front-End-Technologien einsetzen können. Beispielsweise können Sie kein benutzerdefiniertes JavaScript, externe Stylesheets und HTML-Elemente verwenden, die externe Ressourcen laden, wie z Etikett.

Dafür bekommst du eine Menge AMP-Komponenten Sie können verwenden Anzeige externer Ressourcen, wie Bilder, Videos, Audios, Werbung usw. auf Ihrer Website.

AMP-Komponenten sind bestimmte HTML-Tags das kann ähnlich wie gewöhnliche HTML-Tags verwendet werden. Ein paar von ihnen sind eingebaut auf die AMP-Laufzeit, während die Mehrheit funktioniert als Erweiterungen. Komponenten, die die Integration von Social Media auf AMP-Seiten ermöglichen sind alle erweiterte Komponenten.

Erweiterte AMP-Komponenten erfordern dies Importieren Sie das zugehörige Skript in dem Abschnitt Ihres AMP-HTML-Dokuments. Da es sich bei AMP um ein Open-Source-Projekt handelt, kann die Anzahl der erweiterten Komponenten in der Zukunft zunehmen.

In diesem Beitrag haben wir eine Handvoll AMP-Komponenten gesammelt, die Ihnen helfen können mit Social-Media-Integration. Denken Sie daran, dass die Versionen der Skripte kann sich im Laufe der Zeit ändern, Überprüfen Sie daher immer die Dokumentation, bevor Sie sie in Ihre Site aufnehmen.

1. `Amp-Facebook`

macht es möglich Ein Facebook-Post oder ein Video einbetten in eine AMP-Seite.

Du musst es immer tun Geben Sie die Abmessungen des eingebetteten Pfostens an, was bedeutet, dass Sie eine hinzufügen müssen Breite und ein Höhe Attribut mit Werten in ganzzahligen Pixeln. Sie finden die richtigen Abmessungen, indem Sie oben im Facebook-Beitrag auf das Menü "Einbetten" klicken.

Sie müssen auch Fügen Sie die URL des angegebenen Beitrags hinzu in dem data-href Attribut. Sie finden die URL, indem Sie auf den Zeitstempel des Facebook-Posts klicken. Der Browser fügt die eindeutige URL in die Adressleiste ein.

Wenn du möchtest Einbetten eines Videos ohne dazugehörigen Facebook-Post, füge das optionale hinzu data-embed-as = "Video" Attribut

Wenn du möchtest machen Sie Ihre Einbettung ansprechend benutze die Layout Attribut mit der "ansprechend" Wert. Sie können auch das optionale verwenden Layout Attribut auf eine andere AMP-Komponente, um das Layout zu steuern.

Code-Beispiel:

Codevorschau:

Skript zum Einschließen:

2. `Amp-Twitter`

Sie können Tweets einbetten in AMP-Seiten mit der Komponente.

Dazu müssen Sie Geben Sie die ID des Tweets an in dem Daten-Tweetid Attribut. Sie können die Anzeige des Tweets ändern, indem Sie eine der Anzeigeoptionen des Twitter-APi als hinzufügen Daten-* HTML5-Attribut.

Im folgenden Beispiel habe ich beispielsweise die Twitter-APIs verwendet Verknüpfungsfarbe Anzeigeoption als Daten-Link-Farbe (es ist Daten-* format), um die Standard-Linkfarbe in die Farbe zu ändern, die Hongkiat.com auf ihrem Twitter-Account verwendet.

Code-Beispiel:

Codevorschau:

Das Komponente ist noch nicht perfekt, sagt Github docs Twitter bietet derzeit keine API, die Tweet-Einbettungen mit festem Seitenverhältnis liefert.

Dies bedeutet, dass Sie müssen manuell einstellen Breite und Höhe Attribute, da die AMP-Laufzeit manchmal einen Teil (normalerweise den unteren Teil) des Tweets anzeigt.

Es ist immer eine gute Idee zu prüfen, wie Ihre eingebetteten Tweets aussehen, bevor Sie die AMP-Seite veröffentlichen.

Fügen Sie einen Platzhalter hinzu

Obwohl dies nicht erforderlich ist, empfiehlt die Dokumentation Platzhalter hinzufügen falls der Tweet nicht sofort geladen wird.

Das Platzhalter Attribut kann für jede AMP-Komponente verwendet werden. Der Platzhalter ist sofort angezeigt wenn die endgültigen Ressourcen nicht verfügbar sind. Wenn das AMP-Element geladen wird verbirgt seinen Platzhalter.

Schauen Sie sich an, wie der obige Beispielcode aussieht mit einem Platzhalter. Auf Twitter habe ich einfach auf die Schaltfläche Tweet einbetten geklickt, die einbettbare Blockquote kopiert (ohne das Skript am Ende) und die Platzhalter Attribut zum

Etikett.

Codebeispiel mit Platzhalter:
   So validieren Sie beschleunigte mobile Seiten (#AMPERE) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15. August 2016 
  
Skript zum Einschließen:
  
3. Amp-Instagram

Mit , Sie können Instagram-Fotos und -Videos einbetten in Ihre AMP-Seiten.

Sie sind dazu verpflichtet Geben Sie die Abmessungen an des embed mit dem Breite und Höhe Attribute, und Sie müssen auch fügen Sie den Bezeichner hinzu des Instagram Fotos oder Videos mit der Daten-Shortcode Attribut.

Sie finden den Bezeichner am Ende der URL. Das Beispiel für das Foto unten ist die URL https://www.instagram.com/p/-PFt7tF8Km/, also muss ich verwenden -PFt7tF8Km als Wert für die Daten-Shortcode Attribut.

Code-Beispiel:
   
Codevorschau:

Für responsive Layouts, AMP berechnet automatisch den benötigten Speicherplatz beinhaltet die “Instagram Chrom” (Kontoname, Datum, Anzahl der Likes usw.).

Das bedeutet, dass Sie einen beliebigen Wert für verwenden können Breite und Höhe, bis zum zwei Werte sind gleich (Instagram-Fotos sind normalerweise quadratisch), da die AMP-Laufzeit das Bild an den verfügbaren Platz anpasst.

Wenn das Foto nicht zufällig ein Quadrat ist, müssen Sie das tatsächliche Bild angeben Breite und Höhe Werte.

Zum feste Layouts, du musst schließen Sie den zusätzlichen Raum ein (oben und unten: +48 px, links und rechts: + 8px) wird für Instagram-Chrom benötigt, wenn Sie die Bildmaße berechnen.

Skript zum Einschließen:
  
4. Amp-Interesse

erlaubt dir zu binden Sie entweder ein Pin-Widget oder eine Pin It-Schaltfläche ein in ein AMP-HTML-Dokument.

Betten Sie ein Pin-Widget ein

Um ein Pin-Widget einzubetten, müssen Sie die Abmessungen und die URL der Pin mithilfe von angeben Daten-URL Attribut, und Sie müssen auch das hinzufügen data-do = "embedPin" Attribut.

Codebeispiel (Standardgröße):
   
Da das standardmäßige Pin-Widget ziemlich klein ist, können Sie auch eine größere Version auswählen, indem Sie das verwenden Datenbreite = "Medium" Attribut.

Code-Beispiel (mittlere Größe):
   
Codevorschau (mittlere Größe):

Zeigen Sie einen Pin It Button an

Du kannst auch Füge einen Pin It Button hinzu zu Ihrer AMP-Seite mit Hilfe der Komponente. Neben dem Breite und Höhe Dimensionen, du bist erforderlich, um vier Attribute anzugeben Um den Pin It-Button einzubetten:

data-do = "buttonPin" um die AMP-Laufzeit mitzuteilen, dass dies eine Pin It-Schaltfläche ist

Daten-URL mit der URL, die Sie teilen möchten

Daten-Medien mit der absoluten URL des Bildes, das Benutzer anheften möchten

Daten Beschreibung mit der Beschreibung, die im Pin-Erstellungsformular angezeigt werden soll

Es gibt viele verschiedene knopfgrößen, Überprüfen Sie die Dokumente auf alle verfügbaren Größen.

Code-Beispiel:

In diesem Beispiel habe ich eine Schaltfläche "Pin It" erstellt, mit der Benutzer ein Bild aus diesem früheren Hongkiat.com-Beitrag anheften können. Ich habe die kleine rechteckige Knopfgröße verwendet.
      
 
Codevorschau:

Beachten Sie, dass Sie zusätzliches CSS verwenden müssen, um die Schaltfläche Pin It über dem Bild anzuzeigen.

Sie können auch eine Pinterest-Folgeschaltfläche erstellen, indem Sie die data-do = "buttonFollow" Attribut, und geben Sie den Namen an, den Sie in der Schaltfläche Follow (Folgen) in anzeigen möchten Datenetikett & die URL Ihres Kontos im data-href Attribut.

Codebeispiel (Schaltfläche "Folgen"):
   
Skript zum Einschließen:
  
5. Amp-Soundcloud

SoundCloud ist eine beliebte Audio-Vertriebsplattform, auf der Benutzer ihre Musik teilen können. Mit der Hilfe des Komponente können Sie SoundCloud-Titel abspielen direkt von Ihrer AMP-HTML-Seite.

Diese Komponente kann nur mit verwendet werden feste Höhe Layout was bedeutet, dass Sie nur das angeben müssen Höhe, und die Breite wird von der AMP-Laufzeit berechnet. Als Ergebnis wird der eingebettete SoundCloud-Audioplayer angezeigt füllen Sie den gesamten verfügbaren horizontalen Raum aus.

Das Komponente kann in angezeigt werden entweder im klassischen oder im visuellen Modus. Sie können zwischen den beiden Modi wählen, indem Sie den Wert von einstellen datenvisuell Attribut entweder wahr oder falsch (Die Standardeinstellung ist falsch).

In beiden Modi müssen Sie das verwenden Daten-Trackid zuschreiben Geben Sie den Bezeichner an des Audios; Sie finden die Audio-ID, indem Sie auf SoundCloud.com unter dem Audioplayer auf die Share-Schaltfläche klicken und die Langform-URL im Embed-Code nachschlagen.

Klassischer Modus

Das Klassischer Modus zeigt links ein kleines Miniaturbild und rechts den Audioplayer. Sie können den richtigen Wert für die Höhe Attribut aus dem Embed-Code auf SoundCloud.com.

Im klassischen Modus können Sie die Farbe des Audioplayers angeben, wenn Sie den verwenden möchten Datenfarbe Attribut (im visuellen Modus ist dies nicht möglich).

Codebeispiel (klassischer Modus):
   
Codevorschau (klassischer Modus):

Visueller Modus

Im Visueller Modus, Das abgebildete Bild erstreckt sich hinter dem Audioplayer. Hier finden Sie auch das richtige Höhe zu Visual Mode im Embed-Code auf SoundCloud.com gehören.

Codebeispiel (visueller Modus):
   
Codebeispiel (visueller Modus):

Wenn du möchtest Einbetten eines privaten Audios, Verwenden Sie die Option Daten-Geheim-Token Attribut.

Skript zum Einschließen:
  
6. Amp-Vine

Vine ist eine kurze Website zum Teilen von Videos, auf der Sie Videos mit einer Länge von 6 Sekunden mit Ihren Freunden teilen können. Das Komponente macht es leicht möglich Vine Videos einbetten in Ihre AMP-HTML-Seiten.

Diese AMP-Komponente ist recht einfach. Sie müssen lediglich die Abmessungen und die ID des Vine-Videos in der Daten-Vineid Attribut. Sie können die ID von der URL jeder Rebe abrufen.

Wenn Sie das responsive Layout verwenden, gilt die gleiche Regel wie für Instagram-Einbettungen. Sie können jeden Wert hinzufügen Breite und Höhe Attribute, bis sie gleich sind Sie werden richtig arbeiten.

Code-Beispiel:
   
Codevorschau:

Skript zum Einschließen:
  
7. amp-youtube

Sie können YouTube-Videos einbetten auf AMP-Seiten mit Hilfe des Komponente.

Dazu müssen Sie die Abmessungen und die ID des Videos in das Feld einfügen Daten-Video-ID Attribut. Bei der Angabe Breite und Höhe, es ist wichtig, dass Achten Sie auf das Seitenverhältnis.

Du kannst auch Verwenden Sie die Parameter von YouTube-Einbettungen Geben Sie in AMP-Dokumente einfach den Namen des Parameters ein nach dem Datenparameter- Präfix.

Code-Beispiel:

In diesem Beispiel habe ich das verwendet Start YouTube-Parameter in der Daten-Parameter-Start Attribut, damit das Video bei 43s beginnt.
   
Codevorschau:

Skript zum Einschließen:
  
Andere Video-Sharing-Dienste

AMP verfügt auch über Komponenten, die sich auf andere Video-Sharing-Dienste beziehen ähnlich arbeiten wie . Sie können die folgenden erweiterten AMP-Komponenten für Video-Einbettungen von anderen Anbietern als YouTube verwenden:

für Vimeo-Einbettungen

für Dailymotion-Einbettungen

für Brightcove-Einbettungen

8. Amp-Social-Anteil

Abgesehen von Social Media-Einbettungen können Sie auch Schaltflächen für soziale Freigaben anzeigen auf Ihren AMP-Seiten mit der Komponente.

Die Social-Share-Funktion ist für einige Anbieter vorkonfiguriert, Mit den richtigen Einstellungen können Sie jedoch die Komponente für andere Social Share-Schaltflächen.

Vorkonfigurierte Freigabetasten

Vorkonfigurierte Freigabetasten erfordern nicht zu viele Einstellungen; Sie müssen das definieren Breite (Standardeinstellung ist 60px) und Höhe (Standardeinstellung ist 44px), und der Name des Anbieters für soziale Medien in der Art Attribut.

Bei Facebook müssen Sie auch die Facebook-App-ID in angeben data-param-app_id Attribut.

Code-Beispiel:
                    
 
Codevorschau:

Die Vorkonfiguration macht Annahmen Die URL, die Sie freigeben möchten, ist die kanonische URL der aktuellen Seite. Der Text, den Sie in Ihre Freigabe einfügen möchten, ist der Seitentitel.

Wenn Sie eine andere Konfiguration verwenden möchten, können Sie dies mit den folgenden Schritten tun drei optionale Attribute:

Datentext für den Text, den Sie in die Freigabe aufnehmen möchten

Daten-URL für die URL, die Sie freigeben möchten

Datenzuordnung für den Namen der Person oder des Anbieters, der / die Sie Ihre Freigabe zuordnen möchten

Nicht konfigurierte Freigabetasten

So zeigen Sie die Schaltflächen für soziale Freigaben an nicht konfigurierte Anbieter, wie WhatsApp müssen Sie Geben Sie das benutzerdefinierte Protokoll des Providers an in dem Datenfreigabe-Endpunkt Attribut. Lesen Sie in den Dokumenten nach, wie Sie dies tun können.

Skript zum Einschließen:
  