Member Avatar for hasnen_1

hello,how i can share video on my website to facebook and to twitter by meta tags in html
and to share image too to facebook and twitter but not all page only share for video and image

  • 2 Contributors
  • 1 Reply
  • 312 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Aeonix

Dani AI

Generated

Brief expert summary and correction to the thread: the preview that appears when a link is shared on Facebook or X/Twitter is driven by server-rendered meta tags (Open Graph for Facebook, Twitter Cards for X/Twitter) on the URL that is shared. That is the correct way to make a share show only one video or image (serve a dedicated URL for the asset and put the tags in the page head). was right to warn against trying to inject arbitrary interactive code into a social feed—platforms do not run site JS when scraping link previews. (ogp.me)

Server-side Open Graph skeleton (render this on a per-asset page so each video/image has its own URL):

<?php
// $title, $desc, $thumb, $videoUrl, $pageUrl come from server-side DB
?>
<meta property="og:title" content="<?php echo htmlspecialchars($title,ENT_QUOTES); ?>" />
<meta property="og:type" content="video.other" />
<meta property="og:url" content="<?php echo htmlspecialchars($pageUrl,ENT_QUOTES); ?>" />
<meta property="og:image" content="<?php echo htmlspecialchars($thumb,ENT_QUOTES); ?>" />
<meta property="og:description" content="<?php echo htmlspecialchars($desc,ENT_QUOTES); ?>" />
<meta property="og:video" content="<?php echo htmlspecialchars($videoUrl,ENT_QUOTES); ?>" />
<meta property="og:video:type" content="video/mp4" />

Use absolute HTTPS URLs and provide og:video:type, width/height where possible so scrapers can pick the right file. (ogp.me)

X/Twitter notes: add Twitter Card tags. For an image preview use twitter:card=summary_large_image; for playable video use the player card (twitter:card=player) and point twitter:player at a secure iframe player page that serves the video. Test the player with the Card Validator and follow the Cards markup rules. Example (minimal):

<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="<?php echo $title; ?>" />
<meta name="twitter:player" content="https://example.com/player.php?vid=<?php echo $id; ?>" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />
<meta name="twitter:image" content="<?php echo $thumb; ?>" />

Follow the X/Twitter Cards docs for the exact requirements and limitations. (developer.x.com)

Practical checklist / gotchas: (1) each shareable asset needs its own public URL with server-side meta tags; (2) media URLs must be HTTPS and reachable by platform crawlers (no auth or sticky redirects); (3) scrapers cache results — use the Facebook Sharing Debugger and the Twitter Card Validator to force re-scrapes and to preview; (4) prefer 1200x630-ish images for best results and set og:image:width/height. Finally, do not attempt to ship remote/executable JS into social platforms — that is blocked for security. (support.idxcentral.com)

Member Avatar for Aeonix

I don't think it's quite possible to (to my understanding of your post):

Input custom code from your website and make it interactive on public site, where everyone else can see and interact with it.

This would leave a lot of holes in security of Facebook and make your page, or rather your visitors vulnerable to XSS.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.