Gérer plusieurs profils utilisateur

​

Utilisation du tableau de bord

​

Créer un nouveau profil

​

Passer au nouveau profil

​

Obtenir la Profile Key

​

Inviter un membre de l’équipe

​

Statut du membre de l’équipe

​

Membres de l’équipe contactant le support

​

Réactiver un User Profile suspendu

​

Raison de la suspension

1. Recherchez dans votre boîte de réception en utilisant le RefId du User Profile suspendu
2. Le sujet de l’e-mail indiquera clairement qu’une suspension a eu lieu

​

Réactiver un User Profile suspendu

1. Vous connectant au tableau de bord et en accédant à la page User Profiles.
2. Trouver les User Profiles suspendus en cliquant sur l’onglet « Suspended » ou en recherchant par le RefId du User Profile, qui est inclus dans l’e-mail.
3. Annulez la suspension du User Profile en cliquant sur le bouton « Unsuspended ».
4. Consultez et acceptez la certification de conformité.

​

Gestion des User Profiles actifs

​

Marque blanche de la page Connect Accounts

• Ajoutez ou supprimez le logo de votre entreprise et définissez sa hauteur.
• Choisissez quels réseaux sociaux vos utilisateurs peuvent connecter.
• Définissez la langue de la page.
• Affichez vos propres liens d’aide ou masquez ceux d’Ayrshare.
• Définissez les en-têtes principaux et secondaires par User Profile (par exemple, le nom ou l’entreprise du client).
• Contrôlez la redirection du bouton Close vers votre application.
• Personnalisez les modales Instagram et Telegram avec votre propre HTML.

• Appliquez un fichier CSS personnalisé pour contrôler les couleurs, les polices et les fonctionnalités affichées, en utilisant des hooks de classes documentés pour restyliser les boutons de connexion eux-mêmes.
• Colorez les dialogues de liaison — sélecteurs de page, formulaires d’identifiants et confirmations — pour qu’ils correspondent à votre page.
• Définissez votre propre titre de page, texte du bouton Close et favicon.
• Ajoutez du texte de pied de page ou du HTML personnalisé.

​

Paramètres

​

Démonstration vidéo des options de personnalisation de la page de liaison

​

Restreindre l’accès à un User Profile

​

Restreindre l’accès au Primary Profile

​

Restreindre l’accès aux membres de l’équipe

​

Mettre à jour le logo sur la page de liaison sociale

​

Définir l’accès aux réseaux sociaux

​

Définir la langue pour la liaison sociale

• Anglais
• Arabe
• Chinois (simplifié)
• Français
• Allemand
• Italien
• Japonais
• Portugais
• Espagnol

• Traduire les réponses de messages d’erreur de l’API
• Traduire une publication

​

Afficher l’emplacement de la Page

​

Visibilité des liens d’aide

​

E-mails alternatifs pour les alertes

​

Connexion Instagram

​

Instagram Login direct vs authentification Facebook Page

​

Limitations de fonctionnalités avec Instagram Login direct

• Données de marque/utilisateur - Impossible de récupérer les informations de compte Instagram via les points de terminaison brand.
• Recherche de hashtags - Impossible de rechercher des hashtags sur Instagram.
• Collaborations - Impossible d’inviter des collaborateurs aux publications Instagram.
• Marquage de localisation - Impossible d’ajouter des balises de localisation aux publications Instagram.
• idId - ID d’utilisateur Instagram hérité - champ non renvoyé pour les statistiques sociales Instagram.

​

Quelle méthode choisir ?

• Activez Instagram Login direct si vous n’avez besoin que d’une fonctionnalité de publication de base et n’exigez pas les fonctionnalités avancées répertoriées ci-dessus.
• Désactivez Instagram Login direct (utilisez l’authentification Facebook Page) si vous avez besoin d’accéder à toutes les fonctionnalités Instagram, y compris la recherche de hashtags, les collaborations, le marquage de localisation ou la récupération de données de marque.

​

Modales personnalisées

<div>
  <span class="underline">
    Everyone agrees that
    <a target="_blank" href="https://www.ayrshare.com">Ayrshare Rocks!</a>
  </span>
</div>

span.underline {
  color: blue;
  text-decoration: underline;
}
span.underline a {
  color: blue;
  text-decoration: none;
}

​

Utilisation de l’API

​

Créer et gérer les profils

​

Obtenir la Profile Key

​

Activer la messagerie

​

Personnalisation Max Pack

​

Personnaliser le CSS

​

Hooks de classes CSS

