🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Social Auto Poster
πŸ¦€ ClawHub

Social Auto Poster

by @quoc-modoro

Automate posting content with images to LinkedIn, X/Twitter, Facebook, WordPress, and Substack via browser automation. Use when: (1) posting a new article or...

Versionv1.1.0
Downloads486
#clawhub
TERMINAL
clawhub install social-auto-poster

πŸ“– About This Skill

name: "social-auto-poster" description: "Automate posting content with images to LinkedIn, X/Twitter, Facebook, WordPress, and Substack via browser automation. Use when: (1) posting a new article or social update to one or more platforms, (2) cross-platform publishing with platform-specific images, (3) verifying a post was published successfully. Includes image creation via overlay script, ARM upload pattern, and per-platform browser workflows. NOT for: reading feeds, DMs, analytics, or scheduling (use cron instead)." license: MIT metadata: version: 1.1.0 author: quocmodoro category: marketing

Social Auto Poster

Cross-platform publishing skill for LinkedIn, X/Twitter, Facebook, WordPress, and Substack. Covers one-time setup, image creation, ARM upload, text entry, and post verification for each platform.

Prerequisites β€” One-Time Setup

Complete these steps once before using this skill for the first time.

1. Browser Login (LinkedIn, X, Facebook, Substack)

These four platforms use browser session authentication. You must log in manually once and keep the browser session alive.

browser start
navigate linkedin.com β†’ log in if prompted
navigate x.com β†’ log in if prompted
navigate facebook.com β†’ log in if prompted
navigate [publication].substack.com β†’ log in if prompted
browser stop

Important rules:

  • Never run pkill -f "Google Chrome" or kill the browser process manually β€” this destroys all saved sessions and forces you to log in again
  • Only use browser stop / browser start via OpenClaw to restart the browser safely
  • Sessions persist in the browser profile directory and survive restarts as long as you use browser stop

    • 2. WordPress Credentials

    WordPress uses REST API with Application Password β€” no browser needed.

    Create a credentials file at ~/.openclaw/.wp-[yoursite].env:

    WP_URL=https://yoursite.com
WP_USER=your_username
WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

    To generate an Application Password: 1. Go to WordPress Admin β†’ Users β†’ Profile 2. Scroll to "Application Passwords" 3. Enter a name (e.g., "OpenClaw") β†’ click Add New 4. Copy the generated password into the .env file

    3. Image Overlay Script

    This skill uses a shell script to generate quote images from your photo library. Locate or install it at:

    ~/workspace/linkedin-assets/create-overlay-image.sh

    Verify it works: 

    bash ~/workspace/linkedin-assets/create-overlay-image.sh "Test quote" /tmp/test-output.png
ls -lh /tmp/test-output.png

    Expected output: a PNG file with your quote overlaid on a background photo.

    4. Upload Directory

    Ensure the uploads directory exists:

    mkdir -p /tmp/openclaw/uploads

    Note: /tmp/ is cleared on system reboot. Recreate images if needed after restart.

    Workflow Overview

    For each post, follow this sequence:

    Step 1: Create images (bash script) β€” before opening any browser
Step 2: Post to LinkedIn
Step 3: Post to X/Twitter (include LinkedIn link)
Step 4: Post to Facebook
Step 5: Post to WordPress (API, no browser)
Step 6: Post to Substack (browser)
Step 7: Verify all platforms

    Always create both images first. Opening and closing the browser repeatedly wastes time and risks losing sessions.

    Step 1 β€” Create Images

    Run both image commands before opening the browser:

    # English image β€” used for LinkedIn and X
bash ~/workspace/linkedin-assets/create-overlay-image.sh \
  "Your English quote here" \
  /tmp/openclaw/uploads/[topic]-en.png
    Local language image β€” used for Facebook, WordPress, Substack
    
bash ~/workspace/linkedin-assets/create-overlay-image.sh \
  "Your local language quote here" \
  /tmp/openclaw/uploads/[topic]-vi.png

    Verify both files exist and are non-empty before continuing: 

    ls -lh /tmp/openclaw/uploads/[topic]-en.png /tmp/openclaw/uploads/[topic]-vi.png

    Step 2 β€” LinkedIn

    Key constraint: Upload dialog lives inside a Shadow DOM (div.theme--light). ARM + Playwright native click is required. Never use evaluate input.click().

    browser start β†’ navigate linkedin.com/feed/ β†’ wait for "Photo" text to appear
    ARM upload:
  browser upload paths=["/tmp/openclaw/uploads/[topic]-en.png"]
  (no selector β€” ARM queues the file for the next file picker that opens)
    snapshot β†’ get ref for Photo button (an  link to /preload/sharebox/?detourType=IMAGE)
click ref [Photo] β†’ wait for Editor dialog to open
      CHECK: if dialog shows "N of M" (e.g. "1 of 2") β†’ leftover from previous session
  β†’ click Delete button until counter shows "1 of 1"
    click Next β†’ wait for "Create post modal" to appear
