Tutoriel : Affichage de tweets sur la page de garde

Vous pouvez personnaliser l'apparence de la page d'accueil de votre portail de développeur pour afficher les tweets récents. Vous pouvez utiliser des tweets pour informer les utilisateurs, par exemple sur la disponibilité des services ou à propos des campagnes marketing.

Avant de commencer

Un portail de développeur doit être activé et vous devez disposer d'un accès administrateur pour exécuter ce tutoriel. Le tutoriel Création du portail explique comment activer le portail si vous ne l'avez pas déjà fait.

A propos de ce tutoriel

Dans cette tâche, vous créez une vue, vous la personnalisez pour afficher des tweets, puis vous imbriquez cette vue sur la page d'accueil de votre site de portail de développeur .

Avant de commencer, la page de garde se présente comme suit: Image de la page de garde

Ce tutoriel vous guide à travers les étapes suivantes :
  1. Activez le module Media entity Twitter.
  2. Créez une entité appelée Twitter pour stocker les tweets.
  3. Ajout d'éléments de support.
  4. Créez une vue de carrousel.
  5. Personnalisation de la vue de carrousel.
  6. Imbrication de la vue de carrousel sur la page d'accueil de votre portail de développeur.

Activation du module Media entity twitter

  1. Connectez-vous à votre portail de développeur en tant qu'administrateur.
  2. Cliquez sur Extend > Extend, et saisissez " media dans le champ Filter.
  3. Dans la section Médias, recherchez l'entité média Twitter et cliquez sur Activer pour activer le module " Media entity twitter.

    Page d'activation du module twitter de l'entité média

Création d'une entité appelée Twitter pour stocker les tweets

  1. Naviguez vers Structure > Types de médias.
  2. Cliquez sur +Ajouter un type de média.
  3. Dans la zone Nom , entrez Twitter.
  4. Dans la liste Source média, sélectionnez Twitter.

    Source de support de twitter

  5. Dans la section Media source configuration, assurez-vous que la valeur " Whether to use Twitter api to fetch tweets or not est définie sur No.
  6. Dans la section Mappage de champ, assurez-vous que les sections Tweet ID et Twitter user information sont réglées sur - Sauter le champ -.

    pour ajouter la vue twitter

  7. Cliquez sur Sauvegarder.
  8. Sélectionnez Gérer l'affichage dans la liste située à côté de Editer pour le nouveau Twitter type de média.
  9. Dans la liste Format de Tweet URL, sélectionnez Twitter embed.
  10. Assurez-vous que les champs Authored on, Authored by et Thumbnail se trouvent dans la section Disabled.

    Capture d'écran des options d'affichage

  11. Cliquez sur Sauvegarder.

Ajout de médias

  1. Cliquez sur Médias > +Ajouter un média > Twitter.
  2. Dans la zone Nom , entrez un nom pour le support, par exemple Drupal Tweet.
  3. Dans le champ Tweet URL, entrez un URL, par exemple https://twitter.com/drupal/status/966443708160839684.

    page pour ajouter twitter URL

  4. Cliquez sur Sauvegarder.
  5. Répétez ces étapes pour ajouter d'autres tweets, vous en avez besoin d'au moins deux pour créer une vue carrousel.

Création d'une vue carrousel

  1. Naviguez vers Structure > Vues.
  2. Cliquez sur +Ajouter une vue.
  3. Dans le champ Nom de la vue, saisissez un nom pour votre vue, par exemple Vue Twitter.
  4. Sous Paramètres d'affichage, sélectionnez les options suivantes :
    • show: Les médias
    • of type : Twitter
    • sorted by: Non trié
  5. Dans la section Paramètres du bloc, cochez la case Créer un bloc.
  6. Assurez-vous que le Format d'affichage est sélectionné comme Carrousel de clics de champs.

    créer une page carrousel

  7. Cliquez sur Sauvegarder et éditer.

Personnalisation de la vue carrousel

A présent, vous vous trouvez sur la page sur laquelle vous pouvez éditer la vue.

  1. Si vous n'êtes pas sur la page de modification de la vue, accédez à Structure > Vues, recherchez le nom de la vue que vous avez créée et cliquez sur Modifier.
  2. Dans la section Titre, cliquez sur Vue tweet et entrez <none> dans le champ Title, puis cliquez sur Appliquer.

    pour modifier le nom de la vue

  3. Dans la section Champs, cliquez sur Ajouter, puis recherchez tweet.
  4. Cochez la case Tweet URL et cliquez sur Ajouter et configurer les champs.

    page d'ajout de champs

  5. Dans Formateur, sélectionnez Twitter embed et cliquez sur Appliquer.

    page pour ajouter le formateur twitter embed

  6. Dans la section Champs, cliquez sur Media : Nom, et cliquez sur Supprimer.

    page pour supprimer le nom du média

  7. Dans la section Critères de filtrage, cliquez sur Media : Publié (= True), et cliquez sur Supprimer.

    page pour supprimer les médias publiés

  8. Dans la section Format, cliquez sur Réglages à côté de Carrousel de clics.
  9. Dans la liste Skin Main, sélectionnez Default.
  10. Dans la section Champs de légende, sélectionnez Média : Tweet URL et les cases à cocher Override main optionset.
  11. Dans la section Options superposables, cochez les cases Autoplay et Dots, puis cliquez sur Appliquer.

    pour configurer les changements de peau

  12. Dans la section Pager, cliquez surItems, définissez le champ Items à afficher sur 0 puis cliquez sur Appliquer.

    page d'options de téléavertisseur

  13. Cliquez sur Sauvegarder.

Intégrez la vue sur la page d'accueil de votre portail de développeur

  1. Naviguez vers Structure > Pages.
  2. Recherchez l'étiquette welcome et cliquez sur Editer.
  3. Dans la section Variantes, cliquez sur Panneaux, puis Contenu.
  4. Cliquez sur Ajouter un nouveau bloc.
  5. Dans la section Listes (Vues), sélectionnez votre nouveau bloc.

    ajouter la vue tweet au bloc

  6. Décochez la case Afficher le titre et cliquez sur Ajouter un bloc.
  7. Vous pouvez désormais modifier la position de votre tweet sur la page d'accueil.

    Capture d'écran de l'affichage du tweet sur la page d'accueil

  8. Cliquez sur Mettre à jour et sauvegarder.

Tâches exécutées dans ce tutoriel

Vous pouvez vérifier que la vue que vous avez créée apparaît sur la page de garde de votre page de site.

La nouvelle page d'accueil avec le carrousel de tweet

Etape suivante

Vous pouvez modifier votre vue à tout moment en naviguant vers Structure > Vues et en sélectionnant votre vue par son nom. Vous pouvez également modifier ou supprimer la présentation de la vue sur la page d'accueil en revenant à la section de présentation de votre page sous Structure > Pages.

Vous pouvez également intégrer vos données Twitter de manière dynamique. Pour plus d'informations, voir les liens ci-dessous.