.social-linking-page-column {
  max-width: none !important;
}

.social-account-icon {
  width: 24px !important;
  height: 24px !important;
}
.social-account-icon :is(svg, img) {
  width: 21px !important;
  height: 21px !important;
}

.social-account-card {
  --ayr-pill-bg: #1b3a2b;
  --ayr-pill-fg: #79bd96;
}

<div class="main-content">
  <div class="social-linking-page-column">
    <div class="social-linking-header">
      <div><img class="company-logo" /></div>
      <div>
        <h1 class="heading-social-accounts">…</h1>
        <div class="additional-info additional-info__body">…</div>
      </div>
    </div>
    <div class="social-accounts-grid">
      <div class="social-account-card-wrapper">
        <div>
          <!-- unnamed clickable wrapper, always the full width of the cell -->
          <div class="social-account-card unlinked-card" data-platform="tiktok">
            <div>
              <div class="social-account-icon">…</div>
              <div>
                <p class="social-account-name">TikTok</p>
                <p class="click-to-link">…</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      …
    </div>
    <div><button class="close-button">…</button></div>
  </div>
</div>

.social-linking-page-column {
  display: flex !important;
  flex-direction: column !important;
}
.social-linking-header {
  display: contents !important;
}
/* Your logo, the instruction block and the Close button each sit inside a
   further wrapper that has no name of its own. Flatten those too, or `order`
   below has nothing to compare. */
.social-linking-header > div,
.social-linking-page-column > div:has(> .close-button) {
  display: contents !important;
}

.company-logo {
  order: 0 !important;
}
.social-accounts-grid {
  order: 1 !important;
}
.close-button {
  order: 2 !important;
}
.additional-info {
  order: 3 !important;
}

​

Linking Dialog Colors

:root {
  --ayr-dialog-backdrop: rgba(10, 10, 10, 0.66);
  --ayr-dialog-bg: #161616;
  --ayr-dialog-fg: #e7eae6;
  --ayr-dialog-muted-fg: #9aa0a6;
  --ayr-dialog-border: #262626;
  --ayr-dialog-radius: 22px;
  --ayr-dialog-accent: #79bd96;
  --ayr-dialog-input-bg: #0f0f0f;
  --ayr-dialog-input-fg: #e7eae6;
  --ayr-dialog-input-border: #3a3a3a;
}

​

Mettre à jour une ancienne feuille de style

• Les noms de classes générés par la page elle-même. Les noms de classes que vous avez pu copier depuis les outils de développement du navigateur (par exemple tout ce qui commence par chakra-) appartiennent au framework avec lequel la page est construite, et non à un contrat public. Ces noms de classes n’existent plus et il n’y a pas d’équivalent à leur substituer. Réécrivez la règle en utilisant les sélecteurs des tableaux ci-dessus.
• Les sélecteurs d’éléments ou d’attributs nus tels que div > div ou button[type="button"]. La structure de la page ne constitue pas un contrat et a changé, si bien qu’une règle qui compte les niveaux à partir de .main-content atterrit désormais sur un élément différent qu’auparavant. C’est la raison la plus courante pour laquelle une règle de disposition semble ne rien faire, ou produit un résultat inattendu.
• Les règles positionnelles qui comptaient les éléments pour atteindre la grille de cartes. Avant que la grille et les cellules aient des noms, la seule façon de les atteindre était de compter les niveaux à partir de .main-content, avec des règles de la forme .main-content > div, .main-content > div > div, .main-content > div > div > div ou .main-content > div:not(.additional-info). Ces règles correspondent toujours à quelque chose, ce qui explique qu’elles soient faciles à ne pas remarquer : .main-content est toujours là, mais une carte se trouve désormais cinq niveaux en dessous, donc chaque règle atterrit un ou deux niveaux à côté de sa cible. Une règle visant la grille peut finir sur le conteneur de l’en-tête de la page, et une règle visant une seule carte peut finir par redimensionner toutes les cartes à la fois. Remplacez-les par les deux noms qui existent désormais à cet effet : .social-accounts-grid pour la grille et .social-account-card-wrapper pour la cellule qui contient une carte. Voir Modifier la disposition des cartes.
• Les règles qui ne fonctionnent que sur un élément flex : z-index, order, align-self, flex. Ce sont les plus difficiles à repérer, car le sélecteur correspond toujours et la déclaration reste valide — elle n’a simplement aucun effet. Sur l’ancienne page, votre logo, votre titre, votre bloc d’instructions et votre bouton Close étaient des enfants directs de .main-content, dont votre feuille de style faisait un conteneur flex, si bien que chacun d’eux était un élément flex. Un élément flex respecte z-index même sans position, et respecte order et align-self. Sur la page reconstruite, ces quatre éléments se trouvent à l’intérieur de conteneurs, ils ne sont donc plus des éléments flex et ces quatre propriétés cessent de s’y appliquer. Le symptôme est généralement quelque chose qui disparaît plutôt que quelque chose qui se déplace. Un z-index sur votre logo, par exemple, est ce qui servait à le faire passer au-dessus d’une barre d’en-tête fixe dessinée avec .main-content::before — sans lui, la barre se peint directement par-dessus le logo et le logo semble entièrement manquant, alors même qu’il s’est chargé correctement et qu’il est à la bonne taille. Deux correctifs, l’un ou l’autre convient :
  /* 1. Give the element a position, so z-index applies on its own. */
  .company-logo {
    position: relative;
    z-index: 2;
  }
  
  /* 2. Or flatten the wrappers, which makes these elements flex items again
        and restores z-index, order and align-self together. This is the same
        recipe as Change the order of the page, above. */
  .social-linking-page-column {
    display: flex !important;
    flex-direction: column !important;
  }
  .social-linking-header {
    display: contents !important;
  }
  .social-linking-header > div,
  .social-linking-page-column > div:has(> .close-button) {
    display: contents !important;
  }
  
