social-commerce

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Social Commerce

社交电商

Overview

概述

Social commerce integrates your product catalog with Instagram, TikTok, and Facebook so customers can discover and purchase products without leaving those platforms. Shopify, WooCommerce, and BigCommerce all have official integrations that sync your catalog automatically — no custom code required. The strategic work is setting up the catalog correctly, enabling product tagging in posts, and monitoring catalog health.
社交电商将你的商品目录与Instagram、TikTok和Facebook集成,让客户无需离开这些平台即可发现并购买商品。Shopify、WooCommerce和BigCommerce均提供官方集成,可自动同步你的商品目录——无需自定义代码。关键工作在于正确设置目录、启用帖子中的商品标记以及监控目录健康状态。

When to Use This Skill

何时使用此技能

  • When adding Instagram Shopping or TikTok Shop to an existing store
  • When syncing a product catalog to Meta Commerce Manager for the first time
  • When product tags in Instagram posts are returning "product not found" errors
  • When price or availability in social product listings is lagging behind your store
  • When building a custom headless storefront without native platform integrations
  • 为现有店铺添加Instagram Shopping或TikTok Shop时
  • 首次将商品目录同步到Meta Commerce Manager时
  • Instagram帖子中的商品标记返回“商品未找到”错误时
  • 社交平台商品列表的价格或库存状态滞后于店铺时
  • 构建无原生平台集成的自定义无头店铺前端时

Core Instructions

核心操作指南

Step 1: Choose your social commerce channels

步骤1:选择你的社交电商渠道

PlatformSetup ViaIn-App CheckoutBest For
Instagram ShoppingMeta Commerce ManagerYes (US only)Fashion, beauty, lifestyle
Facebook ShopMeta Commerce ManagerYes (US only)All categories
TikTok ShopTikTok Seller CenterYesViral/impulse products
Pinterest ShoppingPinterest Ads ManagerNo (links to your store)Home, fashion, food
Shopify users: One integration (Facebook & Instagram channel) enables both Instagram and Facebook Shopping simultaneously. TikTok requires a separate integration.
平台设置途径应用内结账适用场景
Instagram ShoppingMeta Commerce Manager是(仅限美国)时尚、美妆、生活方式类
Facebook ShopMeta Commerce Manager是(仅限美国)全品类
TikTok ShopTikTok Seller Center爆款/冲动消费类商品
Pinterest ShoppingPinterest Ads Manager否(跳转至你的店铺)家居、时尚、食品类
Shopify用户: 一个集成(Facebook & Instagram渠道)可同时启用Instagram和Facebook Shopping。TikTok需要单独集成。

Step 2: Connect your platform to Instagram and Facebook Shopping

步骤2:将你的平台连接到Instagram和Facebook Shopping



Shopify

Shopify

  1. Go to Shopify Admin → Sales Channels → + → Facebook & Instagram
  2. Install the channel and connect your Meta Business Manager account
  3. Under Commerce → Catalog, Shopify automatically syncs your product catalog to Meta Commerce Manager — every product, variant, price, and inventory update syncs automatically
  4. In Meta Commerce Manager → Catalog → Items, check that products are appearing and approved
  5. In Instagram → Settings → Business → Shopping: connect your Meta catalog to your Instagram profile — this enables product tagging in posts
  6. Wait for Instagram Shop review approval (typically 1–5 business days)
  7. Once approved, go to Instagram → Create Post → Tag Products to add product tags to any photo or reel
For TikTok Shop:
  1. Go to Shopify Admin → Sales Channels → + → TikTok
  2. Install the TikTok for Shopify channel
  3. Connect your TikTok Seller Central account
  4. Shopify syncs your product catalog to TikTok Shop automatically

  1. 进入Shopify后台 → 销售渠道 → + → Facebook & Instagram
  2. 安装该渠道并连接你的Meta Business Manager账户
  3. 商务 → 目录下,Shopify会自动将你的商品目录同步到Meta Commerce Manager——所有商品、变体、价格和库存更新都会自动同步
  4. Meta Commerce Manager → 目录 → 商品中,检查商品是否已显示并通过审核
  5. Instagram → 设置 → 商务 → 购物中:将你的Meta目录连接到Instagram主页——这将启用帖子中的商品标记功能
  6. 等待Instagram Shop审核通过(通常需要1–5个工作日)
  7. 审核通过后,进入Instagram → 创建帖子 → 标记商品,为任意照片或短视频添加商品标记
