From 3cec2d8f2e45969ef2eba501b4f6fe35c9656d30 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Fri, 9 Jan 2026 16:46:18 +0000 Subject: [PATCH] Add automatic Facebook sharing with video previews Implement server-side Open Graph meta tags for videos and update video sharing functionality. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 3500eb91-6967-423b-a9b5-22b380def61b Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/lPVBpdc --- .replit | 16 ------- client/src/pages/VideoPage.tsx | 9 +++- server/routes.ts | 87 ++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 17 deletions(-) diff --git a/.replit b/.replit index 7219eba..86aa0b0 100644 --- a/.replit +++ b/.replit @@ -15,22 +15,6 @@ run = ["npm", "run", "start"] localPort = 5000 externalPort = 80 -[[ports]] -localPort = 33967 -externalPort = 3002 - -[[ports]] -localPort = 34033 -externalPort = 3001 - -[[ports]] -localPort = 35637 -externalPort = 3000 - -[[ports]] -localPort = 41219 -externalPort = 3003 - [env] PORT = "5000" diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx index fcad506..d92987e 100644 --- a/client/src/pages/VideoPage.tsx +++ b/client/src/pages/VideoPage.tsx @@ -315,6 +315,13 @@ export default function VideoPage() { return `${baseUrl}/video/${currentVideo.id}`; }; + // Facebook share URL uses special endpoint with proper OG meta tags + const getFacebookShareUrl = () => { + if (!currentVideo?.id) return window.location.origin; + const baseUrl = 'https://video.folx.tv'; + return `${baseUrl}/share/video/${currentVideo.id}`; + }; + const copyToClipboard = async () => { try { await navigator.clipboard.writeText(getShareUrl()); @@ -732,7 +739,7 @@ export default function VideoPage() { {showShareMenu && (
- +
Facebook diff --git a/server/routes.ts b/server/routes.ts index d93cbb1..1adea2f 100644 --- a/server/routes.ts +++ b/server/routes.ts @@ -1280,6 +1280,93 @@ export async function registerRoutes(app: Express): Promise { } }); + // Facebook/Social Media Share Page - Returns HTML with proper OG tags for video sharing + app.get('/share/video/:id', async (req, res) => { + try { + const { id } = req.params; + const video = await findVideoByAnyId(id); + + if (!video) { + return res.status(404).send('Video not found'); + } + + const baseUrl = 'https://video.folx.tv'; + const videoUrl = `${baseUrl}/video/${video.id}`; + + // Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook) + const thumbnailUrl = video.thumbnailUrl + ? video.thumbnailUrl.replace('width=400&height=225', 'width=1200&height=630').replace('format=webp', 'format=jpg') + : `${baseUrl}/api/social-image`; + + // Clean description for meta tags + const description = video.description + ? video.description.substring(0, 200).replace(/[<>"']/g, '') + : `Gledajte ${video.title} na video.folx.tv - Najboljša glasba`; + + const title = video.title || 'video.folx.tv'; + + // Return HTML page with OG tags that redirects to actual video + const html = ` + + + + + ${title} - video.folx.tv + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Preusmerjanje...

+

Če se ne preusmeri avtomatično, kliknite tukaj.

+
+ + +`; + + res.set('Content-Type', 'text/html'); + res.send(html); + } catch (error) { + console.error('Error generating share page:', error); + res.status(500).send('Error generating share page'); + } + }); + // SEO - Sitemap XML with all video pages app.get('/sitemap.xml', async (req, res) => { try {