複数の User Profile の管理

​

ダッシュボードを使用する

​

新しいプロファイルを作成する

​

新しいプロファイルに切り替える

​

Profile Key を取得する

​

チームメンバーを招待する

​

チームメンバーのステータス

​

チームメンバーがサポートに連絡する

​

停止された User Profile を再アクティブ化する

​

停止理由

1. 停止された User Profile の RefId を使用して受信トレイを検索します
2. メールの件名に停止が発生したことが明確に示されます

​

停止された User Profile を再アクティブ化する

1. Dashboard にログインし、User Profiles ページに移動します。
2. “Suspended” タブをクリックするか、メールに含まれる User Profile の RefId で検索して、停止された User Profile を見つけます。
3. “Unsuspended” ボタンをクリックして User Profile のサスペンドを解除します。
4. コンプライアンス認証を確認して承認します。

​

アクティブな User Profile の管理

​

Connect Accounts ページのホワイトラベル化

• 会社ロゴを追加または削除 し、高さを設定します。
• どのソーシャルネットワーク をユーザーが接続できるかを選択します。
• ページ言語を設定 します。
• 独自のヘルプリンクを表示するか Ayrshare のものを非表示にする。
• トップおよびサブヘッダーを設定 します(User Profile ごとに、例: クライアントの名前やビジネス)。
• Close ボタンリダイレクトの制御 をアプリに戻します。
• Instagram と Telegram モーダルをカスタマイズ して独自の HTML を使用します。

• カスタム CSS ファイルを適用 して、色、フォント、表示する機能を制御し、ドキュメント化されたクラスフック を使って connect ボタン自体を再スタイリングします。
• 連携ダイアログの配色 — ページピッカー、認証情報フォーム、確認ダイアログ — をページに合わせて調整します。
• 独自のページタイトル、Close ボタンテキスト、favicon を設定 します。
• カスタムフッターテキストまたは HTML を追加 します。

​

設定

​

連携ページのカスタマイズオプションのビデオデモ

​

User Profile アクセスの制限

​

Primary Profile アクセスの制限

​

チームメンバーアクセスの制限

​

ソーシャル連携ページのロゴ更新

​

ソーシャルネットワークアクセスの設定

​

ソーシャル連携の言語設定

• English
• Chinese (Simplified)
• French
• German
• Spanish

• API エラーメッセージレスポンスの翻訳
• 投稿の翻訳

​

ページ位置の表示

​

ヘルプリンクの可視性

​

アラート用の代替メール

​

Instagram Login

​

直接 Instagram Login と Facebook Page 認証

​

直接 Instagram Login の機能制限

• ブランド/ユーザーデータ - brand エンドポイント経由で Instagram アカウント情報を取得できません。
• ハッシュタグ検索 - Instagram でハッシュタグを検索できません。
• コラボレーション - Instagram 投稿にコラボレーターを招待できません。
• 位置タグ付け - Instagram 投稿に位置タグを追加できません。
• idId - レガシー Instagram User ID - Instagram ソーシャルアナリティクスでフィールドが返されません。

​

どちらの方法を選ぶべきか?

• 基本的な投稿機能のみが必要で、上記の高度な機能が不要な場合は、直接 Instagram Login を有効 にします。
• ハッシュタグ検索、コラボレーション、位置タグ付け、ブランドデータの取得を含むすべての Instagram 機能にアクセスする必要がある場合は、直接 Instagram Login を無効(Facebook Page 認証を使用)にします。

​

カスタムモーダル

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

​

API を使用する

​

プロファイルの作成と管理

​

Profile Key の取得

​

メッセージングを有効にする

​

Max Pack カスタマイズ

​

CSS カスタマイズ

​

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

​

古いスタイルシートの更新

• ページ自身の生成されたクラス名。 ブラウザの開発者ツールからコピーしたクラス名（chakra- で始まるものなど）は、ページの構築に使われているフレームワークに属するものであり、公開契約ではありません。それらのクラス名は既に存在せず、代替となるものもありません。上記の表にあるセレクタを使ってルールを書き直してください。
• 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 はまだ存在しますが、カードは現在その5 レベル下にあるため、各ルールは 1〜2 レベルずれた場所に着地します。グリッドを対象としたルールがページヘッダーを保持するラッパーに当たったり、1 枚のカードを対象としたルールがすべてのカードを一度にリサイズしてしまうこともあります。これらは、現在この目的のために存在する 2 つの名前で置き換えてください: グリッドには .social-accounts-grid、1 枚のカードを保持するセルには .social-account-card-wrapper です。カードレイアウトの変更 を参照してください。
• flex アイテム上でのみ動作するルール: z-index、order、align-self、flex。 これらは最も見つけにくいものです。セレクタは依然としてマッチし、宣言も有効なままで、単に効果を持たなくなるためです。古いページでは、ロゴ、見出し、説明ブロック、Close ボタンが .main-content の直接の子であり、スタイルシートによって .main-content が flex コンテナ化されていたため、これらはそれぞれ flex アイテムでした。flex アイテムは position がなくても z-index を尊重し、order と align-self も尊重します。再構築後のページでは、これら 4 つはラッパーの内側に配置されるため、もはや flex アイテムではなく、4 つのプロパティすべてが適用されなくなります。 症状は通常、要素が移動するのではなく消えるように見えることです。例えば、ロゴに設定した z-index は、以前は .main-content::before で描画された固定ヘッダーバーの上にロゴを持ち上げていました — それがなくなると、バーがロゴの上に直接描画され、ロゴは正しく読み込まれてサイズも正しいにもかかわらず、完全に消えているように見えます。 2 つの修正方法があります。どちらでも構いません:
  /* 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 自体をスタイリングし、ステータスバッジは表示したままにしてください。

​

特定のネットワークをターゲットにする

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

​

カードレイアウトの変更

• .social-accounts-grid はグリッドそのものです。折り返しを行う flex 行であり、カード間のスペースはその gap です。この間隔を変更したり、レイアウトを完全に置き換えたい場合に使用します。
• .social-account-card-wrapper は 1 枚のカードを保持するセルです。その width が 1 行あたりのカード数を決定し、ページは画面サイズごとにその幅を設定します。

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

​

例: ページ見出しを非表示にする

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

​

例: 未接続カードをボタンとして再スタイリングする

/* 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 Page の自動再同期

• Facebook または Instagram ページを接続する際、“Resync” オプションが利用可能です。
• この機能を有効にすると、以前接続されていたすべてのページが自動的に user profile に再リンクされます。
• 注意: 以前リンクされていたページのみが再接続されます。新しいページは自動的に追加されません。
• この機能は最大 400 ページの Facebook アカウントをサポートします。
• 400 ページを超えるアカウントの場合、複数の Facebook アカウントにページを分散することをお勧めします。
• ベストプラクティス: すべてのページを再接続する必要がある場合にのみ “Resync” オプションを使用してください。日常の操作では、通常は必要ありません。

​

IP ホワイトリスト

​

テクニカルおよびセキュリティレビュー

​

優先サポート付き専任アカウント管理

​

カスタム API エンドポイント