TikTok Shop设置:
  1. 进入Shopify后台 → 销售渠道 → + → TikTok
  2. 安装TikTok for Shopify渠道
  3. 连接你的TikTok Seller Central账户
  4. Shopify会自动将你的商品目录同步到TikTok Shop

WooCommerce

WooCommerce

  1. Install Facebook for WooCommerce (free, official Meta plugin) from WordPress plugin directory
  2. Go to WooCommerce → Facebook → Get Started and connect your Meta Business Manager
  3. The plugin syncs your WooCommerce product catalog to Meta Commerce Manager automatically
  4. Enable shopping in your Instagram settings → link the Meta catalog created by the plugin
  5. For TikTok: install TikTok for WooCommerce plugin and connect your TikTok Seller Central account

  1. 从WordPress插件目录安装Facebook for WooCommerce(免费官方Meta插件)
  2. 进入WooCommerce → Facebook → 开始使用并连接你的Meta Business Manager
  3. 该插件会自动将WooCommerce商品目录同步到Meta Commerce Manager
  4. 在Instagram设置中启用购物功能 → 关联插件创建的Meta目录
  5. TikTok设置:安装TikTok for WooCommerce插件并连接你的TikTok Seller Central账户

BigCommerce

BigCommerce

  1. Go to BigCommerce Admin → Channel Manager → Add a Channel
  2. Select Facebook & Instagram and connect your Meta Business Manager account
  3. BigCommerce automatically creates a product feed and syncs it to Meta Commerce Manager
  4. For TikTok: go to Channel Manager → TikTok and connect your TikTok Seller Central account
  5. Check catalog sync status in Channel Manager → Facebook & Instagram → Products

  1. 进入BigCommerce后台 → 渠道管理器 → 添加渠道
  2. 选择Facebook & Instagram并连接你的Meta Business Manager账户
  3. BigCommerce会自动创建商品源并同步到Meta Commerce Manager
  4. TikTok设置:进入渠道管理器 → TikTok并连接你的TikTok Seller Central账户
  5. 渠道管理器 → Facebook & Instagram → 商品中检查目录同步状态

Custom / Headless

自定义/无头店铺

Generate a Meta-compatible XML feed and register it in Meta Commerce Manager:
typescript
import { XMLBuilder } from 'fast-xml-parser';

export async function generateMetaCatalogFeed(req: Request, res: Response) {
  const products = await db.products.findAll({
    where: { status: 'active', availableForSale: true },
    include: ['variants', 'images'],
  });

  const items = products.flatMap((p) =>
    p.variants.map((v) => ({
      id: v.sku,                    // Use SKU as the catalog item ID — must be stable
      title: p.name,
      description: p.description.slice(0, 9999),
      availability: v.inventory > 0 ? 'in stock' : 'out of stock',
      condition: 'new',
      price: `${(v.priceInCents / 100).toFixed(2)} USD`,
      link: `${process.env.STORE_URL}/products/${p.slug}?variant=${v.id}`,
      image_link: p.images[0]?.url,
      brand: p.brand ?? process.env.STORE_NAME,
      google_product_category: p.googleProductCategory,
      item_group_id: p.id,          // Required: groups variants together in Meta
      color: v.color,
      size: v.size,
    }))
  );

  const builder = new XMLBuilder({ arrayNodeName: 'item', ignoreAttributes: false });
  const xml = builder.build({ rss: { channel: { item: items } } });

  res.setHeader('Content-Type', 'application/xml');
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.send(xml);
}
Register the feed URL in Meta Commerce Manager → Catalog → Data Sources → Add Data Feed with hourly refresh schedule.
For real-time price and inventory updates (rather than waiting for the hourly crawl), use Meta's Catalog Batch API:
typescript
// Push individual product updates immediately when price or inventory changes
async function pushProductUpdateToMeta(variantSku: string, inventory: number, priceInCents: number) {
  await fetch(`https://graph.facebook.com/v18.0/${process.env.META_CATALOG_ID}/items_batch`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      access_token: process.env.META_ACCESS_TOKEN,
      item_type: 'PRODUCT_ITEM',
      requests: [{
        method: 'UPDATE',
        retailer_id: variantSku,
        data: {
          availability: inventory > 0 ? 'in stock' : 'out of stock',
          price: `${(priceInCents / 100).toFixed(2)} USD`,
        },
      }],
    }),
  });
}
生成符合Meta标准的XML源并在Meta Commerce Manager中注册:
typescript
import { XMLBuilder } from 'fast-xml-parser';

