Skip to content

Fix trailing whitespace in share text breaking OG image and miniapp rendering #598

@realproject7

Description

@realproject7

Bug

When sharing a story from a web browser (not the Farcaster miniapp), the OG image and miniapp embed don't render on Farcaster. The share works perfectly from within the Farcaster miniapp environment.

Root Cause

The Farcaster share has two code paths in src/components/ShareButtons.tsx:

Miniapp SDK path (works) — lines 38-41:

await sdk.actions.composeCast({
  text: shareText,        // text only
  embeds: [storyUrl],     // URL as separate embed → OG renders ✓
});

Web browser fallback (broken) — lines 47-49:

const fullText = `${shareText}\n${storyUrl}`;  // URL inside text
window.open(
  `https://farcaster.xyz/~/compose?text=${encodeURIComponent(fullText)}`,
);

The web fallback puts the URL inside the text parameter. Farcaster web doesn't extract it as a proper embed, so no OG image renders. The correct Farcaster web compose URL format uses a separate embeds[] parameter:

https://farcaster.xyz/~/compose?text=${encodeURIComponent(shareText)}&embeds[]=${encodeURIComponent(storyUrl)}

The X/Twitter share path (line 27-31) has the same pattern — URL inside text. X is better at auto-extracting URLs from tweet text, but a clean separation would still be more reliable.

Fix

Farcaster web fallback (line 47-49):

window.open(
  `https://farcaster.xyz/~/compose?text=${encodeURIComponent(shareText)}&embeds[]=${encodeURIComponent(storyUrl)}`,
  "_blank",
);

X/Twitter share (line 27-31):

Keep URL in text (X expects this), but ensure no trailing whitespace:

const fullText = `${shareText.trim()}\n${storyUrl.trim()}`;

Files to modify

  • src/components/ShareButtons.tsx — fix Farcaster web compose URL to use embeds[] parameter, trim X share text

Branch

task/598-share-embed-fix

Acceptance criteria

  • Farcaster web compose uses embeds[] parameter for the story URL
  • OG image renders correctly when shared from web browser to Farcaster
  • Farcaster miniapp share still works (SDK path unchanged)
  • X/Twitter share still works with clean URL
  • Build passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions