管理多個使用者設定檔

​

使用儀表板

​

建立新設定檔

​

切換到新設定檔

​

取得 Profile Key

​

邀請團隊成員

​

團隊成員狀態

​

團隊成員聯絡支援

​

重新啟用被停權的使用者設定檔

​

停權原因

1. 使用被停權使用者設定檔的 RefId 搜尋你的信箱
2. 電子郵件主旨會清楚指出發生了停權

​

重新啟用被停權的使用者設定檔

1. 登入儀表板並前往 User Profiles 頁面。
2. 點選「Suspended」分頁，或以電子郵件中所附的使用者設定檔 RefId 搜尋，以找到被停權的使用者設定檔。
3. 點選「Unsuspended」按鈕解除停權。
4. 檢閱並接受合規聲明。

​

管理已啟用的使用者設定檔

​

白牌連結帳號頁面

• 新增或移除公司 logo 並設定其高度。
• 選擇使用者可連結哪些社群網路。
• 設定頁面語言。
• 顯示你自己的說明連結或隱藏 Ayrshare 的說明連結。
• 針對各使用者設定檔設定頂部與副標題（例如客戶的名稱或商家）。
• 控制 Close 按鈕重新導向 回你的應用程式。
• 使用你自己的 HTML 自訂 Instagram 與 Telegram 對話框。

• 套用自訂 CSS 檔案 以控制顏色、字型與顯示的功能，並使用有文件的 class hooks 來重新設定連結按鈕本身的樣式。
• 為連結對話框上色——頁面選擇器、憑證表單與確認對話框——以配合你的頁面。
• 設定你自己的頁面標題、Close 按鈕文字與 favicon。
• 新增自訂頁尾文字或 HTML。

​

設定

​

連結頁面自訂選項的影片示範

​

限制使用者設定檔存取

​

限制主要設定檔的存取

​

限制團隊成員存取

​

更新社群連結頁面的 Logo

​

設定社群網路存取權

​

設定社群連結的語言

• 英文
• 阿拉伯文
• 簡體中文
• 法文
• 德文
• 義大利文
• 日文
• 葡萄牙文
• 西班牙文

• 翻譯 API 錯誤訊息回應
• 翻譯貼文

​

顯示頁面位置

​

說明連結可見性

​

用於警示的替代電子郵件

​

Instagram 登入

​

直接 Instagram 登入 vs Facebook 粉絲專頁驗證

​

直接 Instagram 登入的功能限制

• 品牌／使用者資料 - 無法透過 brand 端點擷取 Instagram 帳戶資訊。
• Hashtag 搜尋 - 無法在 Instagram 上搜尋 hashtag。
• 共同創作 - 無法邀請共同創作者參與 Instagram 貼文。
• 位置標記 - 無法為 Instagram 貼文加上位置標記。
• idId - 舊版 Instagram 使用者 ID - Instagram 社群分析不會回傳此欄位。

​

你應該選擇哪種方式？

• 啟用直接 Instagram 登入 如果你只需要基本的發文功能，且不需要上述進階功能。
• 停用直接 Instagram 登入（使用 Facebook 粉絲專頁驗證） 如果你需要存取所有 Instagram 功能，包括 hashtag 搜尋、共同創作、位置標記或品牌資料擷取。

​

自訂對話框

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

​

使用 API

​

建立與管理設定檔

​

取得 Profile Key

​

啟用訊息功能

​

Max Pack 自訂

​

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

​

Updating an Older Stylesheet