export async function generateMetaCatalogFeed(req: Request, res: Response) {
  const products = await db.products.findAll({
    where: { status: 'active', availableForSale: true },
    include: ['variants', 'images'],
  });

  const items = products.flatMap((p) =>
    p.variants.map((v) => ({
      id: v.sku,                    // 使用SKU作为目录商品ID——必须保持稳定
      title: p.name,
      description: p.description.slice(0, 9999),
      availability: v.inventory > 0 ? 'in stock' : 'out of stock',
      condition: 'new',
      price: `${(v.priceInCents / 100).toFixed(2)} USD`,
      link: `${process.env.STORE_URL}/products/${p.slug}?variant=${v.id}`,
      image_link: p.images[0]?.url,
      brand: p.brand ?? process.env.STORE_NAME,
      google_product_category: p.googleProductCategory,
      item_group_id: p.id,          // 必填:在Meta中将商品变体分组
      color: v.color,
      size: v.size,
    }))
  );

  const builder = new XMLBuilder({ arrayNodeName: 'item', ignoreAttributes: false });
  const xml = builder.build({ rss: { channel: { item: items } } });

  res.setHeader('Content-Type', 'application/xml');
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.send(xml);
}
Meta Commerce Manager → 目录 → 数据源 → 添加数据源中注册源URL,并设置每小时刷新一次。
如需实时更新价格和库存(而非等待每小时的爬取),请使用Meta的Catalog Batch API:
typescript
// 当价格或库存变化时立即推送单个商品更新
async function pushProductUpdateToMeta(variantSku: string, inventory: number, priceInCents: number) {
  await fetch(`https://graph.facebook.com/v18.0/${process.env.META_CATALOG_ID}/items_batch`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      access_token: process.env.META_ACCESS_TOKEN,
      item_type: 'PRODUCT_ITEM',
      requests: [{
        method: 'UPDATE',
        retailer_id: variantSku,
        data: {
          availability: inventory > 0 ? 'in stock' : 'out of stock',
          price: `${(priceInCents / 100).toFixed(2)} USD`,
        },
      }],
    }),
  });
}

Step 3: Enable product tagging in Instagram posts

步骤3:启用Instagram帖子中的商品标记

After catalog is approved in Instagram Shop:
  1. Create an Instagram post or reel as normal
  2. On the sharing screen, tap Tag Products
  3. Tap on the product visible in the image
  4. Search for the product name and select it from your catalog
  5. Up to 5 products can be tagged per image post, 1 per video
For Stories: tap the sticker icon → Product → search your catalog
For Reels: same as video posts — add the product link sticker
Instagram Shop目录审核通过后:
  1. 正常创建Instagram帖子或短视频
  2. 在发布界面,点击标记商品
  3. 点击图片中显示的商品
  4. 搜索商品名称并从你的目录中选择
  5. 每张图片帖子最多可标记5个商品,每个视频最多标记1个
快拍设置: 点击贴纸图标 → 商品 → 搜索你的目录
短视频设置: 与普通视频帖子相同——添加商品链接贴纸

Step 4: Set up TikTok Shop product tagging

步骤4:设置TikTok Shop商品标记

After TikTok Seller Central is approved and catalog is synced:
  1. Create a TikTok video in the TikTok app
  2. Tap Products during upload → select the product from your synced catalog
  3. TikTok adds a shopping bag icon to the video — viewers tap it to see the product and purchase in-app
  4. For Live Shopping: go to TikTok Live → tap the cart icon → add products to your live session
TikTok Seller Central审核通过且目录同步完成后:
  1. 在TikTok应用中创建视频
  2. 上传过程中点击商品 → 从同步的目录中选择商品
  3. TikTok会在视频上添加购物袋图标——观众点击即可查看商品并在应用内购买
  4. 直播购物设置:进入TikTok直播 → 点击购物车图标 → 将商品添加到直播会话中

Step 5: Monitor catalog health

步骤5:监控目录健康状态

Catalog errors prevent products from being tagged or shown in shops. Check weekly:
Meta Commerce Manager:
  1. Go to Commerce Manager → Catalog → Diagnostics
  2. Review errors by category:
    • Missing required field (typically brand or google_product_category)
    • Policy violation (image shows text overlay, product makes restricted claims)
    • Price mismatch (feed price differs from landing page price)
  3. For Shopify/WooCommerce with native integration: fix product data in your platform admin — changes sync automatically
TikTok Seller Center:
  1. Go to Products → All Products and filter by "Under Review" or "Rejected"
  2. Fix flagged issues (usually image quality or prohibited product categories)
