Mehrere User Profiles verwalten

​

Verwendung des Dashboards

​

Ein neues Profil erstellen

​

Zum neuen Profil wechseln

​

Den Profile Key abrufen

​

Ein Teammitglied einladen

​

Status des Teammitglieds

​

Teammitglieder kontaktieren den Support

​

Ein gesperrtes User Profile reaktivieren

​

Sperrgrund

1. Durchsuchen Sie Ihren Posteingang nach der RefId des gesperrten User Profiles
2. Der Betreff der E-Mail weist klar auf eine Sperrung hin

​

Ein gesperrtes User Profile reaktivieren

1. Sich im Dashboard anmelden und zur User-Profiles-Seite gehen.
2. Das gesperrte User Profile finden, indem Sie auf den Tab „Suspended” klicken oder nach der RefId des User Profiles suchen, die in der E-Mail enthalten ist.
3. Die Sperrung des User Profiles aufheben, indem Sie auf die Schaltfläche „Unsuspended” klicken.
4. Die Compliance-Zertifizierung prüfen und akzeptieren.

​

Aktive User Profiles verwalten

​

Connect-Accounts-Seite mit White-Label versehen

• Ihr Firmenlogo hinzufügen oder entfernen und dessen Höhe festlegen.
• Auswählen, welche sozialen Netzwerke Ihre Nutzer verbinden können.
• Die Sprache der Seite festlegen.
• Eigene Hilfelinks anzeigen oder die von Ayrshare ausblenden.
• Den obersten und Unterheader pro User Profile festlegen (z. B. Name oder Unternehmen des Kunden).
• Den Redirect der Close-Schaltfläche steuern zurück zu Ihrer App.
• Instagram- und Telegram-Modals anpassen mit Ihrem eigenen HTML.

• Eine benutzerdefinierte CSS-Datei anwenden, um Farben, Schriften und angezeigte Funktionen zu steuern – mit dokumentierten Klassen-Hooks, um die Connect-Buttons selbst umzugestalten.
• Die Linking-Dialoge einfärben – Seitenauswahl, Zugangsdatenformulare und Bestätigungen – passend zu Ihrer Seite.
• Eigenen Seitentitel, Close-Button-Text und Favicon festlegen.
• Benutzerdefinierten Footer-Text oder HTML hinzufügen.

​

Einstellungen

​

Video-Demo zu den Anpassungsoptionen der Linking-Seite

​

Zugriff auf User Profile einschränken

​

Zugriff auf das Primary Profile einschränken

​

Zugriff auf Teammitglieder einschränken

​

Logo auf der Social-Linking-Seite aktualisieren

​

Zugriff auf soziale Netzwerke festlegen

​

Sprache für Social-Linking festlegen

• Englisch
• Chinesisch (vereinfacht)
• Französisch
• Deutsch
• Spanisch

• API-Fehlermeldungen übersetzen
• Einen Beitrag übersetzen

​

Seitenstandort anzeigen

​

Hilfelinks sichtbar

​

Alternative E-Mail-Adressen für Warnungen

​

Instagram-Login

​

Direktes Instagram-Login vs. Facebook-Page-Authentifizierung

​

Funktionseinschränkungen beim direkten Instagram-Login

• Marken-/Nutzerdaten – Instagram-Kontoinformationen können nicht über die Brand-Endpoints abgerufen werden.
• Hashtag-Suche – Es kann nicht nach Hashtags auf Instagram gesucht werden.
• Collaborations – Es können keine Mitwirkenden zu Instagram-Beiträgen eingeladen werden.
• Standort-Tagging – Standort-Tags können Instagram-Beiträgen nicht hinzugefügt werden.
• idId – Legacy-Instagram-User-ID – Feld wird für Instagram-Social-Analytics nicht zurückgegeben.

​

Welche Methode sollten Sie wählen?

• Direktes Instagram-Login aktivieren, wenn Sie nur grundlegende Post-Funktionalität benötigen und die oben aufgeführten erweiterten Funktionen nicht erforderlich sind.
• Direktes Instagram-Login deaktivieren (Facebook-Page-Authentifizierung verwenden), wenn Sie Zugriff auf alle Instagram-Funktionen benötigen, einschließlich Hashtag-Suche, Collaborations, Standort-Tagging oder Markendaten-Abruf.

​

Benutzerdefinierte Modals

<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>

​

Verwendung der API

​

Profile erstellen und verwalten

​

Den Profile Key abrufen

​

Messaging aktivieren

​

Max-Pack-Anpassungen

​

CSS anpassen

​

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

​

Ein älteres Stylesheet aktualisieren

