MokoConsulting/MokoSuiteCross
1
0
Fork 0
Code Issues 25 Pull Requests 1 Releases 2 Wiki Activity

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

New Issue
Open
opened 2026-06-23 13:34:19 +00:00 by jmiller · 0 comments
jmiller commented 2026-06-23 13:34:19 +00:00
Owner
Copy Link
Copy Source

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.
Labels
No items
No labels
Priority Medium
Type Feature
Milestone
No items
No Milestone
Assignees
Clear assignees
jmiller (Jonathan Miller)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoSuiteCross#156
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?