8 Στοιχεία AMP για ενοποίηση κοινωνικών μέσων

Η μεγαλύτερη σύγκρουση με το πρότυπο ιστού Google για κινητά, Επιταχυνόμενες σελίδες για κινητά πρέπει να λύσει είναι καθιστώντας τους κινητούς χώρους πιο γρήγορους, ενώ διατηρώντας τα λειτουργικά και πλούσια σε περιεχόμενο. Αυτές τις μέρες το πλούσιο και συναρπαστικό περιεχόμενο δύσκολα μπορεί να φανταστεί χωρίς ενσωματώσεις από δημοφιλείς ιστότοπους κοινωνικής δικτύωσης - tweets, βίντεο, ηχητικά μηνύματα, αναρτήσεις, φωτογραφίες.

Εκτεταμένα στοιχεία AMP - μεταξύ άλλων εξαιρετικών χαρακτηριστικών - προσφέρει έναν εξαιρετικό τρόπο ενσωμάτωσης ΑΜΠΕΡΑΖ έγγραφα με διαφορετικούς τύπους κοινωνικού περιεχομένου.

Πώς λειτουργούν τα εκτεταμένα στοιχεία AMP

Στον πυρήνα της φιλοσοφίας της AMP υπάρχουν τα Google καλύτερες πρακτικές απόδοσης. Για να βελτιωθούν οι χρόνοι φόρτωσης σελίδας, περιορίζονται τα πρότυπα AMP πώς μπορείτε να χρησιμοποιήσετε τεχνολογίες front-end. Για παράδειγμα, δεν μπορείτε να χρησιμοποιήσετε προσαρμοσμένο JavaScript, εξωτερικά φύλλα στυλ και οποιοδήποτε στοιχείο HTML που φορτώνει εξωτερικούς πόρους, όπως το ετικέτα.

Σε αντάλλαγμα, παίρνετε ένα μάτσο Στοιχεία AMP μπορείτε να χρησιμοποιήσετε για εμφάνιση εξωτερικών πόρων, όπως εικόνες, βίντεο, ηχητικά μηνύματα, διαφημίσεις κλπ. στον ιστότοπό σας.

Τα στοιχεία AMP είναι συγκεκριμένες ετικέτες HTML που μπορεί να χρησιμοποιηθεί παρόμοια με τις συνήθεις ετικέτες HTML. Λίγες από αυτές είναι ενσωματωμένο στο χρόνο εκτέλεσης AMP, ενώ η πλειοψηφία λειτουργεί ως επεκτάσεις. Στοιχεία που καθιστούν δυνατή την ενοποίηση κοινωνικών μέσων στις σελίδες AMP είναι όλα τα εκτεταμένα στοιχεία.

Τα εκτεταμένα στοιχεία AMP σας απαιτούν εισαγάγετε το σενάριο που ανήκει στο τμήμα του εγγράφου σας AMP HTML. Καθώς το AMP είναι ένα έργο ανοιχτού κώδικα, ο αριθμός των εκτεταμένων στοιχείων μπορεί να αυξηθεί στο μέλλον.

Σε αυτή τη θέση έχουμε συγκεντρώσει μια χούφτα AMP Components που μπορούν να σας βοηθήσουν με την ενοποίηση των κοινωνικών μέσων. Λάβετε υπόψη ότι οι εκδόσεις των σεναρίων μπορεί να αλλάξει με την πάροδο του χρόνου, οπότε πάντα ελέγξτε την τεκμηρίωση προτού τα συμπεριλάβετε στον ιστότοπό σας.

1. `amp-facebook`

καθιστά δυνατή την ενσωματώστε μια δημοσίευση ή ένα βίντεο στο Facebook σε μια σελίδα AMP.

