8 composants AMP pour l'intégration des médias sociaux

Le plus gros conflit que le standard Web mobile de Google, Pages mobiles accélérées doit résoudre est accélérer les sites mobiles, tandis que en les maintenant fonctionnels et riches en contenu. Ces jours-ci, on ne peut imaginer un contenu riche et engageant sans l'intégration des sites de médias sociaux populaires - tweets, vidéos, audios, publications, photos..

Composants AMP étendus - parmi d’autres fonctionnalités intéressantes - constituent un excellent moyen d’intégrer AMP documents avec différents types de contenu social.

Comment fonctionnent les composants AMP étendus

La philosophie d'AMP repose sur les principes de Google meilleures pratiques de performance. Pour améliorer les temps de chargement des pages, les normes AMP limitent comment utiliser les technologies front-end. Par exemple, vous ne pouvez pas utiliser de code JavaScript personnalisé, de feuilles de style externes et tout élément HTML chargeant des ressources externes, telles que étiquette.

En échange, vous recevez un tas de Composants AMP vous pouvez utiliser pour afficher les ressources externes, tels que des images, vidéos, audios, publicités, etc. sur votre site.

Les composants AMP sont balises HTML spécifiques qui peut être utilisé de la même manière que les balises HTML ordinaires. Quelques-uns sont construit en au runtime AMP, alors que la majorité fonctionne comme une extension. Composants permettant l'intégration des médias sociaux sur les pages AMP sont tous des composants étendus.

Les composants AMP étendus vous obligent à importer le script d'appartenance dans le section de votre document HTML AMP. Comme AMP est un projet open-source, le nombre de composants étendus pourrait augmenter à l'avenir..

Dans cet article, nous avons rassemblé une poignée de composants AMP pouvant vous aider. avec intégration des médias sociaux. Gardez à l'esprit que les versions des scripts peut changer avec le temps, Alors, consultez toujours la documentation avant de l'inclure sur votre site..

1. `amp-facebook`

permet de intégrer une publication ou une vidéo sur Facebook dans une page AMP.

Tu as toujours besoin de spécifier les dimensions de la publication intégrée, ce qui signifie que vous devez ajouter un largeur et un la taille attribut avec des valeurs en pixels entiers. Vous pouvez trouver les dimensions appropriées en cliquant sur le menu "Intégrer" en haut de l'article de Facebook..

Vous devez également ajouter l'URL du message donné dans le data-href attribut. Vous pouvez trouver l'URL en cliquant sur l'horodatage de la publication sur Facebook, et le navigateur insérera l'URL unique dans la barre d'adresse..

Si tu veux intégrer une vidéo sans le message Facebook appartenant, ajouter l'option data-embed-as = "video" attribut

Si tu veux rendre votre intégration sensible Utilisez le disposition attribuer avec le "sensible" valeur. Vous pouvez également utiliser l'option disposition attribut sur tout autre composant AMP pour contrôler sa disposition.

Exemple de code:

Prévisualisation du code:

Le script doit inclure:

2. `amp-twitter`

Vous pouvez intégrer des tweets en pages AMP en utilisant le composant.

Pour ce faire, vous devez spécifier l'ID du tweet dans le data-tweetid attribut. Vous pouvez modifier l’affichage du tweet en ajoutant l’une des options d’affichage de l’APi Twitter en tant que Les données-* Attribut HTML5.

Par exemple, dans l'exemple ci-dessous, j'ai utilisé les API de Twitter. couleur du lien option d'affichage comme couleur de liaison de données (ses Les données-* format) pour changer la couleur du lien par défaut à la couleur que Hongkiat.com utilise sur son compte Twitter.

Exemple de code:

Prévisualisation du code:

le composant n'est pas encore parfait, les documents Github indiquent que Twitter ne fournit pas actuellement d'API qui donne un ratio d'aspect fixe. Tweet embed.

Cela signifie que vous devez régler manuellement le largeur et la taille les attributs, comme le runtime AMP n'affiche parfois pas une partie (généralement le bas) du tweet.

C'est toujours une bonne idée de vérifier à quoi ressemblent vos tweets intégrés avant de publier la page AMP..

Ajouter un espace réservé

Bien que ce ne soit pas obligatoire, la documentation recommande ajout d'un espace réservé au cas où le tweet ne se charge pas en une fois.

le espace réservé attribut peut être utilisé sur chaque composant AMP. L'espace réservé est montré immédiatement si les ressources finales ne sont pas disponibles. Lorsque l'élément AMP se charge, il cache son espace réservé.