• Die von der Seite selbst generierten Klassennamen. Klassennamen, die Sie eventuell aus den Entwicklertools des Browsers kopiert haben (z. B. alles, was mit chakra- beginnt), gehören zum Framework, mit dem die Seite gebaut ist, und nicht zu einem öffentlichen Vertrag. Diese Klassennamen existieren nicht mehr, und es gibt keinen gleichwertigen Ersatz. Schreiben Sie die Regel gegen die Selektoren in den obigen Tabellen um.
• Bloße Element- oder Attribut-Selektoren wie div > div oder button[type="button"]. Die Struktur der Seite ist kein Vertrag und hat sich geändert – eine Regel, die Ebenen von .main-content abwärts zählt, landet nun auf einem anderen Element als zuvor. Dies ist der häufigste Grund, warum eine Layout-Regel scheinbar nichts bewirkt oder etwas Unerwartetes tut.
• Positionsregeln, die Elemente gezählt haben, um das Kartenraster zu erreichen. Bevor das Raster und die Zellen Namen hatten, war die einzige Möglichkeit, sie zu erreichen, Ebenen von .main-content aus abzuzählen – mit Regeln in der Form .main-content > div, .main-content > div > div, .main-content > div > div > div oder .main-content > div:not(.additional-info). Diese Regeln treffen immer noch auf etwas zu, weshalb sie leicht übersehen werden: .main-content gibt es weiterhin, aber eine Karte sitzt jetzt fünf Ebenen darunter, sodass jede Regel eine oder zwei Ebenen neben dem Ziel landet. Eine Regel, die auf das Raster zielt, kann auf dem Wrapper landen, der den Seitenheader enthält, und eine Regel, die auf eine Karte zielt, kann auf einmal jede Karte skalieren. Ersetzen Sie sie durch die beiden nun dafür vorhandenen Namen: .social-accounts-grid für das Raster und .social-account-card-wrapper für die Zelle, die eine Karte enthält. Siehe Kartenlayout ändern.
• Regeln, die nur auf einem Flex-Item wirken: z-index, order, align-self, flex. Diese sind am schwersten zu erkennen, denn der Selektor trifft weiterhin zu und die Deklaration ist weiterhin gültig – sie hat schlicht keine Wirkung. Auf der älteren Seite waren Ihr Logo, die Überschrift, der Anweisungsblock und die Close-Schaltfläche direkte Kinder von .main-content, das Ihr Stylesheet zu einem Flex-Container gemacht hat, sodass jedes davon ein Flex-Item war. Ein Flex-Item respektiert z-index auch ohne position und respektiert order und align-self. Auf der neu aufgebauten Seite sitzen diese vier Elemente innerhalb von Wrappern, sind also keine Flex-Items mehr, und alle vier Eigenschaften wirken bei ihnen nicht länger. Das Symptom ist meist, dass etwas verschwindet, statt sich zu verschieben. Ein z-index auf Ihrem Logo hat es beispielsweise über eine mit .main-content::before gezeichnete, fixierte Kopfleiste gehoben – ohne ihn malt die Leiste direkt über das Logo, und das Logo wirkt vollständig verschwunden, obwohl es korrekt geladen wurde und die richtige Größe hat. Zwei Lösungen, beide sind in Ordnung:
  /* 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. Die ältere Seite hat dies auf die Statusbadges einer verbundenen Karte gesetzt. Sie ist nicht Teil des obigen Vertrags, und das ist Absicht: Eine verbundene Karte kann jetzt auch „Relink required” oder „Identity check” anzeigen – eine Regel, die .linked-tag ausblendet, würde eine Warnung ausblenden, auf die Ihr Nutzer reagieren muss. Wenn Ihr Stylesheet .linked-tag ausblendet und ein eigenes Ersatzbadge zeichnet, wird der Ersatz nicht erscheinen. Gestalten Sie stattdessen .connected-card selbst und lassen Sie die Statusbadges sichtbar.

​

Ein einzelnes Netzwerk gezielt ansprechen

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

​

Kartenlayout ändern

• .social-accounts-grid ist das Raster selbst. Es ist eine Flex-Zeile mit Umbruch, und der Abstand zwischen den Karten ist ihr gap. Verwenden Sie es, um diesen Abstand zu ändern oder das Layout vollständig zu ersetzen.
• .social-account-card-wrapper ist die Zelle, die eine Karte enthält. Ihre width bestimmt, wie viele Karten pro Zeile passen, und die Seite legt diese Breite je nach Bildschirmgröße fest.

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

​

Beispiel: Seitenüberschrift ausblenden

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

​

Beispiel: Nicht verbundene Karten als Schaltflächen umgestalten

/* 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;
}

​

Seitentitel, Close-Button und Favicon ändern

​

Footer-Text

​

Enterprise-Funktionen

​

Max Pack

​

Automatisches Resync von Facebook- und Instagram-Seiten

• Die Option „Resync” ist beim Verbinden von Facebook- oder Instagram-Seiten verfügbar.
• Wenn diese Funktion aktiviert ist, werden alle zuvor verbundenen Seiten automatisch erneut mit dem User Profile verknüpft.
• Hinweis: Nur zuvor verknüpfte Seiten werden erneut verbunden; neue Seiten werden nicht automatisch hinzugefügt.
• Diese Funktion unterstützt Facebook-Konten mit bis zu 400 Seiten.
• Bei Konten mit mehr als 400 Seiten empfiehlt es sich, die Seiten auf mehrere Facebook-Konten zu verteilen.
• Best Practice: Verwenden Sie die Option „Resync” nur dann, wenn es notwendig ist, alle Seiten wiederzuverbinden. Für den normalen Betrieb ist sie in der Regel nicht erforderlich.

​

IP-Whitelist

​

Technische und sicherheitsrelevante Prüfungen

​

Dediziertes Account-Management mit Priority-Support

​

Benutzerdefinierte API-Endpoints