Gestión de múltiples User Profiles

​

Uso del dashboard

​

Crear un nuevo perfil

​

Cambiar al nuevo perfil

​

Obtener la Profile Key

​

Invitar a un miembro del equipo

​

Estado del miembro del equipo

​

Miembros del equipo contactando con soporte

​

Reactivar un User Profile suspendido

​

Motivo de la suspensión

1. Busca en tu bandeja de entrada usando el RefId del User Profile suspendido
2. El asunto del email indicará claramente que se ha producido una suspensión

​

Reactivar un User Profile suspendido

1. Inicia sesión en el dashboard y ve a la página User Profiles.
2. Encuentra los User Profiles suspendidos haciendo clic en la pestaña “Suspended” o buscando por el RefId del User Profile, que se incluye en el email.
3. Reactiva el User Profile haciendo clic en el botón “Unsuspended”.
4. Revisa y acepta el certificado de cumplimiento.

​

Gestión de User Profiles activos

​

Marca blanca en la página de conexión de cuentas

• Añade o elimina el logotipo de tu empresa y define su altura.
• Elige qué redes sociales pueden conectar tus usuarios.
• Define el idioma de la página.
• Muestra tus propios enlaces de ayuda u oculta los de Ayrshare.
• Define las cabeceras superior y secundaria por User Profile (por ejemplo, el nombre del cliente o su negocio).
• Controla la redirección del botón Close hacia tu app.
• Personaliza los modales de Instagram y Telegram con tu propio HTML.

• Aplica un archivo CSS personalizado para controlar colores, fuentes y qué funciones se muestran, usando class hooks documentados para reestilizar los propios botones de conexión.
• Colorea los diálogos de vinculación — selectores de página, formularios de credenciales y confirmaciones — para que combinen con tu página.
• Define tu propio título de página, texto del botón Close y favicon.
• Añade texto o HTML personalizado en el pie.

​

Ajustes

​

Demo en video de las opciones de personalización de la página de vinculación

​

Restringir el acceso al User Profile

​

Restringir el acceso al Primary Profile

​

Restringir el acceso de los miembros del equipo

​

Actualizar el logotipo en la página de vinculación social

​

Configurar el acceso a las redes sociales

​

Definir el idioma de la vinculación social

• Inglés
• Chino (simplificado)
• Francés
• Alemán
• Español

• Traducir las respuestas de mensajes de error de la API
• Traducir una publicación

​

Mostrar la ubicación de la Page

​

Visibilidad de los enlaces de ayuda

​

Emails alternativos para alertas

​

Instagram Login

​

Instagram Login directo vs autenticación con Página de Facebook

​

Limitaciones de funciones con Instagram Login directo

• Brand/User Data - No se puede obtener información de la cuenta de Instagram a través de los endpoints de brand.
• Búsqueda de hashtags - No se pueden buscar hashtags en Instagram.
• Colaboraciones - No se puede invitar a colaboradores a publicaciones de Instagram.
• Etiquetado de ubicación - No se pueden añadir etiquetas de ubicación a las publicaciones de Instagram.
• idId- Legacy Instagram User ID - campo no devuelto para analíticas sociales de Instagram.

​

¿Qué método deberías elegir?

• Activa Instagram Login directo si solo necesitas la funcionalidad básica de publicación y no requieres las funciones avanzadas anteriores.
• Desactiva Instagram Login directo (usa la autenticación con Página de Facebook) si necesitas acceso a todas las funciones de Instagram, incluidas búsqueda de hashtags, colaboraciones, etiquetado de ubicación o obtención de datos de marca.

​

Modales personalizados

<div>
  <style>
    span.underline {
      color: blue;
      text-decoration: underline;
    }
    span.underline a {
      color: blue;
      text-decoration: none;
    }
  </style>

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

​

Uso de la API

​

Crear y gestionar perfiles

​

Obtener la Profile Key

​

Activar mensajería

​

Personalización con Max Pack

​

Personalizar CSS

​

CSS Class Hooks

.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>
          <!-- contenedor clicable sin nombre, siempre ocupa el ancho completo de la celda -->
          <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;
}
/* Tu logotipo, el bloque de instrucciones y el botón Close están cada uno dentro
   de otro contenedor que no tiene nombre propio. Aplana también esos, o `order`
   más abajo no tiene nada que comparar. */
.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;
}

​

Actualizar una hoja de estilos antigua