snapshot β†’ get ref for textbox labeled "Text editor for creating content"
click ref [textbox] β†’ type ref [full post text including hashtags]
snapshot β†’ verify Post button is active (not disabled)
click ref [Post] β†’ wait 8s
    Verify:
  navigate linkedin.com/in/[username]/recent-activity/all/
  evaluate: document.querySelectorAll('[data-urn]')[0].innerText β†’ should contain your text
    browser close tab β†’ browser stop

    Step 3 β€” X / Twitter

    Key constraint: ARM interceptor only fires on Playwright native click (click ref). Never use evaluate btn.click() to trigger the file picker β€” it breaks ARM and causes the image and text to post as two separate tweets.

    280-character limit: Count characters before typing. If over, shorten the text first.

    browser start β†’ navigate x.com/compose/post β†’ wait 3s
    ARM upload:
  browser upload paths=["/tmp/openclaw/uploads/[topic]-en.png"]
    snapshot depth=6 β†’ get ref for "Add photos or video" button
  (depth=6 needed to expose buttons nested inside )
    click ref [Add photos or video] ← Playwright native click, NOT evaluate
wait 5s β†’ evaluate: document.querySelectorAll('img[src*="blob:"]').length
  β†’ must equal 1 before continuing
    snapshot β†’ get ref for textbox "Post text" (refs change after image attaches β€” always re-snapshot)
click ref [textbox] β†’ type ref [text, max 280 characters]
    evaluate: verify before posting
  document.querySelector('[data-testid="tweetButton"]').disabled === false
  document.querySelector('[data-testid="tweetTextarea_0"]').innerText.length ≀ 280
    evaluate: document.querySelector('[data-testid="tweetButton"]').click()
wait 10s β†’ evaluate: location.href β†’ should be "https://x.com/home"
    browser close tab β†’ browser stop

    Tip: Include the LinkedIn post URL in the X text to drive cross-platform traffic.

    Step 4 β€” Facebook

    Key constraint: After the image uploads, Facebook switches to a new screen and the textbox count drops from 3 to 1. Always re-query the textbox AFTER blob=1 is confirmed β€” typing before that goes into the wrong element.

    browser start β†’ navigate facebook.com β†’ wait 5s
    evaluate: click "What's on your mind?" / "Bẑn đang nghĩ gì?" button
  [...document.querySelectorAll('[role="button"]')]
    .find(b => b.textContent.includes('đang nghĩ gì') || b.textContent.includes("on your mind"))
    .click()
    wait 2s β†’ verify "Create post" / "TαΊ‘o bΓ i viαΊΏt" dialog is open
    ARM upload:
  browser upload paths=["/tmp/openclaw/uploads/[topic]-vi.png"]
    evaluate: inside "TαΊ‘o bΓ i viαΊΏt" dialog, click the photo button:
  dialog.querySelector('[aria-label="αΊ’nh/video"]').click()
  (or "[aria-label='Photo/video']" for English UI)
    wait 6s β†’ evaluate: document.querySelectorAll('img[src*="blob:"]').length
  IF blob=0: ARM again + click photo button again (max 2 retries)
    Once blob=1:
  evaluate: re-query textbox β€” after image loads there is exactly 1:
    document.querySelector('[role="dialog"] [role="textbox"][contenteditable="true"]')
  evaluate: tb.click(); tb.focus()
  browser act type selector='[role="dialog"] [role="textbox"][contenteditable="true"]'
    text=[full post text including hashtags]
    evaluate: verify blob=1 AND textbox.innerText.length > 0
    evaluate: click "Next" / "TiαΊΏp" button
wait 5s
evaluate: click "Post" / "Đăng" button
wait 8s
    evaluate: verify compose dialog is gone:
  !document.querySelectorAll('[role="dialog"]').some(d => d.innerText.includes('TαΊ‘o bΓ i viαΊΏt'))
    browser close tab β†’ browser stop

    Step 5 β€” WordPress (REST API)

    No browser needed. Load credentials first:

    source ~/.openclaw/.wp-[yoursite].env

    5a. Upload featured image: 

    MEDIA=$(curl -s -X POST "$WP_URL/wp-json/wp/v2/media" \
  -u "$WP_USER:$WP_APP_PASSWORD" \
  -H "Content-Disposition: attachment; filename=post-image.png" \
  -H "Content-Type: image/png" \
  --data-binary @/tmp/openclaw/uploads/[topic]-vi.png)
    MEDIA_ID=$(echo $MEDIA | python3 -c "import sys,json; print(json.load(sys.stdin)['id'])")
IMAGE_URL=$(echo $MEDIA | python3 -c "import sys,json; print(json.load(sys.stdin)['source_url'])")

    5b. Build post JSON (always use Python β€” never heredoc, heredoc breaks UTF-8): 

    python3 -c "
