Social Commerce

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.

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

Core Instructions

Step 1: Choose your social commerce channels

Shopify users: One integration (Facebook & Instagram channel) enables both Instagram and Facebook Shopping simultaneously. TikTok requires a separate integration.

Step 2: Connect your platform to Instagram and Facebook Shopping

---

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

---

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

---

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

---

Custom / Headless

Generate a Meta-compatible XML feed and register it in Meta Commerce Manager:

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:

// 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`,
        },
      }],
    }),
  });
}

Step 3: Enable product tagging in Instagram posts

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

Step 4: Set up TikTok Shop product tagging

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

Step 5: Monitor catalog health

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)

Step 6: Measure social commerce performance

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

Common Pitfalls

Related Skills

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

Instagram Shopping Catalog Feed Endpoint

Problem/Feature Description

Threads & Texture is a mid-size fashion brand that has been selling through their own website for years. Their head of growth wants to unlock Instagram Shopping so the brand's posts and stories can feature tappable product tags that take customers directly to the product page. To do this, Meta requires a publicly accessible product catalog feed in a specific XML format, hosted at a stable URL.

The engineering team needs to build a TypeScript/Express endpoint that dynamically renders the full catalog as an XML document. The catalog has multiple products, each with several variants (different colors and sizes). The generated XML will be registered with Meta Commerce Manager so Meta can crawl it to populate the Instagram Shopping catalog. The team wants it done in a way that handles variants correctly so that Meta groups size/color options together under one product in the shopping interface.

Output Specification

Write a TypeScript file src/catalog/meta-feed.ts that exports a function generateMetaCatalogFeed(req, res) which:

• Queries a mock/stub database for active products with their variants, images, and categories
• Generates a well-formed XML product catalog response
• Sets appropriate HTTP response headers

Also write a short IMPLEMENTATION_NOTES.md explaining the key design decisions made (which library was used and why, how variants are handled, what HTTP headers are set and why, and how item IDs are assigned).

The implementation should use inline stubs/mocks for the database — no real database connection is needed. Define at least 2 sample products with at least 2 variants each.

Input Files

No input files provided — write the implementation from scratch.

Meta Commerce Catalog Registration and Live Inventory Sync

Problem/Feature Description

Sole Republic is a sneaker retailer that just finished building their Meta XML catalog feed endpoint (hosted at https://catalog.solerepublic.com/feeds/meta.xml). Now they need to wire up the backend integration: register their feed with a new Meta product catalog, schedule ongoing sync, and ensure that when a product's price is updated or stock runs out, the change appears in Meta within minutes — not hours.

The ops team was burned last year when a flash sale caused price mismatches between the website and Meta Shopping, leading to ad disapprovals and customer complaints. They want real-time push updates any time a product variant's price or inventory changes, and also want to understand how to keep their Meta access token alive long-term.

Output Specification

Write the following TypeScript files:

• src/meta/catalog-setup.ts — exports createMetaCatalog() and addFeedToCatalog(catalogId, feedUrl) functions that register a new catalog and schedule feed ingestion
• src/meta/sync.ts — exports pushProductUpdateToMeta(variantId) that sends a real-time update for a single variant when its price or inventory changes
• src/meta/token-management.ts — exports a scheduleTokenRefresh() function (can use setInterval or a cron approach) with a brief comment explaining the token lifecycle
• ARCHITECTURE.md — a short document (one page) describing: which Meta API version is used, how the feed schedule is configured, the real-time update mechanism, and token lifecycle management

Use environment variables (e.g. process.env.META_BUSINESS_ID, process.env.META_ACCESS_TOKEN, process.env.META_CATALOG_ID) for all credentials. Stub out any database calls that would be needed.

TikTok Shop Catalog Feed and Server-Side Purchase Tracking

Problem/Feature Description

BrewGear is a DTC coffee accessories brand that sells premium espresso equipment and merchandise. They've had strong Instagram traction but their marketing team wants to test TikTok Shop to reach a younger demographic. Simultaneously, their head of data noticed that their Facebook Pixel is missing a significant portion of purchase events — the data shows only about 65% of known orders appearing in Meta Events Manager, which is causing their ad optimization to underperform.

The team needs two things delivered at once: a working TikTok catalog feed endpoint for their product catalog, and a server-side purchase event system that reliably captures every conversion from their checkout flow to Meta. The two workstreams can share some infrastructure but should be implemented as separate, clean TypeScript modules. The team uses Node.js/Express and their product database stores prices in cents.

Output Specification

Produce the following files:

• src/catalog/tiktok-feed.ts — exports generateTikTokCatalogFeed(req, res) — an Express handler that generates a TikTok-compatible catalog feed. Use inline product stubs (at least 2 products with 2 variants each) — no real database required.
• src/tracking/meta-capi.ts — exports sendMetaPurchaseEvent(order) — a function that sends a purchase conversion event to Meta via the server-side Conversions API
• INTEGRATION_GUIDE.md — a short document explaining: the TikTok feed format requirements (field names, description limits), why server-side tracking is needed alongside browser tracking, how event deduplication works, and any TikTok Shop prerequisites the team should be aware of before going live

The order parameter for sendMetaPurchaseEvent can be typed as:

interface Order {
  id: string;
  customerEmail: string;
  customerPhone: string;
  customerFirstName: string;
  customerLastName: string;
  totalValue: number;
  lineItems: Array<{ sku: string; quantity: number }>;
}