Social preview: show how posts will render on each platform #156

Open
opened 2026-06-23 13:34:19 +00:00 by jmiller · 0 comments
Owner

Summary

Show users a visual preview of how their cross-post will look on each platform before publishing. Jetpack Social, Blog2Social, Buffer, and FS Poster all offer this. No Joomla competitor does.

Implementation

Add a preview panel to the article editor (content plugin) that renders platform-specific mockups:

Preview Types

  • Twitter card -- 280 char limit, link card preview
  • Facebook post -- OG image, title, description
  • Instagram -- Square image crop preview
  • LinkedIn -- Link share card
  • Mastodon -- Toot preview with CW
  • Bluesky -- 300 char limit card

Technical Approach

  1. JavaScript in the article editor that reads the Share Content fields
  2. Renders CSS-styled mockups of each platform's post layout
  3. Shows character counts with platform limits
  4. Updates in real-time as user types

Alternative (simpler)

Server-side rendered previews via AJAX endpoint that returns HTML mockups.

Acceptance Criteria

  • Preview panel in article editor
  • At least 6 platform mockup styles
  • Character count with limit warnings
  • Real-time update as share text changes
  • Image preview with platform-specific crop guides

Priority

Tier 1 -- High Impact. Every major competitor has this.

## Summary Show users a visual preview of how their cross-post will look on each platform before publishing. Jetpack Social, Blog2Social, Buffer, and FS Poster all offer this. No Joomla competitor does. ## Implementation Add a preview panel to the article editor (content plugin) that renders platform-specific mockups: ### Preview Types - **Twitter card** -- 280 char limit, link card preview - **Facebook post** -- OG image, title, description - **Instagram** -- Square image crop preview - **LinkedIn** -- Link share card - **Mastodon** -- Toot preview with CW - **Bluesky** -- 300 char limit card ### Technical Approach 1. JavaScript in the article editor that reads the Share Content fields 2. Renders CSS-styled mockups of each platform's post layout 3. Shows character counts with platform limits 4. Updates in real-time as user types ### Alternative (simpler) Server-side rendered previews via AJAX endpoint that returns HTML mockups. ## Acceptance Criteria - [ ] Preview panel in article editor - [ ] At least 6 platform mockup styles - [ ] Character count with limit warnings - [ ] Real-time update as share text changes - [ ] Image preview with platform-specific crop guides ## Priority Tier 1 -- High Impact. Every major competitor has this.
Sign in to join this conversation.
No labels
Priority Medium
Type Feature
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoSuiteCross#156