import json
post = {
  'title': 'Your Post Title',
  'content': '
    Full HTML content here.
    ',
  'status': 'publish',
  'categories': [8],
  'featured_media': $MEDIA_ID
}
with open('/tmp/wp-post.json', 'w') as f:
    json.dump(post, f, ensure_ascii=False)
"

    5c. Publish: 

    POST=$(curl -s -X POST "$WP_URL/wp-json/wp/v2/posts" \
  -u "$WP_USER:$WP_APP_PASSWORD" \
  -H "Content-Type: application/json" \
  --data-binary @/tmp/wp-post.json)
    POST_ID=$(echo $POST | python3 -c "import sys,json; print(json.load(sys.stdin)['id'])")
POST_URL=$(echo $POST | python3 -c "import sys,json; print(json.load(sys.stdin)['link'])")
echo "Published: $POST_URL"

    5d. Patch Yoast SEO OG image (required β€” skipping this causes avatar.jpg to show when the post is shared): 

    curl -s -X POST "$WP_URL/wp-json/wp/v2/posts/$POST_ID" \
  -u "$WP_USER:$WP_APP_PASSWORD" \
  -H "Content-Type: application/json" \
  -d "{\"meta\":{\"_yoast_wpseo_opengraph-image\":\"$IMAGE_URL\",\"_yoast_wpseo_opengraph-image-id\":$MEDIA_ID}}"

    5e. Verify OG image: 

    curl -s "$WP_URL/wp-json/wp/v2/posts/$POST_ID?_fields=yoast_head_json" \
  | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['yoast_head_json']['og_image'][0]['url'])"

    Should print the post image URL, not avatar.jpg

    Default category IDs (adjust per site): 8=Business, 6=Marketing, 14=Skills, 10=Lifestyle, 5=Other

    Step 6 β€” Substack

    Key constraint: Insert the image into the body FIRST, then type text. Opposite of Facebook. Text typed before image insertion gets wiped when ProseMirror re-renders.

    browser start
navigate [publication].substack.com/publish/post/new β†’ wait 5s
  (NOT substack.com/new β€” must use the publication subdomain URL)
    snapshot β†’ type Title β†’ type Subtitle (if needed)
    ARM upload:
  browser upload paths=["/tmp/openclaw/uploads/[topic]-vi.png"]
    snapshot β†’ get ref for Image button in ProseMirror toolbar
click ref [Image] β†’ wait for file picker β†’ ARM intercepts β†’ image inserts into body
wait 5s β†’ verify image blob appears in editor content
    snapshot β†’ get ref for .ProseMirror-focused editor area
type ref [full post content] (timeoutMs=60000 for long posts)
    click Continue β†’ wait 5s
snapshot β†’ click "Send to everyone now" / "Publish now"
wait 8s β†’ verify publish confirmation appears
    browser tabs β†’ get targetId β†’ browser close targetId β†’ browser stop

    Verify: Navigate to [publication].substack.com β€” latest post should appear at the top.

    Step 7 β€” Verification Checklist

    After posting to all platforms:

    | Platform | Verify by | |----------|-----------| | LinkedIn | recent-activity page β€” post text visible + image attached | | X | x.com/home feed β€” tweet with image visible | | Facebook | Profile or Page feed β€” post with image and full text visible | | WordPress | Visit post URL β€” featured image correct, OG image not avatar | | Substack | Publication homepage β€” post appears at top |

    Error Reference

    | Symptom | Cause | Fix | |---------|-------|-----| | X: two posts (1 image-only, 1 text-only) | Used evaluate btn.click() for Add photos | Must use click ref from snapshot | | X: Post button stays disabled | Text over 280 chars | Check tweetTextarea_0.innerText.length, trim and retype | | FB: image uploaded but no text in post | Typed before blob=1 | Re-query textbox after blob=1 confirmed | | FB: blob=0 after 6s | ARM missed the file input | ARM again + click αΊ’nh/video again (max 2 retries) | | LinkedIn: "N of M" in Editor | Leftover image from previous session | Delete extras until "1 of 1" | | LinkedIn: Post button stays grey | Text not in shadow DOM editor | Use type ref not type selector | | WP: avatar shows on social share | Yoast OG image not patched | Run Step 5d and verify Step 5e | | Substack: text missing after publish | Text typed before image insertion | Always insert image first, then type | | Substack: page not found | Wrong URL format | Use [pub].substack.com/publish/post/new not substack.com/new | | All platforms: session lost after restart | Browser was killed manually | Never pkill Chrome; always use browser stop |

    Platform Summary

    | Platform | Image variant | Auth method | Tool | |----------|--------------|-------------|------| | LinkedIn | EN | Browser session | browser + ARM | | X/Twitter | EN | Browser session | browser + ARM (native click only) | | Facebook | Local/VI | Browser session | browser + ARM + re-query textbox | | WordPress | Local/VI | App password in .env | curl REST API | | Substack | Local/VI | Browser session | browser + ARM (image before text) |