• .linked-tag. L’ancienne page l’utilisait sur les badges de statut d’une carte connectée. Elle ne fait pas partie du contrat ci-dessus, délibérément : une carte connectée peut désormais aussi afficher « Relink required » ou « Identity check », donc une règle qui masque .linked-tag masquerait un avertissement sur lequel votre utilisateur doit agir. Si votre feuille de style masque .linked-tag et dessine son propre badge de remplacement, ce remplacement n’apparaîtra pas. Stylisez plutôt .connected-card elle-même et laissez les badges de statut visibles.

​

Cibler un seul réseau

.social-account-card[data-platform="tiktok"] {
  /* ... */
}

​

Modifier la disposition des cartes

• .social-accounts-grid est la grille elle-même. Il s’agit d’une ligne flex qui passe à la ligne, et l’espace entre les cartes correspond à son gap. Utilisez-la pour modifier cet espacement, ou pour remplacer entièrement la disposition.
• .social-account-card-wrapper est la cellule qui contient une carte. Sa width détermine le nombre de cartes par ligne, et la page définit cette largeur en fonction de la taille de l’écran.

.social-accounts-grid {
  gap: 24px !important;
}

.social-account-card-wrapper {
  width: 100% !important;
}

.social-accounts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.social-accounts-grid .social-account-card-wrapper {
  width: auto !important;
}

​

Exemple : masquer l’en-tête de la page

h1.heading-social-accounts {
  display: none !important;
}

​

Exemple : restyliser les cartes non connectées en boutons

/* Unconnected cards become outlined buttons. */
.social-account-card.unlinked-card {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}

/* An !important rule also wins over the page's own hover styles,
   so restate the hover state you want. */
.social-account-card.unlinked-card:hover {
  background-color: #eef2ff !important;
  border-color: #4338ca !important;
}

/* The muted call to action becomes the button label. */
.social-account-card.unlinked-card .click-to-link {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

.social-account-card.unlinked-card {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.social-account-card.unlinked-card p {
  color: #ffffff !important;
}

​

Modifier le titre de page, le bouton Close et la favicon

​

Texte de pied de page

​

Fonctionnalités Enterprise

​

Max Pack

​

Resynchroniser automatiquement les Pages Facebook et Instagram

• L’option « Resync » est disponible lors de la connexion de pages Facebook ou Instagram.
• En activant cette fonctionnalité, toutes les pages précédemment connectées seront automatiquement reliées au profil utilisateur.
• Remarque : seules les pages précédemment liées seront reconnectées ; les nouvelles pages ne seront pas ajoutées automatiquement.
• Cette fonctionnalité prend en charge les comptes Facebook avec jusqu’à 400 pages.
• Pour les comptes dépassant 400 pages, il est recommandé de répartir les pages sur plusieurs comptes Facebook.
• Bonne pratique : utilisez l’option « Resync » uniquement lorsque cela est nécessaire pour reconnecter toutes les pages. Pour les opérations de routine, ce n’est généralement pas requis.

​

Liste blanche IP

​

Revues techniques et de sécurité

​

Gestion de compte dédiée avec support prioritaire

​

Points de terminaison API personnalisés