Regardez à quoi ressemble le code ci-dessus. avec un espace réservé. Sur Twitter, j'ai simplement cliqué sur le bouton Incorporer le Tweet, copié-collé le bloc incorporable (sans le script à la fin) et ajouté le espace réservé attribuer à la

étiquette.

Exemple de code avec espace réservé:
   Comment valider des pages mobiles accélérées (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15 août 2016 
  
Le script doit inclure:
  
3. amp-instagram

Avec , vous pouvez intégrer des photos et des vidéos Instagram dans vos pages AMP.

Vous êtes tenu de spécifier les dimensions de l'embed avec le largeur et la taille attributs, et vous devez également ajouter l'identifiant de la photo ou de la vidéo Instagram en utilisant le shortcode de données attribut.

Vous pouvez trouver l'identifiant à la fin de l'URL, pour l'exemple de la photo ci-dessous l'URL est https://www.instagram.com/p/-PFt7tF8Km/, donc j'ai besoin d'utiliser -PFt7tF8Km comme valeur pour le shortcode de données attribut.

Exemple de code:
   
Prévisualisation du code:

Pour des mises en page réactives, AMP calcule automatiquement l’espace requis, ce qui permet également comprend le “Instagram chrome” (nom du compte, date, nombre de «j'aime», etc.).

Cela signifie que vous pouvez utiliser n’importe quelle valeur pour largeur et la taille, jusqu'à ce que le deux valeurs sont égales (Les photos Instagram sont généralement carrées), car le moteur d'exécution AMP redimensionnera l'image en fonction de l'espace disponible..

Si la photo ne correspond pas à un carré, vous devez spécifier sa réelle largeur et la taille valeurs.

Pour dispositions fixes, tu dois inclure l'espace supplémentaire (haut et bas: +48 px, gauche et droite: + 8 px) nécessaire pour le chrome Instagram lorsque vous calculez les dimensions de l'image.

Le script doit inclure:
  
4. amp-pinterest

vous permet de incorporer un widget Pin ou un bouton Pin It dans un document HTML AMP.

Intégrer un Widget Pin

Pour intégrer un widget Pin, vous devez spécifier les dimensions, l’URL du pin en utilisant le URL de données attribut, et vous devez également ajouter le data-do = "embedPin" attribut.

Exemple de code (taille par défaut):
   
Le widget Pin par défaut étant relativement petit, vous pouvez également opter pour une version plus grande en utilisant le bouton data-width = "medium" attribut.

Exemple de code (taille moyenne):
   
Prévisualisation du code (taille moyenne):

Afficher un bouton Pin It

Vous pouvez également ajouter un bouton Pin It à votre page AMP avec l'aide du composant. Séparé de largeur et la taille dimensions, vous êtes requis pour spécifier quatre attributs pour intégrer le bouton Pin It:

data-do = "buttonPin" faire savoir au moteur d'exécution AMP qu'il s'agira d'un bouton Pin It

URL de données avec l'URL que vous voulez partager

support de données avec l'URL absolue de l'image que les utilisateurs doivent épingler

Description des données avec la description que vous voulez voir apparaître dans le formulaire de création de pin

Il y a nombreuses tailles de boutons, à choisir, vérifiez les docs pour toutes les tailles disponibles.

Exemple de code:

Dans cet exemple, j'ai créé un bouton Pin It qui permettrait aux utilisateurs d'épingler une image de cet ancien post de Hongkiat.com. J'ai utilisé la petite taille du bouton rectangulaire.
      
 
Prévisualisation du code:

Notez que vous devez utiliser des CSS supplémentaires pour afficher le bouton Épingler en haut de l'image..

Vous pouvez également créer un bouton Suivre Pinterest en utilisant le bouton data-do = "buttonSuivre" attribut, et en spécifiant le nom que vous souhaitez afficher à l’intérieur du bouton Suivre de la étiquette de données & l'URL de votre compte dans le data-href attribut.

Exemple de code (bouton Suivre):
   
Le script doit inclure:
  
5. ampli-soundcloud

SoundCloud est une plate-forme de distribution audio populaire où les utilisateurs peuvent partager leur musique. Avec l'aide du composant que vous pouvez jouer des pistes SoundCloud directement depuis votre page HTML AMP.

Ce composant peut être utilisé uniquement avec hauteur fixe disposition ce qui signifie que vous devez seulement spécifier le la taille, et la largeur sera calculée par le runtime AMP. En conséquence, le lecteur audio SoundCloud intégré sera remplir tout l'espace horizontal disponible.

le composant peut être affiché dans mode classique ou visuel. Vous pouvez choisir parmi les deux modes en définissant la valeur de données visuelles attribuer à soit vrai ou faux (la valeur par défaut est faux).

Dans les deux modes, vous devez utiliser le data-trackid attribuer à spécifier l'identifiant de l'audio; vous pouvez trouver l'ID audio en cliquant sur le bouton Partager situé sous le lecteur audio sur SoundCloud.com, et en recherchant l'URL du formulaire détaillé à l'intérieur du code incorporé..

Mode classique

le Mode classique affiche une petite image miniature à gauche et le lecteur audio à droite. Vous pouvez obtenir la valeur appropriée pour le la taille attribut du code incorporé sur SoundCloud.com.

En mode classique, vous pouvez spécifier la couleur du lecteur audio si vous souhaitez utiliser le couleur de données attribut (vous ne pouvez pas faire cela en mode visuel).

Exemple de code (mode classique):
   
Prévisualisation du code (mode classique):

Mode visuel

Dans Mode visuel, l'image sélectionnée s'étend derrière le lecteur audio. Ici, vous pouvez également trouver le bon la taille appartenant au mode visuel dans le code d'intégration sur SoundCloud.com.

Exemple de code (mode visuel):
   
Exemple de code (mode visuel):

Si tu veux intégrer un audio privé, utiliser l'option jeton de secret de données attribut.

Le script doit inclure:
  
6. amp-vigne

Vine est un site de partage de vidéos abrégé sur lequel vous pouvez partager des vidéos de 6 secondes avec vos amis. le composant permet de facilement intégrer des vidéos de vigne dans vos pages HTML AMP.

Ce composant AMP est assez simple, il vous suffit d’ajouter les dimensions et l’ID de la vidéo Vine dans le data-vineid attribut. Vous pouvez obtenir l'ID de l'URL de chaque vigne.

Comme les vignes sont des carrés, si vous utilisez la disposition responsive, la même règle s'applique que pour les inserts Instagram; vous pouvez ajouter n'importe quelle valeur au largeur et la taille les attributs, jusqu'à ce qu'ils soient égaux ils vont bien travailler.

Exemple de code:
   
Prévisualisation du code:

Le script doit inclure:
  
7. amp-youtube

Vous pouvez intégrer des vidéos YouTube sur les pages AMP avec l'aide du composant.

Pour ce faire, vous devez ajouter les dimensions, ainsi que l'ID de la vidéo dans le data-videoid attribut. Lors de la spécification largeur et la taille, c'est important de prêter attention au rapport d'aspect.

Vous pouvez également utiliser les paramètres de YouTube embeds dans les documents AMP, insérez simplement le nom du paramètre après le data-param- préfixe.

Exemple de code:

Dans cet exemple, j'ai utilisé le début Paramètre YouTube dans le data-param-start attribut afin de faire commencer la vidéo à 43s.
   
Prévisualisation du code:

Le script doit inclure:
  
Autres services de partage de vidéos

AMP comporte également des composants liés à d’autres services de partage vidéo, qui fonctionne de manière similaire à . Vous pouvez utiliser les composants AMP étendus suivants pour l'intégration vidéo de fournisseurs autres que YouTube:

pour Vimeo embarque

pour les embouts Dailymotion

pour les embases Brightcove

8. amp-social-share

Outre les médias sociaux intégrés, vous pouvez également afficher les boutons de partage social sur vos pages AMP en utilisant le composant.

La fonctionnalité de partage social est préconfiguré pour certains fournisseurs, mais avec les bons réglages, vous pouvez utiliser le composant pour tout autre bouton de partage social.

Boutons de partage préconfigurés

Boutons de partage préconfigurés ne nécessite pas trop de réglages; vous devez définir le largeur (60px par défaut) et la taille (44px par défaut), et le nom du fournisseur de média social dans le répertoire type attribut.

Avec Facebook, vous devez également spécifier l'identifiant de l'application Facebook dans le champ data-param-app_id attribut.

Exemple de code:
                    
 
Prévisualisation du code:

La pré-configuration fait des suppositions que l'URL que vous souhaitez partager est l'URL canonique de la page en cours et que le texte que vous souhaitez inclure dans votre partage est le titre de la page.

Si vous voulez utiliser une autre configuration, vous pouvez le faire avec les commandes suivantes trois attributs optionnels:

texte de données pour le texte que vous souhaitez inclure dans le partage

URL de données pour l'URL que vous voulez partager

attribution de données pour le nom de la personne ou du fournisseur auquel vous voulez que votre part soit attribuée

Boutons de partage non configurés

Pour afficher les boutons de partage social de fournisseurs non configurés, comme WhatsApp, vous devez spécifier le protocole personnalisé du fournisseur dans le point de partage de données attribut. Découvrez dans la documentation comment vous pouvez le faire.

Le script doit inclure:
  