• 頁面自行產生的 class 名稱。 你可能從瀏覽器開發者工具複製出來的 class 名稱（例如任何以 chakra- 開頭的）屬於頁面所使用的框架，並非公開契約。這些 class 名稱已不再存在，也沒有可替換的對應項目。請以上表中的選擇器重新撰寫規則。
• 純元素或屬性選擇器，例如 div > div 或 button[type="button"]。頁面結構並非契約而且已經變更，因此從 .main-content 往下計數層級的規則，現在會落在與過去不同的元素上。這是版面規則看似無效或產生非預期行為最常見的原因。
• 透過計算元素位置以觸及卡片網格的規則。 在網格與儲存格尚未擁有名稱之前，唯一能觸及它們的方式，是從 .main-content 往下計數層級，使用形如 .main-content > div、.main-content > div > div、.main-content > div > div > div 或 .main-content > div:not(.additional-info) 的規則。這些規則仍會匹配到某些元素，因此很容易被忽略：.main-content 依然存在，但一張卡片現在位於它下方五層，因此每條規則都會落在目標的一兩層之外。原本瞄準網格的規則可能落到承載頁面標頭的外層容器上，而原本針對單一卡片的規則則可能一次調整所有卡片的大小。請改用如今已存在的兩個名稱：.social-accounts-grid 對應網格，.social-account-card-wrapper 對應承載單一卡片的儲存格。請參閱變更卡片版面。
• 只作用於 flex 項目的規則：z-index、order、align-self、flex。 這幾條最難察覺，因為選擇器仍然匹配、宣告本身也依然合法——它單純地不生效而已。在較舊版本的頁面上，你的 logo、標題、說明區塊與 Close 按鈕都是 .main-content 的直屬子元素，而你的樣式表將 .main-content 設為 flex 容器，因此它們每一個都是 flex 項目。flex 項目即使沒有 position，也會遵循 z-index，並會遵循 order 與 align-self。在重建後的頁面上，這四者位於外框之內，因此它們不再是 flex 項目，這四個屬性也就不再套用到它們身上。 此症狀通常是某個元素「消失」而非「移動」。舉例來說，你 logo 上的 z-index，過去正是將它疊在以 .main-content::before 繪製的固定頁首帶之上——少了它，頁首帶會直接蓋在 logo 上，導致 logo 看起來像是完全不見了，即使它確實已載入且尺寸也是正確的。 兩種修法皆可：
  /* 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。 較舊版本的頁面將它放在已連結卡片的狀態徽章上。它並不屬於上述契約，這是刻意的設計：一張已連結的卡片現在可能同時顯示「Relink required」或「Identity check」，因此隱藏 .linked-tag 的規則會將使用者需要處理的警示一併隱藏。若你的樣式表隱藏 .linked-tag 並自行繪製替代的徽章，該替代徽章將不會顯示。請改為對 .connected-card 本身設定樣式，並讓狀態徽章維持可見。

​

Target a Single Network

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

​

Change the Card Layout

• .social-accounts-grid 是網格本身。它是一個會換行的 flex row，卡片之間的間距即為其 gap。用它來變更該間距，或整體替換版面。
• .social-account-card-wrapper 是承載一張卡片的儲存格。其 width 決定每一列可容納多少張卡片，頁面會依螢幕尺寸為此設定寬度。

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

​

Example: Hide the Page Heading

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

​

Example: Restyle Unconnected Cards as Buttons

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

​

變更頁面標題、Close 按鈕與 Favicon

​

頁尾文字

​

Enterprise 功能

​

Max Pack

​

自動重新同步 Facebook 與 Instagram 粉絲專頁

• 連結 Facebook 或 Instagram 粉絲專頁時可使用「Resync」選項。
• 啟用此功能後，所有先前連結的粉絲專頁都會自動重新連結至該使用者設定檔。
• 注意：只有先前已連結的粉絲專頁會被重新連結；新的粉絲專頁不會自動新增。
• 此功能支援最多 400 個粉絲專頁的 Facebook 帳戶。
• 對於超過 400 個粉絲專頁的帳戶，建議將粉絲專頁分散到多個 Facebook 帳戶。
• 最佳做法： 只在必要時使用「Resync」選項來重新連結所有粉絲專頁。日常操作中通常不需要此功能。

​

IP 白名單

​

技術與安全審查

​

專屬客戶管理與優先支援

​

自訂 API 端點