• Los nombres de clase generados por la propia página. Los nombres de clase que puedas haber copiado de las herramientas de desarrollador del navegador (por ejemplo, cualquiera que empiece por chakra-) pertenecen al framework con el que está construida la página, no a un contrato público. Esos nombres de clase ya no existen y no hay un equivalente por el que sustituirlos. Reescribe la regla contra los selectores de las tablas de arriba.
• Selectores de elemento o de atributo simples como div > div o button[type="button"]. La estructura de la página no es un contrato y ha cambiado, así que una regla que cuente niveles a partir de .main-content ahora acaba en un elemento diferente al de antes. Esta es la razón más común de que una regla de disposición parezca no hacer nada, o haga algo inesperado.
• Reglas posicionales que contaban elementos para llegar a la cuadrícula de tarjetas. Antes de que la cuadrícula y las celdas tuvieran nombres, la única forma de llegar a ellas era contando niveles desde .main-content, con reglas del tipo .main-content > div, .main-content > div > div, .main-content > div > div > div o .main-content > div:not(.additional-info). Esas reglas siguen coincidiendo con algo, por lo que es fácil que pasen desapercibidas: .main-content sigue ahí, pero una tarjeta está ahora cinco niveles por debajo, así que cada regla acaba uno o dos niveles fuera de su objetivo. Una regla dirigida a la cuadrícula puede terminar sobre el contenedor de la cabecera de la página, y una regla dirigida a una tarjeta puede acabar redimensionando todas las tarjetas a la vez. Sustitúyelas por los dos nombres que ahora existen para esto: .social-accounts-grid para la cuadrícula y .social-account-card-wrapper para la celda que contiene una tarjeta. Consulta Cambiar la disposición de las tarjetas.
• Reglas que solo funcionan sobre un flex item: z-index, order, align-self, flex. Estas son las más difíciles de detectar, porque el selector sigue coincidiendo y la declaración sigue siendo válida — simplemente no tiene efecto. En la página antigua tu logotipo, el encabezado, el bloque de instrucciones y el botón ‘Close’ eran hijos directos de .main-content, al que tu hoja de estilos convertía en un contenedor flex, así que cada uno de ellos era un flex item. Un flex item respeta z-index incluso sin position, y respeta order y align-self. En la página reconstruida esos cuatro están dentro de envoltorios, por lo que ya no son flex items y las cuatro propiedades dejan de aplicárseles. El síntoma suele ser que algo desaparece en lugar de moverse. Un z-index sobre tu logotipo, por ejemplo, es lo que antes lo elevaba por encima de una barra de cabecera fija dibujada con .main-content::before — sin él, la barra se pinta directamente sobre el logotipo y este parece haber desaparecido por completo, aunque se haya cargado correctamente y tenga el tamaño adecuado. Dos soluciones, cualquiera de las dos vale:
  /* 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. La página antigua ponía esto en las insignias de estado de una tarjeta conectada. No forma parte del contrato de arriba, deliberadamente: una tarjeta conectada puede ahora mostrar también “Relink required” o “Identity check”, así que una regla que oculte .linked-tag ocultaría una advertencia sobre la que tu usuario debe actuar. Si tu hoja de estilos oculta .linked-tag y dibuja su propia insignia de reemplazo, esa insignia no aparecerá. En su lugar, estiliza directamente .connected-card y deja visibles las insignias de estado.

​

Dirigirse a una sola red

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

​

Cambiar la disposición de las tarjetas

• .social-accounts-grid es la cuadrícula en sí. Es una fila flex que envuelve, y el espacio entre tarjetas es su gap. Úsala para cambiar ese espaciado, o para sustituir la disposición por completo.
• .social-account-card-wrapper es la celda que contiene una tarjeta. Su width es lo que decide cuántas tarjetas caben por fila, y la página fija esa anchura según el tamaño de pantalla.

.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;
}

​

Ejemplo: Ocultar el encabezado de la página

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

​

Ejemplo: Reestilizar las tarjetas no conectadas como botones

/* Las tarjetas no conectadas se convierten en botones con contorno. */
.social-account-card.unlinked-card {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}

/* Una regla !important también gana frente a los estilos hover propios de la página,
   así que reformula el estado hover que quieras. */
.social-account-card.unlinked-card:hover {
  background-color: #eef2ff !important;
  border-color: #4338ca !important;
}

/* La llamada a la acción atenuada se convierte en la etiqueta del botón. */
.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;
}

​

Cambiar título de la página, botón Close y favicon

​

Texto del pie de página

​

Funciones Enterprise

​

Max Pack

​

Resincronizar automáticamente Páginas de Facebook e Instagram

• La opción “Resync” está disponible al conectar Páginas de Facebook o Instagram.
• Al activar esta función, todas las Páginas conectadas anteriormente se vincularán automáticamente al User Profile.
• Nota: solo se reconectarán las Páginas previamente vinculadas; no se añadirán nuevas Páginas automáticamente.
• Esta función admite cuentas de Facebook con hasta 400 Páginas.
• Para cuentas con más de 400 Páginas, se recomienda distribuir las Páginas entre varias cuentas de Facebook.
• Buena práctica: utiliza la opción “Resync” solo cuando sea necesario para reconectar todas las Páginas. Para las operaciones rutinarias, normalmente no es necesario.

​

Lista blanca de IPs

​

Revisiones técnicas y de seguridad

​

Gestión de cuentas dedicada con soporte prioritario

​

Endpoints personalizados de la API