目录错误会导致商品无法被标记或在店铺中展示。每周检查:
Meta Commerce Manager:
  1. 进入商务管理器 → 目录 → 诊断
  2. 按类别查看错误:
    • 缺少必填字段(通常是品牌或google_product_category)
    • 违反政策(图片有文字叠加、商品涉及受限声明)
    • 价格不匹配(源价格与落地页价格不一致)
  3. 对于使用原生集成的Shopify/WooCommerce:在平台后台修正商品数据——更改会自动同步
TikTok Seller Center:
  1. 进入商品 → 全部商品,筛选“审核中”或“已拒绝”的商品
  2. 修正标记的问题(通常是图片质量或违禁商品类别)

Step 6: Measure social commerce performance

步骤6:衡量社交电商绩效

MetricWhere to Find
Revenue from Instagram ShoppingMeta Commerce Manager → Analytics → Sales
Revenue from TikTok ShopTikTok Seller Center → Analytics
Product tag click-through rateMeta Business Suite → Content → Posts
Catalog item rejection rateCommerce Manager → Catalog → Diagnostics
指标查询位置
Instagram Shopping收入Meta Commerce Manager → 分析 → 销售额
TikTok Shop收入TikTok Seller Center → 分析
商品标记点击率Meta商务管理平台 → 内容 → 帖子
目录商品拒绝率商务管理器 → 目录 → 诊断

Best Practices

最佳实践

  • Use SKU as the catalog item ID — SKUs are stable across systems and match your warehouse; using database IDs causes mismatches when data migrates
  • Always include
    item_group_id
    for variant products
    — Meta and TikTok use this to group color/size options into a single product display instead of showing duplicates
  • Ensure product images have no text overlay — Meta's catalog policy rejects images with overlaid promotional text, watermarks, or collages
  • Enable real-time batch updates for price changes — if you run frequent promotions, the hourly feed crawl creates a price mismatch window; use the Batch API to push changes immediately
  • Complete TikTok Seller Central approval before linking your store — TikTok requires a separate seller review process; catalog sync alone does not unlock TikTok Shop
  • 使用SKU作为目录商品ID——SKU在各系统中稳定且与你的仓库匹配;使用数据库ID会在数据迁移时导致不匹配
  • 变体商品务必包含
    item_group_id
    ——Meta和TikTok使用此字段将颜色/尺寸选项分组为单个商品展示,避免重复显示
  • 确保商品图片无文字叠加——Meta的目录政策会拒绝带有促销文字、水印或拼贴的图片
  • 启用价格变化的实时批量更新——如果经常开展促销活动,每小时的源爬取会造成价格不匹配窗口;使用Batch API立即推送更改
  • 链接店铺前先完成TikTok Seller Center审核——TikTok需要单独的卖家审核流程;仅同步目录无法解锁TikTok Shop

Common Pitfalls

常见问题

ProblemSolution
Products stuck "under review" in Instagram ShopEnsure product images show the item clearly with no overlaid text; review Meta's Commerce Policies for prohibited categories
Price mismatch error in MetaThe price in your feed must exactly match the price on the landing page; if running a sale, update both simultaneously
TikTok catalog items not appearing in TikTok ShopTikTok requires separate Seller Center account approval — catalog sync is not sufficient; apply for TikTok Shop separately
Product tags not showing on Instagram postsYour Instagram Shop must be approved before tagging works; check Instagram → Settings → Business → Shopping for status
Feed URL returns 403 after deploymentAdd the Meta crawler's IP range to your CDN allowlist, or ensure the feed URL is publicly accessible without authentication
问题解决方案
商品在Instagram Shop中一直处于“审核中”确保商品图片清晰展示商品且无文字叠加;查看Meta商务政策中的违禁类别
Meta中出现价格不匹配错误源中的价格必须与落地页价格完全一致;如果进行促销,请同时更新两者
TikTok目录商品未在TikTok Shop中显示TikTok需要单独的Seller Center账户审核——仅同步目录不够;需单独申请TikTok Shop
Instagram帖子中的商品标记未显示你的Instagram Shop必须先通过审核才能使用标记功能;在Instagram → 设置 → 商务 → 购物中查看状态
部署后源URL返回403错误将Meta爬虫的IP范围添加到CDN白名单,或确保源URL可公开访问无需认证

Related Skills

相关技能

  • @meta-ads-integration
  • @google-shopping-feed
  • @tiktok-ads-integration
  • @influencer-tracking
  • @ugc-campaign-management
  • @meta-ads-integration
  • @google-shopping-feed
  • @tiktok-ads-integration
  • @influencer-tracking
  • @ugc-campaign-management