Πάντα πρέπει να καθορίστε τις διαστάσεις της ενσωματωμένης θέσης, πράγμα που σημαίνει ότι πρέπει να προσθέσετε ένα πλάτος και ένα ύψος attribute με τιμές σε ακέραια εικονοστοιχεία. Μπορείτε να βρείτε τις σωστές διαστάσεις κάνοντας κλικ στο μενού "Ενσωμάτωση" στην κορυφή της ανάρτησης στο Facebook.

Είστε επίσης υποχρεωμένοι να προσθέστε τη διεύθυνση URL της συγκεκριμένης ανάρτησης στο data-href Χαρακτηριστικό. Μπορείτε να βρείτε τη διεύθυνση URL κάνοντας κλικ στο timestamp της ανάρτησης στο Facebook και το πρόγραμμα περιήγησης θα εισαγάγει τη μοναδική διεύθυνση URL στη γραμμή διευθύνσεων.

Αν θέλεις ενσωματώστε ένα βίντεο χωρίς την ανάρτησή του στο Facebook, προσθέστε το προαιρετικό data-embed-as = "βίντεο" Χαρακτηριστικό

Αν θέλεις κάνετε την ενσωμάτωσή σας απόκριση Χρησιμοποιήστε το σχέδιο με το "αποκριτικός" αξία. Μπορείτε επίσης να χρησιμοποιήσετε το προαιρετικό σχέδιο attribute σε οποιοδήποτε άλλο στοιχείο AMP για τον έλεγχο της διάταξης.

Παράδειγμα κώδικα:

Προεπισκόπηση κώδικα:

Σενάριο για να συμπεριλάβετε:

2. `amp-twitter`

Μπορείς ενσωματώστε tweets σε σελίδες AMP χρησιμοποιώντας το συστατικό.

Για να το κάνετε αυτό, πρέπει να το κάνετε καθορίστε το αναγνωριστικό του τιτίβισμα στο δεδομένα-tweetid Χαρακτηριστικό. Μπορείτε να τροποποιήσετε τον τρόπο με τον οποίο εμφανίζεται το τιτίβισμα προσθέτοντας οποιαδήποτε από τις επιλογές προβολής του Twitter APi ως a δεδομένα-* Χαρακτηριστικό HTML5.

Για παράδειγμα, στο παρακάτω παράδειγμα χρησιμοποίησα το API του Twitter linkColor εμφάνιση ως σύνδεσμο δεδομένων-χρώματος (του δεδομένα-* μορφή) για να αλλάξετε το προεπιλεγμένο χρώμα συνδέσμου στο χρώμα που χρησιμοποιεί το Hongkiat.com στον λογαριασμό του στο Twitter.

Παράδειγμα κώδικα:

Προεπισκόπηση κώδικα:

ο το στοιχείο δεν είναι ακόμα τέλειο, λέει ο Github docs Το Twitter δεν παρέχει προς το παρόν ένα API που αποδίδει σταθερό λόγο διαστάσεων.

Αυτό σημαίνει ότι πρέπει να το κάνετε ρυθμίστε χειροκίνητα το πλάτος και ύψος γνωρίσματα, καθώς ο χρόνος εκτέλεσης AMP μερικές φορές δεν εμφανίζει ένα μέρος (συνήθως το κάτω μέρος) του τιτίβισμα.

Είναι πάντα καλή ιδέα να ελέγξετε πώς εμφανίζονται τα ενσωματωμένα σας tweets πριν δημοσιεύσετε τη σελίδα AMP.

Προσθέστε τη θέση

Αν και δεν είναι απαραίτητο, η τεκμηρίωση συνιστά προσθέτοντας ένα κράτησης θέσης σε περίπτωση που το τιτίβισμα δεν φορτώνεται αμέσως.

ο δείκτη κράτησης θέσης χαρακτηριστικό μπορεί να χρησιμοποιηθεί σε κάθε στοιχείο AMP. Το σύμβολο κράτησης θέσης είναι εμφανίζονται αμέσως εάν οι τελικοί πόροι δεν είναι διαθέσιμοι. Όταν φορτώνεται το στοιχείο AMP, αυτό κρύβει το σύμβολο κράτησης θέσης.

Ρίξτε μια ματιά στο πώς μοιάζει ο παραπάνω κώδικας παραδείγματος με ένα σύμβολο κράτησης θέσης. Στο Twitter, απλά έκανα κλικ στο κουμπί Ενσωμάτωση Tweet, αντιγράψατε την ενσωματωμένη blockquote (χωρίς το σενάριο στο τέλος) και προσθέσατε το δείκτη κράτησης θέσης αποδίδουν στο

ετικέτα.

Παράδειγμα κώδικα με σύμβολο κράτησης θέσης:
   Πώς να επικυρώσετε επιταχυνόμενες σελίδες για κινητά (#ΑΜΠΕΡΑΖ) #google #seo https://t.co/eVOSAtr5Ax 
 - Χονγκκιάτ (@ χονγκκιάτ)  15 Αυγούστου 2016 
  
Σενάριο για να συμπεριλάβετε:
  
3. amp-instagram

Με , μπορείς ενσωματώστε φωτογραφίες και βίντεο Instagram στις σελίδες AMP σας.

Είστε υποχρεωμένοι καθορίστε τις διαστάσεις της ενσωμάτωσης με το πλάτος και ύψος χαρακτηριστικά, και πρέπει επίσης να προσθέστε το αναγνωριστικό της φωτογραφίας ή του βίντεο Instagram χρησιμοποιώντας το δεδομένα-shortcode Χαρακτηριστικό.

Μπορείτε να βρείτε το αναγνωριστικό στο τέλος της διεύθυνσης URL, όπως για παράδειγμα για τη φωτογραφία κάτω από τη διεύθυνση URL https://www.instagram.com/p/-PFt7tF8Km/, γι 'αυτό πρέπει να το χρησιμοποιήσω -PFt7tF8Km ως τιμή για το δεδομένα-shortcode Χαρακτηριστικό.

Παράδειγμα κώδικα:
   
Προεπισκόπηση κώδικα:

Για ανταποκρινόμενες διατάξεις, Το AMP υπολογίζει αυτόματα τον απαιτούμενο χώρο που επίσης περιλαμβάνει το “Instagram chrome” (όνομα λογαριασμού, ημερομηνία, αριθμός προσώπων, κλπ).

Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε οποιαδήποτε τιμή για πλάτος και ύψος, μέχρι το δύο τιμές είναι ίσες (Οι φωτογραφίες Instagram είναι συνήθως τετράγωνα), καθώς το AMP runtime θα αλλάξει το μέγεθος της εικόνας σύμφωνα με τον διαθέσιμο χώρο.

Αν η φωτογραφία δεν είναι πλατεία, πρέπει να καθορίσετε την πραγματική της πλάτος και ύψος αξίες.

Για σταθερές διατάξεις, πρέπει να συμπεριλάβετε τον επιπλέον χώρο (πάνω και κάτω: +48 px, αριστερά και δεξιά: + 8px) που χρειάζονται για το chrome Instagram όταν υπολογίζετε τις διαστάσεις της εικόνας.

Σενάριο για να συμπεριλάβετε:
  
4. amp-pinterest

σου επιτρέπει να ενσωματώστε είτε ένα widget Pin είτε ένα κουμπί Pin It σε ένα έγγραφο AMP HTML.

Ενσωματώστε ένα Widget Pin

Για να ενσωματώσετε ένα widget Pin, πρέπει να καθορίσετε τις διαστάσεις, τη διεύθυνση URL του πείρου χρησιμοποιώντας το data-url χαρακτηριστικό, και πρέπει επίσης να προσθέσετε το δεδομένα-do = "embedPin" Χαρακτηριστικό.

Παράδειγμα κώδικα (προεπιλεγμένο μέγεθος):
   
Δεδομένου ότι το προεπιλεγμένο γραφικό στοιχείο Pin είναι αρκετά μικρό, μπορείτε επίσης να επιλέξετε μια μεγαλύτερη έκδοση χρησιμοποιώντας το δεδομένα-πλάτος = "μέτρια" Χαρακτηριστικό.

Παράδειγμα κώδικα (μεσαίου μεγέθους):
   
Προεπισκόπηση κώδικα (μεσαίου μεγέθους):

Εμφάνιση ενός κουμπιού

Μπορείτε επίσης να προσθέστε ένα κουμπί Pin It στη σελίδα AMP σας με τη βοήθεια του συστατικό. Εκτός από το πλάτος και ύψος διαστάσεις, είστε απαιτούνται για τον προσδιορισμό τεσσάρων χαρακτηριστικών για να ενσωματώσετε το κουμπί Pin It:

δεδομένα-do = "buttonPin" για να αφήσετε το χρόνο εκτέλεσης AMP να γνωρίζει ότι αυτό θα είναι ένα κουμπί Pin It

data-url με τη διεύθυνση URL που θέλετε να μοιραστείτε

δεδομένα-μέσα με την απόλυτη διεύθυνση URL της εικόνας που θέλετε να καρφιτσώνονται οι χρήστες

περιγραφή δεδομένων με την περιγραφή που θέλετε να εμφανίζεται στη φόρμα δημιουργίας Pin

Υπάρχουν πολλά διαφορετικά μεγέθη κουμπιών, για να διαλέξετε, ελέγξτε τα έγγραφα για όλα τα διαθέσιμα μεγέθη.

Παράδειγμα κώδικα:

Σε αυτό το παράδειγμα, δημιούργησα ένα κουμπί Pin It που θα επέτρεπε στους χρήστες να καρφιτσώσουν μια εικόνα από αυτή την πρώην θέση Hongkiat.com. Χρησιμοποίησα το μικρό μέγεθος ορθογώνιου κουμπιού.
      
 
Προεπισκόπηση κώδικα:

Σημειώστε ότι πρέπει να χρησιμοποιήσετε επιπλέον CSS για να εμφανίσετε το κουμπί Pin It στην κορυφή της εικόνας.

Μπορείτε επίσης να δημιουργήσετε ένα κουμπί Pinterest Follow χρησιμοποιώντας το δεδομένα-do = "buttonFollow" και καθορίζοντας το όνομα που θέλετε να εμφανίζεται στο κουμπί "Συνέχεια" στο ετικέτα δεδομένων & τη διεύθυνση URL του λογαριασμού σας στο data-href Χαρακτηριστικό.

Παράδειγμα κώδικα (κουμπί Συνέχεια):
   
Σενάριο για να συμπεριλάβετε:
  
5. amp-soundcloud

Το SoundCloud είναι μια δημοφιλής πλατφόρμα διανομής ήχου, όπου οι χρήστες μπορούν να μοιράζονται τη μουσική τους. Με τη βοήθεια του που μπορείτε παίζουν κομμάτια SoundCloud ακριβώς από τη σελίδα HTML του AMP.

Αυτό το στοιχείο μπορεί να χρησιμοποιείτε μόνο με σταθερού ύψους σχέδιο πράγμα που σημαίνει ότι πρέπει να καθορίσετε μόνο το ύψος, και το πλάτος θα υπολογιστεί από τον χρόνο εκτέλεσης AMP. Ως αποτέλεσμα, το ενσωματωμένο πρόγραμμα αναπαραγωγής ήχου SoundCloud θα συμπληρώστε όλο τον διαθέσιμο οριζόντιο χώρο.

ο μπορεί να εμφανιστεί το στοιχείο είτε κλασική είτε οπτική λειτουργία. Μπορείτε να επιλέξετε από τις δύο λειτουργίες ρυθμίζοντας την τιμή του δεδομένα-οπτική αποδίδουν σε κάθε ένα από αυτά αληθής ή ψευδής (η προεπιλογή είναι ψευδής).

Και στις δύο λειτουργίες, πρέπει να χρησιμοποιήσετε το δεδομένα-trackid αποδίδω σε προσδιορίστε τον αναγνωριστικό του ήχου. μπορείτε να βρείτε το αναγνωριστικό ήχου κάνοντας κλικ στο κουμπί Κοινή χρήση κάτω από το πρόγραμμα αναπαραγωγής ήχου στο SoundCloud.com και αναζητώντας τη διεύθυνση URL μακριάς μορφής μέσα στον κώδικα Embed.

Κλασσική λειτουργία

ο Κλασσική λειτουργία εμφανίζει μια μικρή εικόνα μικρογραφίας στα αριστερά και το πρόγραμμα αναπαραγωγής ήχου στα δεξιά. Μπορείτε να πάρετε τη σωστή τιμή για το ύψος από τον κώδικα ενσωμάτωσης στο SoundCloud.com.

Στην Κλασσική λειτουργία, μπορείτε να καθορίσετε το χρώμα της συσκευής αναπαραγωγής ήχου εάν θέλετε να χρησιμοποιήσετε το το χρώμα των δεδομένων χαρακτηριστικό (δεν μπορείτε να το κάνετε αυτό σε λειτουργία Visual).

Παράδειγμα κώδικα (κλασική λειτουργία):
   
Προεπισκόπηση κώδικα (κλασική λειτουργία):

Οπτική λειτουργία

Σε Οπτική λειτουργία, η χαρακτηρισμένη εικόνα εκτείνεται πίσω από το πρόγραμμα αναπαραγωγής ήχου. Εδώ, μπορείτε επίσης να βρείτε το σωστό ύψος που ανήκουν στην οπτική λειτουργία στον κώδικα ενσωμάτωσης στο SoundCloud.com.

Παράδειγμα κώδικα (οπτική λειτουργία):
   
Παράδειγμα κώδικα (οπτική λειτουργία):

Αν θέλεις ενσωματώστε έναν ιδιωτικό ήχο, χρησιμοποιήστε το προαιρετικό μυστικό-μάρκα δεδομένων Χαρακτηριστικό.

Σενάριο για να συμπεριλάβετε:
  
6. amp-αμπέλου

Το Αμπέλι είναι ένας ιστότοπος κοινής χρήσης βίντεο μικρής μορφής, στον οποίο μπορείτε να μοιράζεστε βίντεο με μήκος 6 δευτερολέπτων με τους φίλους σας. ο επιτρέπει την εύκολη λειτουργία ενσωματώστε βίντεο αμπέλου στις σελίδες HTML του AMP.

Αυτό το στοιχείο AMP είναι αρκετά απλό, χρειάζεται μόνο να προσθέσετε τις διαστάσεις και το αναγνωριστικό του βίντεο Vine στο δεδομένα-αμπέλι Χαρακτηριστικό. Μπορείτε να πάρετε το αναγνωριστικό από τη διεύθυνση URL κάθε αμπέλου.

Δεδομένου ότι τα αμπέλια είναι τετράγωνα, εάν χρησιμοποιείτε τη διάταξη απόκρισης, ο ίδιος κανόνας ισχύει όπως και για τις ενσωματώσεις του Instagram. μπορείτε να προσθέσετε οποιαδήποτε τιμή στο πλάτος και ύψος γνωρίσματα, μέχρι να είναι ίσοι θα δουλέψουν σωστά.

Παράδειγμα κώδικα:
   
Προεπισκόπηση κώδικα:

Σενάριο για να συμπεριλάβετε:
  
7. amp-youtube

Μπορείς ενσωματώστε βίντεο YouTube σε σελίδες AMP με τη βοήθεια του συστατικό.

Για να γίνει αυτό, πρέπει να προσθέσετε τις διαστάσεις και το αναγνωριστικό του βίντεο στο δεδομένα-videoid Χαρακτηριστικό. Κατά τον προσδιορισμό πλάτος και ύψος, είναι σημαντικό να προσέξτε τον λόγο διαστάσεων.

Μπορείτε επίσης να χρησιμοποιήστε τις παραμέτρους των ενσωματώσεων του YouTube στα έγγραφα AMP, εισάγετε μόνο το όνομα της παραμέτρου μετά το data-param- πρόθεμα.

Παράδειγμα κώδικα:

Σε αυτό το παράδειγμα, έκανα χρήση του αρχή Παράμετρος YouTube στο δεδομένα-param-start για να κάνετε το βίντεο να αρχίσει στα 43 δευτερόλεπτα.
   
Προεπισκόπηση κώδικα:

Σενάριο για να συμπεριλάβετε:
  
Άλλες υπηρεσίες κοινής χρήσης βίντεο

Το AMP διαθέτει επίσης στοιχεία που σχετίζονται με άλλες υπηρεσίες κοινής χρήσης βίντεο, ότι εργασία παρόμοια με . Μπορείτε να χρησιμοποιήσετε τα παρακάτω εκτεταμένα συστατικά στοιχεία AMP για ενσωματώσεις βίντεο από άλλους παρόχους εκτός του YouTube:

για ενσωματωμένες κάρτες Vimeo

για τις ενσωματώσεις Dailymotion

για Brightcove ενσωματώσεις

8. amp-κοινωνικό μερίδιο

Εκτός από τα μέσα κοινωνικής ενσωμάτωσης, μπορείτε επίσης εμφάνιση κουμπιών κοινής χρήσης στις σελίδες AMP χρησιμοποιώντας το συστατικό.

Το χαρακτηριστικό κοινωνικού μεριδίου είναι προκαθορισμένο για ορισμένους παρόχους, αλλά με τις σωστές ρυθμίσεις μπορείτε να χρησιμοποιήσετε το για άλλα κουμπιά κοινής χρήσης.

Προρυθμισμένα κουμπιά κοινής χρήσης

Προρυθμισμένα κουμπιά κοινής χρήσης δεν απαιτούνται πάρα πολλές ρυθμίσεις. πρέπει να ορίσετε το πλάτος (προεπιλογή είναι 60px) και ύψος (προεπιλογή είναι 44px) και το όνομα του παροχέα κοινωνικών μέσων στο τύπος Χαρακτηριστικό.

Με το Facebook, πρέπει επίσης να καθορίσετε το αναγνωριστικό του Facebook στο δεδομένα-param-app_id Χαρακτηριστικό.

Παράδειγμα κώδικα:
                    
 
Προεπισκόπηση κώδικα:

Η προ-διαμόρφωση κάνει υποθέσεις ότι η διεύθυνση URL που θέλετε να μοιραστείτε είναι η κανονική διεύθυνση URL της τρέχουσας σελίδας και το κείμενο που θέλετε να συμπεριλάβετε στο κοινόχρηστο στοιχείο σας είναι ο τίτλος της σελίδας.

Αν θέλετε να χρησιμοποιήσετε ένα άλλο config, μπορείτε να το κάνετε με τα ακόλουθα τρία προαιρετικά χαρακτηριστικά:

δεδομένα-κείμενο για το κείμενο που θέλετε να συμπεριλάβετε στο κοινόχρηστο στοιχείο

data-url για τη διεύθυνση URL που θέλετε να μοιραστείτε

κατανομή δεδομένων για το όνομα του ατόμου ή του παροχέα που θέλετε να αποδοθεί η μετοχή σας

Μη ρυθμισμένα κουμπιά κοινής χρήσης

Για να εμφανίσετε τα κουμπιά κοινής χρήσης μη διαμορφωμένους παρόχους, όπως το WhatsApp, πρέπει να το κάνετε καθορίστε το προσαρμοσμένο πρωτόκολλο του παρόχου στο κατανομή δεδομένων-τελικό σημείο Χαρακτηριστικό. Ελέγξτε στα έγγραφα πώς μπορείτε να το κάνετε αυτό.

Σενάριο για να συμπεριλάβετε:
  