Paradis Pour Les Concepteurs Et Les Développeurs

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

Le plus gros conflit que la norme Web mobile de Google, Accelerated Mobile Pages, doit résoudre, est de rendre les sites mobiles plus rapides, tout en les maintenant fonctionnels et riches en contenu . Ces jours-ci le contenu riche et attrayant peut difficilement être imaginé sans embarquer des sites populaires de médias sociaux - tweets, vidéos, audios, messages, photos.

Les composants AMP étendus, parmi d'autres fonctionnalités exceptionnelles, constituent un excellent moyen d'intégrer des documents AMP avec différents types de contenu social.

Fonctionnement des composants AMP étendus

Au cœur de la philosophie d'AMP, il y a les meilleures pratiques de performance de Google. Pour améliorer les temps de chargement des pages, les normes AMP limitent la façon dont vous pouvez utiliser les technologies frontales . Par exemple, vous ne pouvez pas utiliser JavaScript personnalisé, des feuilles de style externes et tout élément HTML qui charge des ressources externes, telles que marque.

En échange, vous obtenez un ensemble de composants AMP que vous pouvez utiliser pour afficher des ressources externes, telles que des images, des vidéos, des audios, des publicités, etc. sur votre site.

Les composants AMP sont des balises HTML spécifiques qui peuvent être utilisées de la même manière que les balises HTML ordinaires. Quelques-uns d'entre eux sont intégrés dans le runtime AMP, tandis que la majorité fonctionne comme des extensions . Les composants qui rendent l'intégration des médias sociaux possible sur les pages AMP sont tous des composants étendus .

Les composants AMP étendus nécessitent l' importation du script de propriété dans le section de votre document HTML AMP. Comme AMP est un projet open-source, le nombre de composants étendus pourrait augmenter dans le futur.

Dans ce post, nous avons collecté une poignée de composants AMP qui peuvent vous aider à intégrer les médias sociaux . Gardez à l'esprit que les versions des scripts peuvent changer avec le temps, donc vérifiez toujours la documentation avant de les inclure sur votre site.

1. `amp-facebook`

permet d' intégrer un post Facebook ou une vidéo dans une page AMP.

Vous devez toujours spécifier les dimensions de la publication incorporée, ce qui signifie que vous devez ajouter un attribut width et un attribut height avec des valeurs en pixels entiers. Vous pouvez trouver les bonnes dimensions en cliquant sur le menu "Intégrer" en haut de la page Facebook.

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

Si vous souhaitez intégrer une vidéo sans le message Facebook associé, ajoutez l'attribut facultatif data-embed-as="video"

Si vous voulez rendre votre embed utilisable, utilisez l'attribut layout avec la valeur "responsive" . Vous pouvez également utiliser l'attribut de layout facultatif sur tout autre composant AMP pour contrôler sa mise en forme.

Exemple de code:

Aperçu du code:

Script à inclure:

2. `amp-twitter`

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

Pour ce faire, vous devez spécifier l'ID du tweet dans l'attribut data-tweetid . Vous pouvez modifier la manière dont le tweet est affiché en ajoutant l'une des options d'affichage de l'API Twitter en tant qu'attribut data- data-* HTML5.

Par exemple, dans l'exemple ci-dessous j'ai utilisé l'option d'affichage linkColor l'API Twitter en linkColor que data-link-color (son format data-* ) pour changer la couleur du lien par défaut à la couleur utilisée par Hongkiat.com sur son compte Twitter.

Exemple de code:

Aperçu du code:

le Composant n'est pas encore parfait, Github docs dit que Twitter ne fournit pas actuellement une API qui donne des proportions fixes .

Cela signifie que vous devez définir manuellement les attributs de width et de height, car le moteur d'exécution AMP n'affiche parfois pas une partie (généralement la partie inférieure) 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 cela ne soit pas obligatoire, la documentation recommande d' ajouter un espace réservé au cas où le tweet ne se chargerait pas en même temps.

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

Jetez un oeil à la façon dont l'exemple de code ci-dessus ressemble à un espace réservé . Sur Twitter, j'ai simplement cliqué sur le bouton Intégrer le Tweet, copié-collé le blockquote intégrable (sans le script à la fin), et ajouté l'attribut placeholder au

marque.
Exemple de code avec espace réservé:
 Comment valider les pages mobiles accélérées ( )
- Hongkiat (@hongkiat) 
Script à inclure:
3. amp-instagram
Avec , vous pouvez intégrer des photos et vidéos Instagram dans vos pages AMP.
Vous devez spécifier les dimensions de l'embed avec les attributs width et height, et vous devez également ajouter l'identifiant de la photo Instagram ou de la vidéo en utilisant l'attribut data-shortcode .
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 je dois utiliser -PFt7tF8Km comme valeur pour les data-shortcode attribut.
Exemple de code:
Aperçu du code:
Pour les mises en page réactives, AMP calcule automatiquement l'espace requis, qui inclut également le «Chrome Instagram» (nom du compte, date, nombre de mentions J'aime, etc.).
Cela signifie que vous pouvez utiliser n'importe quelle valeur pour la width et la height, jusqu'à ce que les deux valeurs soient égales (les photos Instagram sont généralement carrées), car l'exécution AMP redimensionnera l'image en fonction de l'espace disponible.
Si la photo n'est pas un carré, vous devez spécifier ses valeurs réelles de width et de height .
Pour les mises en page fixes, vous devez inclure l'espace supplémentaire (haut et bas: +48 px, gauche et droite: + 8px) nécessaire pour le chrome Instagram lorsque vous calculez les dimensions de l'image.
Script à inclure:
4. amp-pinterest
vous permet d' intégrer un widget Pin ou un bouton Pin It dans un document HTML AMP.
Intégrer un widget Pin
Pour incorporer un widget Pin, vous devez spécifier les dimensions, l'URL de la broche en utilisant l'attribut data-url, et vous devez également ajouter l'attribut data-do="embedPin" .
Exemple de code (taille par défaut):
Comme le widget Pin par défaut est assez petit, vous pouvez également opter pour une version plus grande en utilisant l'attribut data-width="medium" .
Exemple de code (taille moyenne):
Aperçu du code (taille moyenne):
Afficher un bouton Pin It
Vous pouvez également ajouter un bouton Pin It à votre page AMP à l'aide de composant. En dehors des dimensions de width et de height, vous devez spécifier quatre attributs pour intégrer le bouton Pin It:
data-do="buttonPin" pour faire savoir à l'exécution de l'AMP qu'il s'agit d'un bouton Pin It
data-url avec l'URL que vous voulez partager
data-media avec l'URL absolue de l'image que vous voulez que les utilisateurs épinglent
data-description avec la description que vous voulez voir apparaître dans le formulaire de création de Pin
Il y a beaucoup de différentes 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 poste de Hongkiat.com. J'ai utilisé la petite taille de bouton rectangulaire.
Aperçu du code:
Notez que vous devez utiliser des feuilles de style CSS supplémentaires pour afficher le bouton Pin It au-dessus de l'image.
Vous pouvez également créer un bouton Pinterest Follow en utilisant l'attribut data-do="buttonFollow" et en spécifiant le nom que vous souhaitez afficher dans le bouton Follow de l' data-label et l'URL de votre compte dans l'attribut data-href .
Exemple de code (bouton Suivre):
Script à inclure:
5. amp-soundcloud
SoundCloud est une plate-forme de distribution audio populaire où les utilisateurs peuvent partager leur musique. Avec l'aide du composant, vous pouvez lire les pistes SoundCloud directement à partir de votre page HTML AMP.
Ce composant ne peut être utilisé qu'avec fixed-height disposition à fixed-height ce qui signifie que vous ne devez spécifier que la height et que la largeur sera calculée par le runtime AMP. En conséquence, le lecteur audio SoundCloud intégré remplira tout l'espace horizontal disponible .
le composant peut être affiché en mode classique ou visuel . Vous pouvez choisir parmi les deux modes en définissant la valeur de l'attribut data-visual sur true ou false (la valeur par défaut est false ).
Dans les deux modes, vous devez utiliser l'attribut data-trackid pour spécifier l'identifiant de l'audio; Vous pouvez trouver l'ID audio en cliquant sur le bouton Partager sous le lecteur audio sur SoundCloud.com et en recherchant l'URL longue dans le code intégré.
Mode classique
Le Classic Mode affiche une petite vignette sur la gauche, et le lecteur audio sur la droite. Vous pouvez obtenir la valeur correcte pour l'attribut height partir du code Embed sur SoundCloud.com.
En mode Classique, vous pouvez spécifier la couleur du lecteur audio si vous souhaitez utiliser l'attribut data-color (vous ne pouvez pas le faire en mode Visual).
Exemple de code (mode classique):
Aperçu du code (mode classique):
Mode visuel
En Visual Mode, l'image sélectionnée s'étend derrière le lecteur audio. Ici, vous pouvez également trouver la height appropriée appartenant au mode visuel dans le code d'intégration sur SoundCloud.com.
Exemple de code (mode visuel):
Exemple de code (mode visuel):
Si vous souhaitez intégrer un son privé, utilisez l'attribut optionnel data-secret-token .
Script à inclure:
6. amp-vine
Vine est un site de partage de vidéos sur lequel vous pouvez partager des vidéos de 6 secondes avec vos amis. le Ce composant permet d' intégrer facilement des vidéos Vine 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 l'attribut data-vineid . Vous pouvez obtenir l'ID de l'URL de chaque Vine.
Comme les vignes sont des carrés, si vous utilisez la mise en page responsive, la même règle s'applique comme avec Instagram embarqué; vous pouvez ajouter n'importe quelle valeur aux attributs width et height, jusqu'à ce qu'ils soient égaux, ils fonctionneront correctement.
Exemple de code:
Aperçu du code:
Script à inclure:
7. amp-youtube
Vous pouvez intégrer des vidéos YouTube sur des pages AMP à l'aide de composant.
Pour ce faire, vous devez ajouter les dimensions, plus l'ID de la vidéo dans l'attribut data-videoid . Lorsque vous spécifiez la width et la height, il est important de prêter attention au rapport d'aspect .
Vous pouvez également utiliser les paramètres de YouTube incorporés dans les documents AMP, il suffit d'insérer le nom du paramètre après le préfixe data-param- .
Exemple de code:
Dans cet exemple, j'ai utilisé le paramètre start YouTube dans l'attribut data-param-start pour que la vidéo commence à 43s.
Aperçu du code:
Script à inclure:
Autres services de partage de vidéos
AMP a également des composants liés à d'autres services de partage vidéo, qui fonctionnent de manière similaire à . Vous pouvez utiliser les composants AMP étendus suivants pour les vidéos intégrées à des fournisseurs autres que YouTube:
pour Vimeo embarque
pour Dailymotion embarque
pour les encastrements Brightcove
8. amp-social-share
En dehors des médias sociaux intégrés, vous pouvez également afficher des boutons de partage social sur vos pages AMP en utilisant composant.
La fonctionnalité de partage social est préconfigurée pour certains fournisseurs, mais avec les bons paramètres, vous pouvez utiliser le composant pour tous les autres boutons de partage social.
Boutons de partage préconfigurés
Les boutons de partage préconfigurés ne nécessitent pas trop de paramètres. vous devez définir les attributs width (par défaut 60px) et height (par défaut 44px), ainsi que le nom du fournisseur de médias sociaux dans l'attribut type .
Avec Facebook, vous devez également indiquer l'identifiant de l'application Facebook dans l'attribut data-param-app_id .
Exemple de code:
Aperçu du code:
La pré-configuration suppose que l'URL que vous souhaitez partager est l'URL canonique de la page en cours, et 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 trois attributs optionnels suivants:
data-text de data-text pour le texte que vous souhaitez inclure dans le partage
data-url pour l'URL que vous souhaitez partager
data-attribution de data-attribution pour le nom de la personne ou du fournisseur à qui vous souhaitez attribuer votre part
Boutons de partage non configurés
Pour afficher les boutons de partage social des fournisseurs non configurés, tels que WhatsApp, vous devez spécifier le protocole personnalisé du fournisseur dans l'attribut data-share-endpoint . Découvrez dans les docs comment vous pouvez le faire.
Script à inclure:
25 sculptures qui défient l'esprit et qui défient les lois de la physique

Le but de l'art est de rendre le confort inconfortable, et le confort inconfortable. Nous remettons en question des concepts auxquels nous sommes habitués, mais nous trouvons un réconfort dans la loi elle - même et aucune autre œuvre d'art ne remet en question le statu quo que les statues qui défient la logique et notre compréhension du fonctionnement des choses.Dans

(Conseils techniques et de conception)

Accès à distance à votre ordinateur avec Chrome Remote Desktop

Nous y sommes tous déjà allés: nous sommes au bureau, ou loin de chez nous, et tout à coup nous réalisons que nous avons besoin d'un fichier ou d'un document particulier qui se trouve sur un autre ordinateur . De plus, les fichiers ne sont pas sur Dropbox ou tout autre stockage en nuage. Cel

(Conseils techniques et de conception)